[javascript] onload가 XMLHttpRequest에서 readyState == 4와 같습니까?

Program / 글쓴이

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

답변

동일해야합니다. onloadXMLHttpRequest 2에 추가 onreadystatechange되었지만 원래 사양 이후에있었습니다.

답변

이것은 거의 항상 사실입니다. 그러나 한 가지 중요한 차이점 은 핸들러가 일반적으로 트리거되는 경우 (일반적으로 네트워크 연결 문제) onreadystatechange에서도 이벤트 핸들러가 트리거 된다는 것 입니다. 이 경우 상태가 0이됩니다. 최신 Chrome, Firefox 및 IE에서이 문제가 발생하는지 확인했습니다.readyState==4onerror

따라서 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

답변