javascript - 检测 XMLHttpRequest 何时连接

Question

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

现在，当我监听readystatechange事件时，它仅在请求完成时触发。我的测试服务器发送 header 和一些数据，并在长时间超时(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);

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

到目前为止，我已经得出以下结论:

• 将请求方法设置为 POST
• 打开请求时发送一​​些数据，例如xhr.send('某事')
• 监听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。