只有多个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请求的最后完成

回答

相关问题