同时Ajax调用 [英] Simultaneous ajax calls

问题描述

我试图让2（或更多）的AJAX调用同步。我不想使用jQuery，只是纯JavaScript。

在大多数情况下，它的工作原理。从sample.com/ajax2 sample.com/ajax1和data2的将输出数据，但有时（1 10）的第二AJAX调用将从第一个显示结果。DATA1将输出数据

这是怎么回事？这两个AJAX请求是请求数据来自同一个域，而是来自不同的URL。有什么办法如何prevent这种行为？

下面是脚本：

  //首先AJAX
VAR xmlhttp1;

//二AJAX
VAR xmlhttp2;

如果（window.XMLHtt prequest）{
    xmlhttp1 =新XMLHtt prequest（）;
} 其他 {
    xmlhttp1 =新的ActiveXObject（Microsoft.XMLHTTP）;
}

xmlhttp1.onreadystatechange =功能（）{
    如果（xmlhttp1.readyState == 4和＆安培; xmlhttp1.status == 200）{
        数据= JSON.parse（xmlhttp1.responseText）;
        的console.log（数据1：'+数据）;
    }
}

xmlhttp1.open（GET，http://sample.com/ajax1，真正的）;
xmlhttp1.send（）;

如果（window.XMLHtt prequest）{
    xmlhttp2 =新XMLHtt prequest（）;
} 其他 {
    xmlhttp2 =新的ActiveXObject（Microsoft.XMLHTTP）;
}

xmlhttp2.onreadystatechange =功能（）{
    如果（xmlhttp2.readyState == 4和＆安培; xmlhttp2.status == 200）{
        数据= JSON.parse（xmlhttp2.responseText）;
        的console.log（数据2：'+数据）;
    }
}

xmlhttp2.open（GET，http://sample.com/ajax2，真正的）;
xmlhttp2.send（）;
 

解决方案

首先，我电子书籍包裹你的xmlHtt prequest生成/处理的功能，这样你就不会重复code那么多。

你有没有的问题是，数据变量是全球性的，所以这两个AJAX回调使用的是同一个变量。您可以使用 VAR 关键字在这两个电话解决它。

  xmlhttp2.onreadystatechange =功能（）{
    如果（xmlhttp2.readyState == 4和＆安培; xmlhttp2.status == 200）{
        VAR数据= JSON.parse（xmlhttp2.responseText）;
        的console.log（数据2：'+数据）;
    }
}
 

I'm trying to make 2 (or more) ajax calls simultaneously. I don't want to use jQuery, only pure JavaScript.

Most of the time, it works. data1 will output data from sample.com/ajax1 and data2 will output data from sample.com/ajax2, but sometimes (1 from 10) the second AJAX call will display result from the first one.

Why is this happening? Both AJAX requests are requesting data from the same domain, but from different URLs. Is there any way how to prevent this behavior?

Here is the script:

// 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();

解决方案

First of all, I recomment wrapping your xmlHttpRequest generation/handling in a function, so you don't duplicate code that much.

The problem you have there is that the data variable is global, so both ajax callbacks are using the same variable. You can fix it using the var keyword in both calls.

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

这篇关于同时Ajax调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！