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
は元の仕様から存在していました。
これは、almost常にtrueです。ただし、1つの重要な違いは、onerrorハンドラーが通常トリガーされる場合(通常はネットワーク接続の問題)、onreadystatechangeイベントハンドラーもreadyState == 4でトリガーされることです。この場合、ステータスは0になります。これが最新のChrome、Firefox、IEで発生することを確認しました。
したがって、onerrorを使用しており、最新のブラウザーをターゲットにしている場合は、onreadystatechangeを使用するのではなく、代わりにonloadを使用する必要があります。そうしないと、エラーの場合に2つのイベントハンドラーがトリガーされてしまう可能性があります(これが、この特殊なケースについて経験的にわかった方法です)。
ここに Plunkerテストプログラム へのリンクがあります。このリンクを使用して、さまざまなURLをテストし、さまざまな場合にJavaScriptアプリで表示されるイベントとreadyState値の実際のシーケンスを確認できます。 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