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. 当请求准备好并且正常（该if块）时，它将响应文本添加到 div。

因此，您可以看到您在 #1 中附加了事件回调，然后您关心的代码最终在 #4 稍后执行。

于 2012-10-11T21:53:41.583 回答
0

当您将一个函数分配给一个对象的.onreadystatechange属性时XHR，您就是在分配一个这样的回调函数。由于名称已经告诉我们，该函数将在稍后从另一个进程或应用程序的另一部分调用。

在这种情况下，它会在几个Ajax 事件上被调用。例如，如果要设置请求，是否接收到数据以及整个请求何时完成。这就是为什么你在那里检查readyStateequals4和status 200的原因。

所以代码的顺序在那里并不重要，函数不会立即执行，它只是被引用和稍后调用。

于 2012-10-11T21:52:34.283 回答
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();
}

如果你愿意，你可以看到你为 onreadystatechange 做的函数被调用，只需console.log(xmlhttp.readyState);在函数的第一行，if块上方放置一个语句。

于 2012-10-11T21:55:49.043 回答