初学者 AJAX 课程 - 为什么我必须将 request.readyState 包装在一个函数中？答案

【问题标题】：Beginner AJAX lessons - why do I have to wrap request.readyState in a function?初学者 AJAX 课程 - 为什么我必须将 request.readyState 包装在一个函数中？
【发布时间】：2013-10-07 02:07:59
【问题描述】：

这是我的 Lynda.com ajax 课程中的一些代码。

var request = new XMLHttpRequest();

request.open('GET', 'data.txt');
request.onreadystatechange = function()
{
    if (request.readyState===4)
    {
        console.log(request);
        document.writeln(request.responseText);
    }
}
request.send();

在上一课中，我们检查了 request.status 的值，它没有包装在函数中，并且运行良好。但是现在，没有任何解释，request.readyState 检查必须包含在您在上面看到的函数中，否则它将不起作用。这是怎么回事？

【问题讨论】：

其实不需要解释。 request.onreadystatechange 是对象（请求）的属性，它被分配为包含条件的函数。简而言之，它定义了一个评估就绪状态变化的侦听器。你读过关于 XMLHttpRequest 的文档吗？ developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
该函数称为“处理程序”。只要触发了 onreadystatechange 事件，它就会执行。
@MatthewBlancarte 属性值引用的Function 实例的正确术语是事件监听器。事件handler是调用事件监听器的内部代码；有时该术语用作事件处理程序属性的同义词。
@PointedEars 啊，确实，你是对的。好电话。

标签： javascript ajax

【解决方案1】：

您分配给onreadystatechange 的函数是一个事件处理程序。您在调用 send() 之前分配它，这样您就不会错过请求引发的事件。如果您没有在事件处理程序中检查request.readyState，您如何知道请求状态何时实际更改？ send() 方法默认是非阻塞的。

另一种方法是检查readyState，方法是按绝对不希望的任意间隔轮询。

就像上面评论者建议的那样，MDN 文档非常好。

【讨论】：

send() 方法调用在大多数情况下（如果不是所有情况）都是阻塞的，因为 ECMAScript 实现的单线程性。您将此与 request 默认处理为 asynchronous （“非阻塞”）这一事实混淆，这就是 send() 方法调用随后快速返回的原因。
是的，说操作是异步的更正确。这允许发送调用返回而不会阻塞 UI。

【解决方案2】：

它会起作用，只是过早地。当我了解这一点时，我发现提醒readyState 的值很有帮助，这样我就可以看到正在发生的事情：

request.onreadystatechange = function()
{
    alert(request.readyState);
    ...

这是一个州列表，由What do the different readystates in XMLHttpRequest mean, and how can I use them?提供

State  Description 0      
The request is not initialized 1     
The request has been set up 2   
The request has been sent 3    
The request is in process 4   
The request is complete

【讨论】：

谢谢先生们 - 将尝试所有这些 - 在课程中我没有告诉过这是一个事件处理程序，并且 2 天的 codeschool 和 codeacademy 也从来没有像这样破坏它！
是的，但您可能会看到，某些事物的命名约定可能表明这是什么类型的对象属性。 onreadystatechange 建议监听器，它的示例用法几乎可以验证这一点，无论它是否明确说明。很高兴我们能提供帮助。