2005-06-01

XMLHttpRequestを使用するとサーバに対する非同期リクエストを行うことができます。
最近巷で話題のAjaxで使われている技術の1つです。

自分でAjaxのコードを書いていた時に、いろいろ調べた結果のメモをまとめておきます。

1. XMLHttpRequestのオブジェクトの生成について
ブラウザやそのバージョンによってオブジェクト生成方法が違うので http://web.paulownia.jp/script/xmlhttp2.html にあるように、違いを吸収したfunctionを用意すると良い。

2. ReadyStateのハンドリング

xmlhttp.readyState == 4 && xmlhttp.status == 200

をもって正常レスポンスと判断している場合が多いようですが、Firefox では後述のバグ？によるエラーが発生します。
なので、xmlhttp.status を参照せず、xmlhttp.responseTextがあるかどうかで判断した方が良いようです。

xmlhttp.readyState == 4 && xmlhttp.responseText

xmlhttp.readyState != 4 の状態で、responseTextを参照しようとすると IE ではエラーになるので注意が必要です。

3. 多重リクエストの問題
XMLHttpRequestで、非同期にリクエストを行うことができるため、多重リクエストの問題が発生します。
アプリケーションの作りによっては非常に短い間隔でリクエストを行い、レスポンスが戻る場合に次のリクエストを発行してしまう場合があります。Firefoxではこれがエラーやパフォーマンス低下の原因となっているようです。

前のリクエストが完了しているかどうかは、readyStateを参照することで判断します。
xmlhttp.readyState != 0 であれば何らかの処理がまだ終わっていません。

前のリクエストが完了していない場合には
・完了していない場合は、リクエストを送らない。
・完了するまで待つ。
・xmlhttp.abort()メソッドでリクエストのキャンセルを行う。

などの方法があり3番目がお勧めです。

4. Firefoxで謎のエラー
Firefox の Javascriptコンソールに

エラー: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status]"  nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"  location: "JS frame :: http://xxxx.co.jp/ :: ReadyStateChangeHandler :: line 91"  data: no]
ソースファイル: http://xxxx.co.jp/
行: 91

というエラーが出力され、レスポンスをうまく処理できない場合があります。
根本的な原因はブラウザのバグだと思うのですが、前述の status を参照しない　＆　abort()を使用することによりほとんど発生しなくなりました。
詳細情報お持ちの方は、ぜひお知らせください。

higepon blog

XMLHttpRequest on Ajaxのあれこれ

[Mona] Mona本増刷