2

数行のコードで ajax 呼び出しを実行できるスクリプトを作成しようとしています。スクリプトは 1 つの ajax リクエストで動作しますが、一度に複数のリクエストを処理すると失敗します。私は何を間違えましたか？

コードは最後のリクエストのみを処理し、他のリクエストは「読み込み中...」のままにします。

これが私のコードです：

/****************
  Related Javascript inside the HTML document
****************/
// First request
var ajax1 = new ajax_class();
ajax1.meth = "GET";
ajax1.file = "ajax_info.txt";
ajax1.elem = "results";
ajax1.send = null;
ajax1.ajax_call(ajax1.meth, ajax1.file, ajax1.elem, ajax1.send);

...

// Third request
var ajax3 = new ajax_class();
ajax3.meth = "GET";
ajax3.file = "ajax_info3.txt";
ajax3.elem = "results3";
ajax3.send = null;
ajax3.ajax_call(ajax3.meth, ajax3.file, ajax3.elem, ajax3.send);

/****************
  Related HTML inside the HTML document
****************/

<body>
<div id="results">Nothing has happend yet for 1....</div>
<div id="results2">Nothing has happend yet for 2 ....</div>
<div id="results3">Nothing has happend yet for 3 ....</div>
</body>


/****************
  Related code inside the JAVASCRIPT document
****************/

function ajax_class () {

this.meth = "GET";
this.file;
this.elem;
this.send = null;

this.ajax_call = function (meth, file, elem, send) {
    x = new XMLHttpRequest();
    x.onreadystatechange = function () {
        if (x.readyState == 4 && x.status == 200) {
           _id(elem).innerHTML = x.responseText;
        }
        else {
            _id(elem).innerHTML = "Loading ...";
        }
    }
    x.open(meth , file, true);
    x.send(send);
}
}

x変数の前に「var」を追加するだけで動作します

4

2 に答える 2

1

少なくとも部分的には、それぞれnew XMLHttpRequestが同じ global に設定されておりx、そのうちの 1 つしか保持できないためです。これは、後で参照することを意味し、常に「正しい」インスタンスを参照しているx.readStateとは限りません。x.responseText

スコープが設定され、各 Ajax リクエストに固有になるように、設定するときまたは設定する前に宣言 する必要があります。x

var x = new XMLHttpRequest();

詳細については、JavaScript で var を使用する場合と使用しない場合の違い を参照してください。

于 2013-08-19T20:43:04.653 に答える
0

jQuery を利用できるようになれば、コードははるかにシンプルになります。

    function firstAjaxCall() {
      return $.get('/first');
    }

    function secondAjaxCall() {
      return $.get('/second');
    }

    function doFinalWork() {
      //wrap up
    }

    $.when( firstAjaxCall(), secondAjaxCall() )
      .done(function() {
        doFinalWork();
      })
      .fail(function() {
        console.log( 'Something is wrong, go fix it.' );
    });
于 2013-08-19T20:53:33.140 に答える