0

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

大多数时候，它有效。data1 将从 sample.com/ajax1 输出数据，data2 将从 sample.com/ajax2 输出数据，但有时（10 中的 1）第二个 AJAX 调用将显示第一个 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();
4

3 回答 3

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);
    }
}
于 2013-09-10T20:21:40.277 回答
1

因为你没有正确封装data. 按照您编写的方式，数据是一个全局对象，因此可以通过任一 ajax 调用对其进行修改。由于 ajax 调用是异步的，这将导致data.

于 2013-09-10T20:27:25.740 回答
0

问题可能是因为您忘记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... 您需要修改代码以使其适用于较旧的浏览器。

于 2013-09-10T20:52:21.613 回答