onload เท่ากับ readyState == 4 ใน XMLHttpRequest หรือไม่

ฉันสับสนเกี่ยวกับเหตุการณ์ผลตอบแทน 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 */ }

มันควรจะเป็นเรื่องเดียวกัน onloadถูกเพิ่มใน XMLHttpRequest 2 ในขณะที่onreadystatechangeมีมาตั้งแต่สเป็คดั้งเดิม

นี่เป็นความจริงเกือบตลอดเวลา อย่างไรก็ตามความแตกต่างที่สำคัญอย่างหนึ่งคือonreadystatechangeตัวจัดการเหตุการณ์จะถูกทริกเกอร์ด้วยreadyState==4ในกรณีที่onerrorตัวจัดการมักจะถูกทริกเกอร์ (โดยทั่วไปจะเป็นปัญหาการเชื่อมต่อเครือข่าย) ได้รับสถานะเป็น 0 ในกรณีนี้ ฉันได้ตรวจสอบแล้วว่าสิ่งนี้เกิดขึ้นกับ Chrome, Firefox และ IE ล่าสุด

ดังนั้นหากคุณกำลังใช้onerrorและกำหนดเป้าหมายเบราว์เซอร์สมัยใหม่คุณไม่ควรใช้onreadystatechangeแต่ควรใช้onloadแทนซึ่งดูเหมือนว่าจะรับประกันได้ว่าจะถูกเรียกเมื่อคำขอ HTTP เสร็จสมบูรณ์เท่านั้น (ด้วยการตอบกลับจริงและรหัสสถานะ) มิฉะนั้นคุณอาจได้รับตัวจัดการเหตุการณ์สองตัวที่ทริกเกอร์ในกรณีที่เกิดข้อผิดพลาด (ซึ่งเป็นวิธีที่ฉันพบในเชิงประจักษ์เกี่ยวกับกรณีพิเศษนี้)

นี่คือลิงค์ไปยังโปรแกรมทดสอบ Plunker ที่ฉันเขียนไว้ซึ่งให้คุณทดสอบ URL ที่แตกต่างกันและดูลำดับเหตุการณ์และreadyStateค่าที่แท้จริงตามที่แอป JavaScript เห็นในกรณีต่างๆ โค้ด 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();
}

ไม่พวกเขาไม่เหมือนกัน หากคุณพบข้อผิดพลาดของเครือข่ายหรือยกเลิกการดำเนินการonloadจะไม่ถูกเรียก จริงๆแล้วเหตุการณ์ที่ใกล้เคียงที่สุดreadyState === 4ก็loadendคือ โฟลว์มีลักษณะดังนี้:

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