Question

我正在尝试创建一个脚本，允许我使用几行代码进行ajax调用。该脚本使用一个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”即可

Answer 1

这至少部分是因为每个new XMLHttpRequest都设置为相同的全局x，只能保留其中的一个x.readState。这意味着以后对x.responseText和x的引用并不总是指“正确的”实例。

您需要在设置时或之前declare var x = new XMLHttpRequest();，因此它的作用域是每个Ajax请求唯一的：

{{1}}

有关详细信息，请参阅Difference between using var and not using var in JavaScript。

Answer 2

如果您可以使用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.' );
    });

只有多个ajax请求中的最后一个完成

2 个答案: