同時ajax調用

我試圖同時做2個（或更多）ajax調用。我不想使用jQuery，只使用純JavaScript。同時ajax調用

大多數情況下，它的工作原理。 data1將從sample.com/ajax1輸出數據，data2將從sample.com/ajax2輸出數據，但有時（從10開始）第二個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();

來源

2013-09-10 filip.karas

_「但有時（從10開始）第二個AJAX調用將顯示來自第一個AJAX調用的結果。」_因爲它們是異步的。在第二次AJAX呼叫之前發送的一個AJAX呼叫將在第二次呼叫返回之前返回，這是零保證。 – j08691

「var data」是問題.... – cocco

嘗試使用'data1'和'data2'而不是'data'，因爲它們都共享相同的變量。 – Pete

首先，我再評包裹你的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-10 20:21:40 Matias

請考慮評論你的downvote的原因 – Matias

因爲你沒有正確封裝data。你寫它的方式，數據是一個全局對象，所以它可以通過ajax調用來修改。由於ajax調用是異步的，這將導致data的不可預知的值。

來源

2013-09-10 20:27:25 Jedediah

這個問題可能是因爲你忘了使用此功能，您可以創建多個請求，並已超過更多的控制權定義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-10 20:52:21 cocco

回答

相關問題