javascript - 需要帮助了解 Ajax 功能

Question

所以我刚刚完成了我的第一个 Ajax 函数的编写。我通过 google tutorial 和 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(如果您还没有得到它的话)。我看到它有效，我只是不明白为什么。因此，如果有人能用简单的术语解释这里发生的事情，我将不胜感激。特别是因为它与我编写语句的顺序以及每个语句的实际作用有关。非常感谢!

Answer 1

这个:

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

是一个事件处理程序，这意味着它会在事件触发时执行。在这种情况下，它是您提出的请求的状态发生变化的时候。代码的实际流程是:

1. 您在上面的代码中附加该事件处理程序
2. 您提出实际要求
3. 该事件 onreadystatechange 在处理请求时被重复触发(随着状态改变)
4. 当请求准备就绪且正常时(即 if block )，它会将响应文本添加到 div。

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