XMLHttpRequest の使用例 その2

XMLHttpRequest の使用例 の続き。

XMLHttpRequest を複数使う、または繰り返し使う場合の例は次の通り。

function mainScript() { loadContents(url1); loadContents(url2); } function loadContents(url) { var http = new XMLHttpRequest(); http.open("GET", url , true); http.onreadystatechange = function(){handleHttpResponse(http)}; http.send(null); } function handleHttpResponse(http) { if (http.readyState == 4) { if(http.status == 200) { // 正常処理 } else // エラー処理 } }

ポイントは、

• XMLHttpRequest を関数内のローカル変数にした。
• 匿名関数を使って XMLHttpRequest.onreadystatechange イベントハンドラに XMLHttpRequest を引数として渡す。

この 2 点。XMLHttpRequest をローカル変数にすることで 2 回目に XMLHttpRequest を呼び出されたとき上書きされてしまうことを防止する。onreadystatechange には直接は引数を渡すことはできないので、匿名関数にしてそこからメソッドを呼び出す。

このようにすると、XMLHttpRequest を複数、または繰り返し使うことができる。

参考文献

• Getting Started - MDC 
• onreadystatechange に引数を渡す - 英語とプログラミング気まぐれ日記
• XMLHttpRequest の onreadystatechange に引数を渡したかった
• XMLHttpRequest の onreadystatechange の this - IT戦記

タグ：JavaScript