只有多個Ajax請求的最後完成

我想創建一個腳本，允許我用幾行代碼進行ajax調用。該腳本適用於一個Ajax請求，但是一次處理多個請求會失敗。我做錯了什麼？只有多個Ajax請求的最後完成

該代碼只處理最後一個請求，而讓其他人「加載...」。

這裏是我的代碼：現在

/**************** 
    Related Javascript inside the HTML document 
****************/ 
// First request 
var ajax1 = new ajax_class(); 
ajax1.meth = "GET"; 
ajax1.file = "ajax_info.txt"; 
ajax1.elem = "results"; 
ajax1.send = null; 
ajax1.ajax_call(ajax1.meth, ajax1.file, ajax1.elem, ajax1.send); 

... 

// Third request 
var ajax3 = new ajax_class(); 
ajax3.meth = "GET"; 
ajax3.file = "ajax_info3.txt"; 
ajax3.elem = "results3"; 
ajax3.send = null; 
ajax3.ajax_call(ajax3.meth, ajax3.file, ajax3.elem, ajax3.send); 

/**************** 
    Related HTML inside the HTML document 
****************/ 

<body> 
<div id="results">Nothing has happend yet for 1....</div> 
<div id="results2">Nothing has happend yet for 2 ....</div> 
<div id="results3">Nothing has happend yet for 3 ....</div> 
</body> 


/**************** 
    Related code inside the JAVASCRIPT document 
****************/ 

function ajax_class() { 

this.meth = "GET"; 
this.file; 
this.elem; 
this.send = null; 

this.ajax_call = function (meth, file, elem, send) { 
    x = new XMLHttpRequest(); 
    x.onreadystatechange = function() { 
     if (x.readyState == 4 && x.status == 200) { 
      _id(elem).innerHTML = x.responseText; 
     } 
     else { 
      _id(elem).innerHTML = "Loading ..."; 
     } 
    } 
    x.open(meth , file, true); 
    x.send(send); 
} 
}

作品，只是要在x變量的前

來源

2013-08-19 larsrbak

的jsfiddle請 –

如果你找到了解決辦法，將其添加爲一個答案，並接受它！ – likeitlikeit

它至少部分是因爲每個new XMLHttpRequest被設置爲添加「VAR」相同的全球x，它們只能保留其中的1個。這意味着後面對x.readState和x.responseText的引用並不總是指代「正確的」實例。

你要declarex時或設置它，它的作用域和獨特的每個Ajax請求之前：

var x = new XMLHttpRequest();

欲瞭解更多信息，請參閱Difference between using var and not using var in JavaScript。

來源

2013-08-19 20:43:04

不是「可能」，它正是發生了什麼事情。 –

@just_dont我寫道，因爲我不知道這是唯一的問題。但是，修改澄清。 –

它現在完美運行，我使用了「var」 - 非常感謝你 – larsrbak

如果你可以使用jQuery的，你的代碼將變得更加簡單

function firstAjaxCall() { 
     return $.get('/first'); 
    } 

    function secondAjaxCall() { 
     return $.get('/second'); 
    } 

    function doFinalWork() { 
     //wrap up 
    } 

    $.when(firstAjaxCall(), secondAjaxCall()) 
     .done(function() { 
     doFinalWork(); 
     }) 
     .fail(function() { 
     console.log('Something is wrong, go fix it.'); 
    });

來源

2013-08-19 20:53:33 Vinod

只有多個Ajax請求的最後完成

回答

相關問題