2

これで、最初のAjax関数を書き終えたところです。私はそれをすべてグーグルチュートリアルとw3schoolsから行いました、そしてそれはついに機能しています。唯一の問題は、何が起こっているのかという論理を完全に理解しておらず、説明を探していることです。

これが私の完全なコードです

function loadPlayer(id)
{
    var xmlhttp;

    if (window.XMLHttpRequest)
        xmlhttp=new XMLHttpRequest();
    else if(window.ActiveXObject)
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange=function() 
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            document.getElementById("newPlayer").innerHTML=xmlhttp.responseText;
    };

    xmlhttp.open("GET","http://localhost:8084/gmustudent/players?id=" + id,true);
    xmlhttp.send();
}

私の主な質問は、各ステートメントに関連するこのコードを書いた順序についてです。onreadystatechange関数内で応答テキストを取得し、それをnewPlayer divに配置しているため、混乱しています。ただし、実際にURLから非同期でデータを取得するのは、このステートメントの後でのみです。

まだ取得していない場合、応答テキストをdivに配置する方法がわからないため、混乱しています。私はそれがうまくいくのを見ます、私はただ理由を理解していません。ですから、ここで何が起こっているのかを簡単に説明していただければ幸いです。特に、私が自分のステートメントを書いている順序と、各ステートメントが実際に行っていることに関係しているためです。どうもありがとう！

4

3 に答える 3

1

これ：

xmlhttp.onreadystatechange=function() 
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            document.getElementById("newPlayer").innerHTML=xmlhttp.responseText;
    };

イベントハンドラは、イベントが発生したときに実行されることを意味します。この場合は、作成したリクエストの状態が変化したときです。コードの実際の流れは次のとおりです。

  1. 上記のコードでそのイベント ハンドラーをアタッチします。
  2. あなたは実際の要求を行います
  3. そのイベントonreadystatechangeは、リクエストが処理されている間 (状態が変化するにつれて) 繰り返し発生します。
  4. リクエストの準備ができて OK (そのifブロック) になると、レスポンス テキストが div に追加されます。

このように、#1 でイベント コールバックをアタッチし、#4 で目的のコードが最終的に実行されることがわかります。

于 2012-10-11T21:53:41.583 に答える
0

さまざまな部分で何が起こっているかについて、コードにいくつかのコメントを追加しました。

function loadPlayer(id)
{
    var xmlhttp;

    // This if/else block is trying to get the best request object for you, based on browser(ish).
    if (window.XMLHttpRequest)
        xmlhttp=new XMLHttpRequest();
    else if(window.ActiveXObject)
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    // This is declaring a function to run when the state changes on the ajax request.  Note that just because you're creating the function here, does not mean it is running yet.  It will only run when the ajax request triggers it.
    xmlhttp.onreadystatechange=function() 
    {
        // This is checking to see if it is finished. If it isn't finished, you don't have responseText to use.
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            // Now that the request is actually back, we can take the text from the response and use it.
            document.getElementById("newPlayer").innerHTML=xmlhttp.responseText;
    };

    xmlhttp.open("GET","http://localhost:8084/gmustudent/players?id=" + id,true);
    // Okay, now we're running the request.
    xmlhttp.send();
}

必要に応じて、ブロックconsole.log(xmlhttp.readyState);の上にある関数の最初の行にステートメントを配置するだけで、onreadystatechange 用に作成した関数が呼び出されるのを見ることができます。if

于 2012-10-11T21:55:49.043 に答える
0

オブジェクトのプロパティに関数を割り当てるときは、そのようなコールバック関数を割り当てています。名前がすでに示しているので、その関数は後で、別のプロセスまたはアプリケーションの別の部分から呼び出されます。.onreadystatechangeXHR

この場合、複数のAjax イベントで呼び出されます。たとえば、リクエストがセットアップされる場合、データが受信された場合、およびリクエスト全体が終了した場合。そのため、readyState等しいかどうか4、ステータスが 200 かどうかを確認します。

したがって、コードの順序は重要ではありません。関数はすぐには実行されず、後で参照されて呼び出されるだけです。

于 2012-10-11T21:52:34.283 に答える