XMLHttpRequest'teki onload readyState == 4'e eşit mi?

Xhr dönüş olayıyla ilgili kafam karıştı, anlayabildiğim gibi onreadystatechange -> readyState == 4 ile onload arasında çok fazla fark yok , bu doğru mu?

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

xhr.send(null);

veya

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

Aynı şey olmalı. onloadXMLHttpRequest 2'ye eklendi, oysa onreadystatechangeorijinal spesifikasyondan beri var.

Bu neredeyse her zaman doğrudur. Bununla birlikte, önemli bir fark, işleyicinin genellikle tetiklendiği durumlarda (tipik olarak bir ağ bağlantısı sorunu) onreadystatechangeolay işleyicisinin de tetiklenmesidir . Bu durumda 0 statüsü alır. Bunun en son Chrome, Firefox ve IE'de olduğunu doğruladım.readyState==4onerror

Bu nedenle onerror, modern tarayıcıları kullanıyorsanız ve hedefliyorsanız, onreadystatechangekullanmamalısınız, onloadbunun yerine kullanmalısınız ; bu, yalnızca HTTP isteği başarıyla tamamlandığında (gerçek bir yanıt ve durum kodu ile) çağrılacağı garanti edilir. Aksi takdirde, hata durumunda tetiklenen iki olay işleyicisine sahip olabilirsiniz (bu, bu özel durumu deneysel olarak bu şekilde öğrendim.)

İşte yazdığım bir Plunker test programına , farklı URL'leri test etmenize readyStateve JavaScript uygulaması tarafından farklı durumlarda görülen gerçek olay ve değer sırasını görmenize olanak tanıyan bir bağlantı . JS kodu da aşağıda listelenmiştir:

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

Hayır, onlar aynı değil. Bir ağ hatasıyla karşılaşırsanız veya işlemi iptal ederseniz, onloadçağrılmayacaktır. Aslında en yakın olay readyState === 4olurdu loadend. Akış şuna benzer:

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