Question

我有三个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();        
}

Answer 1

您正在为所有ajax请求重复使用相同的XmlHttpRequest;这导致最后一个请求总是赢，因为其他请求已被覆盖。您应该为每个调用创建一个新的ajax请求。

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

Answer 2

你应该将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);

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

2 个答案: