XMLHttpRequest 中的 onload 是否等于 readyState==4？答案

【问题标题】：Is onload equal to readyState==4 in XMLHttpRequest?XMLHttpRequest 中的 onload 是否等于 readyState==4？
【发布时间】：2012-02-29 03:59:27
【问题描述】：

我对 xhr 返回事件感到困惑，据我所知，onreadystatechange --> readyState == 4 和 onload 并没有太大区别，是真的吗？

var xhr = new XMLHttpRequest();
xhr.open("Get", url, false);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4)
    {
        /* do some thing*/
    }
};

xhr.send(null);

或

xhr.onload = function() { /* do something */ }

【问题讨论】：

如果有人将此作为示例，请注意它使用的是 async=false（xhr.open 的第三个参数）——这通常不是您想要的。

标签： javascript ajax xmlhttprequest

【解决方案1】：

这几乎总是正确的。然而，一个显着的区别是，在onerror 处理程序通常被触发的情况下（通常是网络连接问题），onreadystatechange 事件处理程序也会被readyState==4 触发。在这种情况下，它的状态为 0。我已经在最新的 Chrome、Firefox 和 IE 上验证了这种情况。

因此，如果您使用onerror 并针对现代浏览器，则不应使用onreadystatechange，而应使用onload，这似乎保证仅在HTTP请求成功完成时才被调用（使用一个真实的响应和状态码）。否则，您最终可能会在发生错误时触发两个事件处理程序（这就是我凭经验发现这种特殊情况的方式。）

这里是我编写的Plunker test program 的链接，可让您测试不同的 URL 并查看 JavaScript 应用程序在不同情况下看到的实际事件序列和 readyState 值。 JS代码也列在下面：

var xhr;
function test(url) {
    xhr = new XMLHttpRequest();
    xhr.addEventListener("readystatechange", function() { log(xhr, "readystatechange") });
    xhr.addEventListener("loadstart", function(ev) { log(xhr, "loadstart", ev.loaded + " of " + ev.total) });
    xhr.addEventListener("progress", function(ev) { log(xhr, "progress", ev.loaded + " of " + ev.total) });
    xhr.addEventListener("abort", function() { log(xhr, "abort") });
    xhr.addEventListener("error", function() { log(xhr, "error") });
    xhr.addEventListener("load", function() { log(xhr, "load") });
    xhr.addEventListener("timeout", function(ev) { log(xhr, "timeout", ev.loaded + " of " + ev.total) });
    xhr.addEventListener("loadend", function(ev) { log(xhr, "loadend", ev.loaded + " of " + ev.total) });
    xhr.open("GET", url);
    xhr.send();
}

function clearLog() {
    document.getElementById('log').innerHTML = '';
}

function logText(msg) {
    document.getElementById('log').innerHTML += msg + "<br/>";
}

function log(xhr, evType, info) {
    var evInfo = evType;
    if (info)
        evInfo += " - " + info ;
    evInfo += " - readyState: " + xhr.readyState + ", status: " + xhr.status;
    logText(evInfo);
}

function selected(radio) {
    document.getElementById('url').value = radio.value;
}

function testUrl() {
    clearLog();
    var url = document.getElementById('url').value;
    if (!url)
        logText("Please select or type a URL");
    else {
        logText("++ Testing URL: " + url);
        test(url);
    }
}

function abort() {
    xhr.abort();
}

【讨论】：

@Fernando 澄清一下，onload 内部，readyState === 4 保证是真的对吧？
@sam 是的，情况似乎总是如此，尽管相反的情况显然不正确，因为readyState 在error 或abort 的情况下也可以是4。这种状态基本上意味着加载过程已经完成，无论成功与否。对于正常、成功的加载，最终的事件序列是：progress（加载所有数据）、readystatechange（带有readyState == 4）、load、loadend。
请记住，onload 也不会触发 No 'Access-Control-Allow-Origin' header is present on the requested resource.
确实如此。这是触发onerror 处理程序的情况之一。
@Pacerier ：是的，请看这里：plnkr test

【解决方案2】：

应该是一样的。 onload 是在 XMLHttpRequest 2 中添加的，而 onreadystatechange 从最初的规范就已经存在了。

【讨论】：

看来，移动版 Safari 在使用 onload 时不会回来。不过，onreadystatechange 有效。
XHR 1 和 XHR 2 之间不再有真正明确的区别，它们已合并为一个标准。代表 XHR 2 的最常见功能是 CORS 支持，因此从这个角度来看，XHR 2 直到 IE 10 才出现在 IE 中，但 XHR.onload 在 IE 9 中得到支持，通常被认为是 XHR 1。

【解决方案3】：

不，它们不一样。如果遇到网络错误或中止操作，onload 将不会被调用。实际上，最接近readyState === 4 的事件是loadend。流程如下所示：

     onreadystatechange
      readyState === 4
             ⇓
 onload / onerror / onabort
             ⇓
         onloadend

【讨论】：

【解决方案4】：

在这里他们是如何处理错误的简单代码

xhr.onload = function() {
  // same or allowed cross origin
  if (this.status == 200) {

  }
  else {} // error http status not 200
};
xhr.onerror = function() {
  //error: cross origin, bad connection
};

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (this.status == 200) {

    }
    else {} // error: cross origin, http status not 200, bad connection
  }
};

【讨论】：