非同期XMLHttpRequestを使用してXMLファイルの配列をロードする

Question

XMLファイルの配列をロードして配列に格納します。

コード例：

var src = [ "a", "b", "c", "d" ]; 
var dest = {}; 
for (var i in src) { 
    var req = new XMLHttpRequest(); 
    req.open("GET", src[i], true); 
    req.onreadystatechange = function(aEvt) { 
     if (req.readyState == 4) { 
      if (req.status == 200) { 
       dump(i + "\n"); 
       dest[i] = req.responseXML; 
      } 
     } 
    } 
    req.send(null); 
} 

はしかし、ダンプ結果は常に

です210

コールバックで参照されるiが常に外部iであることを示しているため、XMLファイルを正しく保存できません。

この問題を解決するにはどうすればよいですか？私たちは約50のXMLファイルを読み込み、ロードすることはできません。

ありがとうございます。

Answer 1

）

1. 配列をループオーバーするのにfor..inを使用しないでください。通常のforループを使用してください。
2. ループ内で関数を作成する典型的な間違いをします。 JavaScriptにはブロックスコープはなく、関数スコープのみがあります。したがって、iは、作成した関数が実行されたときにループした配列の最後の要素を常に参照します。彼らはすべてと同じiを参照しています。これを解決するには、関数を返す直ちに実行する関数を使用します（したがって、値はiです）。
3. reqへの参照を取得する必要があります。それ以外の場合は、常に最後に生成されたXMLHttpRequestを参照します（iと同じ理由）。

だから、一つの解決策は、次のようになります。

@Spinyノーマンのソリューションは、より読みやすいかもしれません

var src = [ "a", "b", "c", "d" ]; 
var dest = {}; 
for (var i = src.length;i--;) { 
    var req = new XMLHttpRequest(); 
    req.open("GET", xmlfile, true); 
    req.onreadystatechange = (function(i, req) { 
     return function(aEvt) { 
      if (req.readyState == 4) { 
       if (req.status == 200) { 
        dump(i + "\n"); 
        dest[i] = req.responseXML; 
       } 
      } 
     }; 
    }(i, req)); // capturing the current value/reference of i and req 
    req.send(null); 
} 

;）

Answer 2

あなたはこのような何か行うことができます：ところで

var src = [ "a", "b", "c", "d" ]; 
var dest = {}; 
var loadXml = function(i) { 
    var req = new XMLHttpRequest(); 
    req.open("GET", xmlfile, true); 
    req.onreadystatechange = function(aEvt) { 
     if (req.readyState == 4) { 
      if (req.status == 200) { 
       dump(i + "\n"); 
       dest[i] = req.responseXML; 
      } 
     } 
    } 
    req.send(null); 
}; 

for (var x = 0; x < src.length; x++) { 
    loadXml(x); 
} 

を、あなたが常に同じXMLFILEをロードしているようだが、私は、これはあなたの実際のコードが異なっていると確信している。