XMLHttpRequest onreadystatechange 从未为 readyState 0 触发

Question

我设置了通常的 XMLHttpRequest，到目前为止一切正常，我可以检索数据和 readyState 更改并执行各种操作。

但没有发生的一件事是，readyState 在达到 0 时会触发 onreadystatechange() 函数。

现在我想知道...为什么？

我查看了XMLHttpRequest MDN entry，但没有提到为什么当 readyState 达到 0 时不应触发 onreadystatechange。我也没有找到关于该主题的其他信息...

片段：

// Inside a class, this = class instance
this.socket = new XMLHttpRequest();

// For easy access of this class instance in onreadystatechange
var client = this;

// Write current readyState to console
this.socket.onreadystatechange = function ()
{
    // Adding this just to verify there are no errors in if block
    console.log("readyState: "+client.socket.readyState);

    if(client.socket.readyState === 0)
    {
        console.log("readyState is 0");
    }
    else
    {
        console.log("readyState is "+client.socket.readyState);
    }
}

当 XMLHttpRequest 套接字处理完请求后，XMLHttpRequest 实例将具有值 readyState===0，至少 Firefox 的 JS 控制台告诉我。

发出请求后，JS 控制台正确列出了 readyStates 1-4 的日志消息，但没有列出 readyState 0 的消息，不是在请求之前，也不是在请求之后。

理论上，当readyState从4变回0时，不应该触发onreadystatechange()函数吗？在 macOS 上使用当前 FF 和 Safari 以及在 Win 上使用 IE11 进行了检查，到处都是相同的行为，onreadystatechange() 永远不会为 readyState 0 触发。

XMLHttpRequest 是故意不这样做，还是我做错了什么？感谢任何有用的输入。 :)

（请不要“使用 jQuery”cmets 或类似的东西，谢谢。）

更新：

在成功或失败的请求完成后，readyState 永远保持在 4，并在 FF、IE、Safari 中验证。

但是，如果正在进行的请求被中止，readyState 将从 > 0 返回到 0。所以 readystatechange 确实发生了，但是 onreadystatechange 没有被触发，在 FF 和 Safari 中验证了这一点。

更新 3：

根据XMLHttpRequest spec，当XHR 处于readyState 3（接收）并中止时，XHR 应通过onreadystatechange 事件将readyState 设置为4（完成），发出网络错误，然后将readyState 设置为0（未发送） 没有 onreadystatechange 事件。

但是当我中止处于 readyState 3（接收）的 XHR 时，它会首先使用 onreadystatechange 事件和 HTTP 状态 200（OK）将 readyState 设置为 4（完成），然后它会触发 onabort 和 onloadend 并重置 readyState为 0（未发送）...但绝不会触发 onerror 事件。

非常混乱。

Answer 1

理论上，当readyState从4变回0时，不应该触发onreadystatechange()函数吗？

XHR 实例不可重用。 如果 Firefox 的 XHR 对象将状态从 4 带回 0 （它不适合我，见下文），这是 Firefox 特有的东西，但它没有用，并且它不会在其上触发无用的事件。

状态从DONE (4) 变为UNSENT (0) 是没有意义的。请求没有未发送。 完成。

请在评论中回复您的注释：

但是在中止之后，它返回到 0 --- 在它已经处于 readyState 3 并检索文件之后......

啊，好吧，那会有所不同——从 3 到 0，而不是从 4 到 0。如果我在 Chrome 和 Firefox 中都这样做，我也会看到。 p>

The spec for XHR's abort 说：

1. 当你说 (readyState 3) 中止时，readyState 应该不变回 0；相反，它应该更改为 4，将响应设置为网络错误，并触发 readystatechange 事件。

2. 如果在 readyState 为 4 时中止，它应该变回 0 - 但规范确实不说它应该触发 readystatechange 事件（而它确实说其他各种算法改变状态的次数）。

因此，在这种极端情况下，Chrome 和 Firefox 似乎都没有严格遵循规范。

Answer 2

0 是表示请求尚未发送的值。您无法取消发送请求，因此事件无法从 4 触发到 0。 这就像您发送了一封邮件，然后等待您发送它。那没有意义。您只能等待其他事情发生（例如，邮递员拿走了它，它到达了......）但显然，如果您等待已经发生的事情，您将等待很长时间。

值状态描述

0 UNSENT 客户端已创建。 open() 尚未调用。

1 OPENED open() 已被调用。

2 HEADERS_RECEIVED send() 已被调用，并且标头和状态为 可用。

3 LOADING 下载； responseText 保存部分数据。

4 DONE 操作完成。

更新

在寻找答案时，我发现了XMLHttpRequest 的这个实现。这表明 abort 函数没有调度任何事件。这可能就是您无法捕获该事件的原因，因为它根本没有被触发。

cXMLHttpRequest.prototype.abort = function() {
        // Add method sniffer
        if (cXMLHttpRequest.onabort) {
            cXMLHttpRequest.onabort.apply(this, arguments);
        }

        // BUGFIX: Gecko - unnecessary DONE when aborting
        if (this.readyState > cXMLHttpRequest.UNSENT) {
            this._aborted = true;
        }

        this._object.abort();

        // BUGFIX: IE - memory leak
        fCleanTransport(this);

        this.readyState = cXMLHttpRequest.UNSENT;

        delete this._data;

        /* if (this._async) {
        *   fQueue_remove(this);
        * }
        */
    };

Answer 3

默认性质

Readystate 0 属于未发送状态。这是创建 xhr 对象后的默认进入状态。此时 eventhandler 'onreadystatechange' 没有被调用，因为它被设计为只调用从 0 到某事的状态变化。

我收到了你的案子。现在我要回答你的问题 **为什么当状态从 4 变为 0 时不会触发“onreadystatechange”？

     var xhr = new XMLHttpRequest();
 //here xhr.readystate is 0
 xhr.onreadystatechange = () => {
     console.log('state', xhr.readyState)
     //**session one** 
     // console will print 1 when request opened
     // 2 when sent and response header received
     // 3 when body is receiving 
     // 4 when done
     //**session two**
     // prints 1 
     //note:readystate comes to 1 directly from 4 not 0.The state 0 is 
     //only available upto very first time you called open
 }

 //session one
 xhr.open('GET', '/api', true);
 xhr.send()

 //session two
 //here xhr.readystate is 4
 xhr.open('GET', '/api', true);
 //here xhr.readystate is 1 there is no 0 in middle.
 xhr.send();