Одновременные вызовы ajax

Question

Я пытаюсь сделать два (или более) вызова 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. Поскольку аякс-вызовы асинхронны, это приведет к непредсказуемым значениям для 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 ... вам нужно изменить код, чтобы он работал со старыми браузерами.