Question

我正在尝试同时进行2次（或更多次）ajax调用。我不想使用jQuery，只使用纯JavaScript。

大多数时候，它都有效。 data1将从sample.com/ajax1输出数据，data2将从sample.com/ajax2输出数据，但有时（1比10）第二个AJAX调用将显示第一个结果。

为什么会这样？这两个AJAX请求都是从同一个域请求数据，但是来自不同的URL。有什么方法可以防止这种行为吗？

这是脚本：

// First AJAX
var xmlhttp1;

// Second AJAX
var xmlhttp2;

if (window.XMLHttpRequest) {
    xmlhttp1 = new XMLHttpRequest();
} else {
    xmlhttp1 = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp1.onreadystatechange = function() {
    if (xmlhttp1.readyState == 4 && xmlhttp1.status == 200) {
        data = JSON.parse(xmlhttp1.responseText);
        console.log('data1: ' + data);
    }
}

xmlhttp1.open("GET", "http://sample.com/ajax1", true);
xmlhttp1.send();

if (window.XMLHttpRequest) {
    xmlhttp2 = new XMLHttpRequest();
} else {
    xmlhttp2 = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp2.onreadystatechange = function() {
    if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200) {
        data = JSON.parse(xmlhttp2.responseText);
        console.log('data2: ' + data);
    }
}

xmlhttp2.open("GET", "http://sample.com/ajax2", true);
xmlhttp2.send();

Answer 1

首先，我建议在函数中包装xmlHttpRequest生成/处理，因此不要重复代码。

你遇到的问题是data变量是全局变量，因此两个ajax回调都使用相同的变量。您可以在两次调用中使用var关键字对其进行修复。

xmlhttp2.onreadystatechange = function() {
    if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200) {
        var data = JSON.parse(xmlhttp2.responseText);
        console.log('data2: ' + data);
    }
}

Answer 2

因为您没有正确封装data。编写它的方式，数据是一个全局对象，因此可以通过ajax调用进行修改。由于ajax调用是异步的，因此会导致data的值不可预测。

Answer 3

问题可能是因为您忘记在函数中定义data

无论如何使用此功能，您可以创建多个请求并对其进行更多控制..

var req={};
function ajax(a){
 var i=Date.now()+((Math.random()*1000)>>0);
 req[i]=new XMLHttpRequest;
 req[i].i=i;
 req[i].open('GET',a);
 req[i].onload=LOG;
 req[i].send();
}
function LOG(){
 console.log(this.i,this.response);
 delete req[this.i];//clear
}
window.onload=function(){
 ajax('1.html');
 ajax('2.html');
 ajax('3.html');
}

使用xhr2 ...您需要修改代码以使其适用于旧浏览器。

同时ajax调用

3 个答案: