☰

XMLHttpRequest の onload は readyState==4 と同じですか? 質問する

tag-icon • tag-icon javascript ajax xmlhttprequest
XMLHttpRequest の onload は readyState==4 と同じですか? 質問する

私はxhrリターンイベントについて混乱しています。私が知る限り、それほど大きな違いはありません。onreadystatechange --> readyState == 4そして、オンロード、それは本当ですか?

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 */ }

ベストアンサー1

これはほとんど常に true です。ただし、重要な違いの 1 つは、イベント ハンドラーが通常トリガーされるケース (通常はネットワーク接続の問題) でもonreadystatechangeトリガーされることです。この場合、ステータスは 0 になります。最新の Chrome、Firefox、IE でこれが発生することを確認しました。readyState==4onerror

onerrorしたがって、最新のブラウザを使用していて、それをターゲットにしている場合は、ではonreadystatechangeなく を使用する必要がonloadあります。これは、HTTP 要求が正常に完了した場合にのみ呼び出されることが保証されているようです (実際の応答とステータス コードを使用)。そうしないと、エラーが発生した場合に 2 つのイベント ハンドラがトリガーされる可能性があります (これが、この特殊なケースについて私が経験的に発見した方法です)。

ここにリンクがありますプランカーテストプログラムreadyStateさまざまな URL をテストし、さまざまなケースで 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();
}

おすすめ記事