javascript - 同时进行ajax调用

Question

我正在尝试同时进行 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();

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);
    }
}