同じAJAX関数へのシリアル呼び出しは、最後の呼び出しからのデータのみを返します。

Question

私は3つのdiv要素を持っています。それぞれの要素に独自の内容を設定したいと思います。私は（非常に一般的な）パラメータとしてのdivのidの名前を送信し、それぞれの時間を機能同じAJAXを呼び出す：

//left-right rectangle content 
var rl = getContent("rightLeft"); 

//bottom content 
var br = getContent("bottomRectangle"); 

//top content 
var rtr = getContent("rightTopRectangle"); 

私はAJAX機能の中に警告（http.responseText）を行う場合、私が正しいを取得しますリモートページからのHTMLコンテンツ。 （実際には、アラートを追加すると、呼び出すたびに内容が正しく返されるように機能を「遅くする」ように見えますが、Webページに警告が必要ですか？）。

しかし、アラートがなければ、上記のコールは最後のコールだけを適切に処理します。したがって、上記の呼び出しシーケンスでは、id = "rightTopRectangle"の最後のdivのみがAJAX呼び出しから取得されたhtmlで埋められます。前の2回の呼び出しでは、divをAJAXで取得したhtmlで埋め込むことはありません。私が電話の注文を振ると、それは常に動作する最後のAJAXコールになります。

AJAX関数が何度も何度も要求される前に、前の呼び出しで要求を処理するのに十分な時間がない非同期部分と何か関係があると感じます。

ここでAJAX機能があります：

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>"; 
} 

がUPDATE：これが機能するようになりました

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

（それが正常に動作します） "コールバック" という名前の関数は次のようになります。あなたはこれを試して、あなたのonreadystatechangeに関数にelementパラメータを渡す必要があります

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

：私は私のgetContent関数に1行を追加しました;これは、他のものが上書きされたため、常に勝利した最後のリクエストにつながります。代わりに、各呼び出しに対して新しいajaxリクエストを作成する必要があります。

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

Answer 2

、あなたはあなたのAjaxリクエストのすべてに同じXmlHttpRequestを再利用している

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);