XMLHttpRequestで複数のファイルにアクセスしたがレスポンスが1度しかない - JavaScript

XMLHttpRequestで複数のファイルにアクセスしたが、レスポンスが1度しかない場合の対処法です。

問題の発生するコード

下記のコードで問題が発生します。

function admain() {
  for (var i = 0; i < 2; i++) {
    httpObj = new XMLHttpRequest();
    httpObj.onreadystatechange = function () {
      if (httpObj.readyState == 4) {
        if (httpObj.status == 200) {
         //ここか1度しか実行されない
        }
      }
    }

    httpObj.open("get", "xmlhandler.ashx?id="+id[i], true);
    httpObj.send(null);
    break;
  }
}

原因

XMLHttpRequestでは、1つのファイル(URL)にアクセスするごとにXMLHttpRequestのインスタンスを作成する必要があります。上記のコードでもそのように実装しているように見えますが、JavaScriptではvarなしの変数の場合、グローバル変数として扱われるため、forループ内でひとつ前のループのXMLHttpRequestのインスタンスを上書きしています。先に作成したインスタンスが廃棄されてしまうため正しく動作しない現象が発生します。

対策

XMLHttpRequestのインスタンスをローカル変数に格納します。ローカル変数は変数名の先頭にvarを付けて変数宣言をします。

対策コード

function admain() {
  for (var i = 0; i < 2; i++) {
    var httpObj = new XMLHttpRequest(); //この行を変更
    httpObj.onreadystatechange = function () {
      if (httpObj.readyState == 4) {
        if (httpObj.status == 200) {
         //複数回実行される
        }
      }
    }

    httpObj.open("get", "xmlhandler.ashx?id="+id[i], true);
    httpObj.send(null);
    break;
  }
}