0

3 つの 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 コンテンツが取得されます。(実際、アラートを追加すると、関数を呼び出すたびにコンテンツが適切に返されるように機能が「遅くなる」ように見えますが、Web ページでアラートが必要な人はいますか?)。

ただし、アラートがなければ、上記の呼び出しは最後の呼び出しのみを適切に処理します。したがって、上記の一連の呼び出しでは、id="rightTopRectangle" である最後の div のみが、AJAX 呼び出しから取得された html で埋められます。前の 2 つの呼び出しでは、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 関数に次の 1 行を追加しました。

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 に答える