5

重複の可能性：
forループからajaxコールバック関数（javascript）にインデックスを渡す

いくつかのコンテンツをフェッチするために、別のサーバーにxmlhttprequestsを作成することに少し混乱しています。これが私が書いたものですが、ある時点で間違っているようです。

var URL = new Array();
URL[0] = "http://www.example1.com";
URL[1] = "http://www.example2.com";
URL[2] = "http://www.example3.com";
var nRequest = new Array();
for (var i=0; i<3; i++) {
    nRequest[i] = new XMLHttpRequest();
    nRequest[i].open("GET", URL[i], true);
    nRequest[i].onreadystatechange = function (oEvent) {
        if (nRequest[i].readyState === 4) {
            if (nRequest[i].status === 200) {
                console.log(nRequest[i].responseText);
                alert(nRequest[i].responseText);
            } else {
                console.log("Error", nRequest[i].statusText);
            }
        }
    };
    nRequest[i].send(null);
}

IE10でこのコードを使用すると、コンソールでアクセスが拒否されます。

配列を削除して単純なリクエストを使用すると、期待どおりに動作します。

wRequest = new XMLHttpRequest();
wRequest.open("GET", "http://www.example1.com", true);
wRequest.onreadystatechange = function (oEvent) {
    if (wRequest.readyState === 4) {
        if (wRequest.status === 200) {
            console.log(wRequest.responseText);
            alert(wRequest.responseText);
        } else {
            console.log("Error", wRequest.statusText);
        }
    }
};
wRequest.send(null);

しかし、どのようにして複数の2〜3のリクエストをトリガーし、それでもデータ処理に問題がないようにする必要がありますか？

4

2 に答える 2

13

問題（slebetmanがカバーしたクロスドメインの問題を無視）は、ready状態変更コールバックが起動されたときに、ループが完了した後にi含まれるスコープからの変数を使用していることです。3これを修正する1つの方法は次のとおりです。

for (var i=0; i<3; i++){
   (function(i) {
      nRequest[i] = new XMLHttpRequest();
      nRequest[i].open("GET", URL[i], true);
      nRequest[i].onreadystatechange = function (oEvent) {
         if (nRequest[i].readyState === 4) {
            if (nRequest[i].status === 200) {
              console.log(nRequest[i].responseText);
              alert(nRequest[i].responseText);
            } else {
              console.log("Error", nRequest[i].statusText);
            }
         }
      };
      nRequest[i].send(null);
   })(i);
}

これにより、ループの反復ごとにすぐに呼び出される関数式が導入され、関数内のコードに独自のコードが含まれるようになりますi。JSクロージャの魔法は、onreadystatechange関数が呼び出されると、匿名関数のパラメーターiにアクセスすることを意味します（その関数が完了している場合でも） ）、i外部スコープではないため、nRequest毎回適切な要素が処理されます。

.open()また、あなたが言った行にタイプミスがありましたが、そうwURL[i]すべきでしたURL[i]。

応答テキストで何をする予定かによっては、リクエストの配列が必要かどうかはわかりません。URLとコールバック関数をパラメーターとして受け取る関数にAjaxコードをカプセル化して、それを呼び出すことができます。ループ内の関数...

于 2012-11-18T23:50:47.550 に答える
1

異なるサーバーへのxmlhttprequestsの作成

それをしてはいけない。XMLHttpRequestは、ページが属する同じドメインにのみ接続できます。これは「同一生成元ポリシー」と呼ばれます。

詳細については、Googleの「同一生成元ポリシー」またはSOで検索してください。

于 2012-11-18T23:50:18.220 に答える