Ist Onload in XMLHttpRequest gleich readyState == 4?

Ich bin verwirrt über das xhr-Rückgabeereignis, wie ich sehen kann, gibt es nicht so viele Unterschiede zwischen onreadystatechange -> readyState == 4 und onload, stimmt das?

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

xhr.send(null);

oder

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

Es sollte dasselbe sein. onloadwurde in XMLHttpRequest 2 hinzugefügt, während onreadystatechangees seit der ursprünglichen Spezifikation existiert.

Das ist fast immer wahr. Ein wesentlicher Unterschied besteht jedoch darin, dass der onreadystatechangeEreignishandler auch readyState==4in den Fällen ausgelöst wird, in denen der onerrorHandler normalerweise ausgelöst wird (normalerweise ein Problem mit der Netzwerkkonnektivität). In diesem Fall erhält es den Status 0. Ich habe überprüft, ob dies auf den neuesten Versionen von Chrome, Firefox und IE geschieht.

Wenn Sie also onerrormoderne Browser verwenden und darauf abzielen, sollten Sie diese nicht verwenden, onreadystatechangesondern onloadstattdessen verwenden. Dies scheint garantiert nur dann aufgerufen zu werden, wenn die HTTP-Anforderung erfolgreich abgeschlossen wurde (mit einer echten Antwort und einem Statuscode). Andernfalls werden im Fehlerfall möglicherweise zwei Ereignishandler ausgelöst (so habe ich empirisch von diesem Sonderfall erfahren).

Hier ist ein Link zu einem von mir geschriebenen Plunker-Testprogramm , mit dem Sie verschiedene URLs testen und die tatsächliche Abfolge von Ereignissen und readyStateWerten anzeigen können, die von der JavaScript-App in verschiedenen Fällen angezeigt werden. Der JS-Code ist auch unten aufgeführt:

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();
}

Nein, sie sind nicht gleich. Wenn Sie auf einen Netzwerkfehler stoßen oder den Vorgang abbrechen, onloadwird dieser nicht aufgerufen. Eigentlich ist das nächste Ereignis readyState === 4wäre loadend. Der Fluss sieht so aus:

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