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

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

---

내가 알 수 있듯이 xread return 이벤트에 대해 혼동하고 있습니다 .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되었지만 원래 사양 이후로 사용되었습니다.

---

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

따라서 onerror를 사용하고 최신 브라우저를 대상으로하는 경우 onreadystatechange를 사용하지 말고 대신 onload를 사용해야합니다 .HTTP 요청이 성공적으로 완료되었을 때만 호출됩니다 (실제 응답 및 상태 코드 포함). 그렇지 않으면 오류가 발생했을 때 두 개의 이벤트 핸들러가 트리거 될 수 있습니다 (이 특별한 경우에 대해 경험적으로 알게 된 방법입니다).

다음은 내가 작성한 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();
}

---

No, they are not the same. If you encounter a network error or abort the operation, onload will not be called. Actually, the closest event to readyState === 4 would be loadend. The flow looks like this:

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

참고URL : https://stackoverflow.com/questions/9181090/is-onload-equal-to-readystate-4-in-xmlhttprequest