Question

我对xhr返回事件感到困惑，正如我所知， onreadystatechange - ＆gt;之间并没有太大的不同。 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 */ }

Answer 1

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

因此，如果你正在使用onerror并且正在瞄准现代浏览器，你不应该使用onreadystatechange，而应该使用onload，这似乎只能在HTTP请求成功完成时被调用（具有真实的响应和状态代码））。否则，如果出现错误，您最终可能会触发两个事件处理程序（这是我根据经验发现的特殊情况。）

以下是我编写的Plunker test program链接，可让您测试不同的网址，并查看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();
}

Answer 2

它应该是一回事。 XMLHttpRequest 2中添加了onload，而自原始规范以来onreadystatechange已经存在。

Answer 3

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

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

Answer 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
};

VS

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

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

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

4 个答案: