-1

Ajaxのコールフローに少し混乱しています。誰か助けてくれませんか？

私のHTML：

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">Change Content</button>

私のJavaScript：

var xmlhttp;

function loadXMLDoc(url, cfunc) {
    alert("4");
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    alert("5");
    xmlhttp.onreadystatechange = cfunc;
    alert("6");
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

function myFunction() {
    alert("1");
    loadXMLDoc("ajax_info.txt", function() {
        alert("2");
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert("3");
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }
    });
}​

</ p>

私によると、アラートボックスのシーケンスは

1 2 3 4 5 6

しかし、それは

1456222223

関数が1番目と呼ばれる理由を教えてください。パラメータ値の準備ができるまで、関数を呼び出すことができないという印象を受けました。

4

2 に答える 2

2

loadXMLDoc(...)通常の関数呼び出しです。
すぐに実行されます。

渡したコールバック ( を含むalert("2")) は、何かがそれを呼び出したときにのみ実行されます。つまり、XMLHTTPRequest が onreadystatechanged を発生させたときです。

onreadystatechanged は、readyStateプロパティで確認できるように、さまざまな状態の変化に対して複数回発生します。

于 2012-04-23T15:25:34.790 に答える
1

なぜなら、最初のアラートを発生させた後、すぐに を呼び出してloadXMLDoc、匿名関数 (アラート「2」と「3」を含む) を渡すためです。この関数を実行していないことに注意してください。参照を渡すだけなので、loadXMLDoc後で実行できます。

これで、「1 4 5 6」が最初に表示される理由が説明できます。

xmlhttp.onreadystatechange = cfunc;handlerloadXMLDocとして渡した無名関数を設定します。AJAX リクエスト中に複数回実行されます。ブラウザーがリクエストの状態が変化したと判断するたびに ( AJAX リクエストの値は、これが発生するたびに必ずしも変化しないことに注意してください)。onreadystatechangeonreadystatechangereadyState

これは、「2」が複数回出力される理由を説明しています。

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    alert("3");
    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}

onreadystatechangeハンドラー内で、が 200でreadyStateあるかどうかをチェックしています。4 の場合はリクエストが終了したことを意味し、 HTTP 応答コードをチェックするかどうかのチェックです。4statusreadyStatestatus == 200

これが、「3」が最後に表示される理由です。リクエストが完了したときにのみ実行されるためです（ifステートメントの条件のため）。

詳細については、AJAX 要求の作成に関するMDC の記事を参照してください。

于 2012-04-23T15:29:00.463 に答える