0

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

名为“回调”的函数（它工作正常）如下所示：

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();        
}
4

2 回答 2

1

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

 http = CreateAjaxRequest();
 http.onreadystatechange = function() { ... }
 // etc
于 2012-05-04T18:01:41.513 回答
0

你应该将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);
于 2012-05-04T17:43:39.560 回答