Question

所以我刚刚写完了我的第一个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中，如果你还没有得到它。我看到它有效，我只是不明白为什么。因此，如果有人能用简单的术语解释这里发生了什么，我真的很感激。特别是因为它与我正在编写我的陈述的顺序以及每个陈述实际上正在做的事情有关。非常感谢你！

Answer 1

这样：

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

是一个事件处理程序，这意味着它会在触发事件时执行。在这种情况下，当您发出请求的状态更改时。通过代码的实际流程是：

您在上面的代码中附加了该事件处理程序
您提出实际请求
在处理请求时（状态发生变化），事件onreadystatechange会被重复触发
当请求准备好并且正常（if阻止）时，它会将响应文本添加到div。

所以，你可以看到你在＃1中附加了事件回调，然后你关心的代码最终会在＃4后执行。

Answer 2

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

在这种情况下，它会被调用几个 Ajax事件。例如，如果要设置请求，则接收数据以及整个请求何时完成。这就是为什么你检查readyState是否等于4和状态200。

因此，代码的顺序并不重要，函数不会立即执行，只是被引用并稍后调用。

Answer 3

我在您的代码中添加了一些关于各个部分发生了什么的评论。

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);块上方的函数的第一行放置if语句来查看为onreadystatechange调用的函数。

需要帮助了解Ajax功能

3 个答案: