1

単純なAJAXリクエストを作成し、次のコードを使用してJSコンソールにレスポンスを記録しています。それは完全に正常に機能しますが、私を悩ませているのは、サーバーから3つの応答が返されることです（添付の画像を参照）。

これがなぜであるかについて誰かが何か光を当てることができますか？

var xmlHttp = newXMLHttpObj();

function newXMLHttpObj(){
    var xml;
    if(window.XMLHttpRequest){
        xml = new XMLHttpRequest();     
    } else{
        xml = new ActiveXObject("Microsoft.XMLHTTP");
    }

    return xml;
}

function ajaxHandler(){
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
        //handle response
        var response = xmlHttp.responseXML.documentElement;
        console.log(response);
        var name = response.getElementsByTagName("name")[0].firstChild.data;
        var age = response.getElementsByTagName("age")[0].firstChild.data;
        ajaxContent.innerHTML = "Name: " + name + "<br />Age: " + age;
    } else{
        setTimeout(ajaxHandler, 1000);
    }
}

function ajaxProcess(){
    var ajaxContent = document.getElementById("ajaxContent");
    ajaxContent.innerHTML = "loading";
    //check server is ready to comunicate
    if (xmlHttp.readyState == 0 || xmlHttp.readyState == 4){
        xmlHttp.open("POST", "/js/test.php", true);
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlHttp.onreadystatechange = ajaxHandler;
        xmlHttp.send("name=the chuff&age=26");
    } else{
        setTimeout(ajaxProcess, 1000); //restart ajaxProcess until ready to comunicate
    }
}

コンソールのスクリーンショット

4

1 に答える 1

3

これは、フローが次のようになっているために発生します。

  1. リクエストオブジェクトが初期化されておらず、xmlHttp.readyState == 0
  2. ajaxHandlerハンドラーとして状態変更の準備ができているようにバインドされています（状態がどうなるかは重要ではありません）
  3. リクエストが初期化されて送信されます
  4. サーバー接続が確立され、xmlHttp.readyState == 1
  5. 準備完了状態が変更され、ajaxHandler呼び出されます
  6. xmlHttp.readyState != 4新しいajaxHandler通話は1秒後に予定されているため
  7. 受信したリクエストとxmlHttp.readyState == 2
  8. 準備完了状態が変更され、ajaxHandler呼び出されます
  9. xmlHttp.readyState != 4新しいajaxHandler通話は1秒後に予定されているため
  10. リクエストが処理され、xmlHttp.readyState == 3
  11. 準備完了状態が変更され、ajaxHandler呼び出されます
  12. xmlHttp.readyState != 4新しいajaxHandler通話は1秒後に予定されているため
  13. リクエストが終了し、応答の準備ができました。xmlHttp.readyState == 4
  14. 応答は初めてコンソールに書き込まれます
  15. 1が渡され、スケジュールされたajaxHandler呼び出しがさらに3回呼び出されます。応答はコンソールにさらに3回書き込まれます。

したがって、通常、応答はコンソールに4回ログに記録されますが、すべてのブラウザーがすべての準備完了状態を通過するわけではありません（たとえば、個別の準備完了状態3がなく、ブラウザーが2から4に直接切り替わる場合があります）。そのため、応答を3回ログに記録します。 。

修正したい場合は、スケジュールを変更しないでくださいajaxHandler。

function ajaxHandler(){
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
        //handle response
        flag = true;
        var response = xmlHttp.responseXML.documentElement;
        console.log(response);
        var name = response.getElementsByTagName("name")[0].firstChild.data;
        var age = response.getElementsByTagName("age")[0].firstChild.data;
        ajaxContent.innerHTML = "Name: " + name + "<br />Age: " + age;
    }
}

最後に、このすべてのスタッフを処理するjQueryのようなライブラリを使用する方がはるかに簡単で便利です。http://api.jquery.com/jQuery.ajax/

于 2013-03-19T12:25:32.547 に答える