javascript - 仅完成多个 ajax 请求中的最后一个

标签 javascript ajax

我正在尝试创建一个脚本,允许我使用几行代码进行 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”

最佳答案

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

你会想 declare x 在设置它时或之前设置它,以便它对每个 Ajax 请求都有作用域并且是唯一的:

var x = new XMLHttpRequest();

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

关于javascript - 仅完成多个 ajax 请求中的最后一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18322635/

相关文章:

javascript - 将 ES6 类 getter 设置为可枚举

javascript - 拖动后保存 div 的位置

javascript - Google Maps API javascript V3 未捕获类型错误 : Type error

c# - AJAX 不将复选框值传输到 Controller

c# - 使用来自 AJAX Post、MVC 5 的添加记录更新网格

javascript - ChartJS 在制作新图表时删除以前的图表

javascript - Graphql 不能返回数组

javascript - 在 jQuery 延迟后加载 jquery 插件文件

javascript - AngularJS 不存在 'Access-Control-Allow-Origin' header

jquery - 在 IE 10 中成功执行 XMLHttpRequest 后,无法立即通过 .Ajax 发布到新的操作方法