对同一 AJAX 函数的串行调用仅返回上次调用的数据

Serial call to same AJAX function only returns data from last call

本文关键字：调用 返回 数据 AJAX 函数      更新时间：2023-09-26

我有三个div元素，我想用自己的内容填充每个元素。我每次都调用相同的 AJAX(非常通用(函数，将div id 的名称作为参数发送：

//left-right rectangle content
var rl = getContent("rightLeft");   
//bottom content
var br = getContent("bottomRectangle");
//top content
var rtr = getContent("rightTopRectangle");

如果我在 AJAX 函数中执行警报(http.responseText(，我会从远程页面获得正确的 html 内容。(事实上，如果我添加警报，它似乎会"减慢"函数的速度，以便每次调用它时都会正确返回我的内容，但谁希望在他们的网页上发出警报？

但是，如果没有警报，上述调用将仅正确处理最后一个呼叫。因此，在上面的调用序列中，只有最后一个div，其中 id="rightTopRectangle" 将被从 AJAX 调用中检索到的 html 填充。前两个调用不会使用 AJAX 检索到的 html 填充其div。如果我改变调用的顺序，它将始终是最后一个有效的 AJAX 调用。

我感觉问题与异步部分有关，在一次又一次地请求 AJAX 函数之前，以前的调用没有足够的时间来处理请求。

下面是 AJAX 函数：

function getContent(element){
    var url = "ajax/getcontent.php?cid="+element; //alert(url);
    http.onreadystatechange=function(){
        if (http.readyState==4 && http.status==200){ //alert(http.responseText);
            var response = http.responseXML.documentElement;
            callback(element,http.responseText);
        }
    }
    http.open("GET",url,true);
    http.send();        
}

名为"callback"的函数(它工作正常(如下所示：

function callback(e,c){
    document.getElementById(e).innerHTML = "<div style='"line-height:"+ document.getElementById(e).offsetHeight +"px;margin:0px auto 0px auto;text-align:center;'" >" + unescape(c) + "</div>";
}

更新：这现在有效。我在 getContent 函数中添加了一行：

function getContent(element){
    var http = createRequestObject(); /*After Tej's answer, I took this line out 
    of the root of my script and placed it here, within the function, in order to 
    instantiate a new http object each time I call this function, so that they all 
    operate independently of one another*/
    var url = "ajax/getcontent.php?cid="+element; //alert(url);
    http.onreadystatechange=function(){
        if (http.readyState==4 && http.status==200){
            var response = http.responseXML.documentElement;
            callback(element,http.responseText);
        }
    }
    http.open("GET",url,true);
    http.send();        
}

你对所有 ajax 请求重用相同的XmlHttpRequest;这导致最后一个请求总是获胜，因为其他请求已被覆盖。相反，您应该为每个调用创建一个新的 ajax 请求。

 http = CreateAjaxRequest();
 http.onreadystatechange = function() { ... }
 // etc

你应该element参数传递给你的onreadystatechange函数，试试这个，

req.onreadystatechange = function (el) {
    return function() {
      if (http.readyState==4 && http.status==200){ //alert(http.responseText);
          var response = http.responseXML.documentElement;
          callback(el,http.responseText);
      }
    };
}(element);
相关文章：