Tải trọng bằng readyState == 4 trong XMLHttpRequest?

Question

Tôi nhầm lẫn về sự kiện trả lại xhr, như tôi có thể nói, không có quá nhiều sự khác biệt giữa onreadystatechange -> readyState == 4 và onload, có đúng không?

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

xhr.send(null); 

hoặc

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

Answer 1

Nó sẽ được điều tương tự. onload đã được thêm vào trong XMLHttpRequest 2 trong khi onreadystatechange đã xuất hiện từ thông số gốc.

Answer 2

Đây là gần như luôn đúng. Tuy nhiên, một sự khác biệt đáng kể là trình xử lý sự kiện onreadystatechange cũng được kích hoạt với readyState == 4 trong các trường hợp xử lý onerror thường được kích hoạt (thường là vấn đề kết nối mạng). Nó có trạng thái là 0 trong trường hợp này. Tôi đã xác minh điều này xảy ra trên Chrome, Firefox và IE mới nhất. Vì vậy, nếu bạn đang sử dụng onerror và đang nhắm mục tiêu trình duyệt hiện đại, bạn không nên sử dụng onreadystatechange nhưng nên sử dụng onload thay vào đó, có vẻ như được đảm bảo chỉ được gọi khi yêu cầu HTTP hoàn tất thành công (với phản hồi và trạng thái thực mã). Nếu không, bạn có thể sẽ nhận được hai trình xử lý sự kiện được kích hoạt trong trường hợp xảy ra lỗi (đó là cách mà tôi đã phát hiện ra về trường hợp đặc biệt này.)

Đây là một liên kết đến một số Plunker test program Tôi đã cho phép bạn kiểm tra các URL khác nhau và xem chuỗi sự kiện thực tế và các giá trị readyState được ứng dụng JavaScript nhìn thấy trong các trường hợp khác nhau. Mã JS cũng được liệt kê dưới đây:

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 3

Không, họ không giống nhau. Nếu bạn gặp lỗi mạng hoặc hủy bỏ hoạt động, onload sẽ không được gọi. Trên thực tế, sự kiện gần nhất với readyState === 4 sẽ là loadend. Dòng chảy trông như thế này:

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