检测 XMLHttpRequest 何时连接

Question

我正在尝试检测长时间运行的 XMLHttpRequest 何时实际连接到服务器。

现在，当我监听 readystatechange 事件时，它只会在请求完成时触发。我的测试服务器发送标头和一些数据，并在长时间超时（10 秒）后完成请求。 XHR 仅在最后触发事件，然后它为以下每个状态连续执行一个事件：HEADERS_RECEIVED、LOADING、DONE。

这是我的浏览器代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function(evt) {
    console.log('Request is now in state ' + xhr.readyState);

    if(xhr.readyState === xhr.HEADERS_RECEIVED) {
        console.log('Request has started');
    }
    if(xhr.readyState === xhr.DONE) {
        console.log('Request is finished');
    }
};
xhr.send(null);

如何检测实际收到标头的时间？我假设我无法根据 API 中的可用内容检测到请求何时开始。

到目前为止，我想出了以下几点：

• 将请求方法设置为 POST
• 在请求打开时发送一些数据，例如xhr.send('something')
• 监听xhr.upload.onload回调

像这样：

xhr.upload.onload = function(evt) {
    console.warn('Request has started');
};

这仅适用于 Firefox 和 Safari。不是 Chrome 或 IE。

Answer 1

XMLHttpRequest 对象有 5 个就绪状态

• 0 = 未初始化
• 1 = 正在加载
• 2 = 已加载
• 3 = 交互式
• 4 = 完成

您只是在代码中检查其中两个。此外，您应该使用else if 来提高效率。