È onload uguale a readyState == 4 in XMLHttpRequest?

Question

Sono confuso circa l'evento di ritorno xhr, come posso dire, non ci sono molte differenze tra onreadystatechange -> readyState == 4 e onload, è vero?

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

xhr.send(null); 

o

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

Answer 1

dovrebbe essere la stessa cosa. onload è stato aggiunto in XMLHttpRequest 2 mentre onreadystatechange è stato in circolazione dalle specifiche originali.

Answer 2

Questo è quasi uguale a sempre vero. Una differenza significativa, tuttavia, è che il gestore eventi onreadystatechange viene attivato anche con readyState == 4 nei casi in cui viene generalmente attivato il gestore onerror (in genere un problema di connettività di rete). In questo caso ottiene lo stato 0. Ho verificato che ciò avvenga sugli ultimi Chrome, Firefox e IE.

Quindi, se si utilizza onerror e stanno prendendo di mira i browser moderni, non si dovrebbe usare onreadystatechange ma dovrebbe usare onload invece, che sembra essere garantito per essere chiamato solo quando la richiesta HTTP ha completato con successo (con una vera e propria risposta e lo stato codice). Altrimenti potresti finire con l'attivazione di due gestori di eventi in caso di errori.

Ecco un link a un Plunker test program che ho scritto che ti permette di testare URL diversi e vedere il sequenza effettiva di eventi e valori readyState come visti dall'app JavaScript in diversi casi. Il codice JS è inoltre elencata di seguito:

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

No, non sono la stessa cosa. Se si verifica un errore di rete o si interrompe l'operazione, onload non verrà chiamato. In realtà, l'evento più vicino a readyState === 4 sarebbe loadend. Il flusso è simile al seguente:

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