Is onload equal to readyState==4 in XMLHttpRequest?

Question

I am confuse about the xhr return event, as I can tell, there are not so much different between onreadystatechange --> readyState == 4 and onload, is it true?

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

xhr.send(null);

or

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

If anyone is looking at this as an example note that it's using async=false (3rd argument of xhr.open) - which is not normally what you'd want. — eddiewould, Oct 05 '16 at 21:30

score 160 · Answer 1 · edited Jan 29 '20 at 01:28

This is almost always true. One significant difference, however, is that the onreadystatechange event handler also gets triggered with readyState==4 in the cases where the onerror handler is usually triggered (typically a network connectivity issue). It gets a status of 0 in this case. I've verified this happens on the latest Chrome, Firefox and IE.

So if you are using onerror and are targeting modern browsers, you should not use onreadystatechange but should use onload instead, which seems to be guaranteed to only be called when the HTTP request has successfully completed (with a real response and status code). Otherwise you may end up getting two event handlers triggered in case of errors (which is how I empirically found out about this special case.)

Here is a link to a Plunker test program I wrote that lets you test different URLs and see the actual sequence of events and readyState values as seen by the JavaScript app in different cases. The JS code is also listed below:

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();
}

@Fernando To clarify, inside `onload`, `readyState === 4` is guaranteed to be true right? — kgf3JfUtW, May 01 '17 at 15:30
@sam Yes, that seems to always be the case, though the opposite is clearly not true, as `readyState` can be 4 on `error` or `abort` cases too. This state basically means the load process has finished, whether successfully or not. For a normal, successful load, the final sequence of events is: `progress` (with all data loaded), `readystatechange` (with `readyState == 4`), `load`, `loadend`. — Fernando Echeverria, May 02 '17 at 14:48
Keep in mind that `onload` also won't trigger if `No 'Access-Control-Allow-Origin' header is present on the requested resource.` — deathangel908, Jul 29 '17 at 21:53
That's true. That is one of the cases that triggers the `onerror` handler. — Fernando Echeverria, Jul 30 '17 at 03:41
@FernandoEcheverria, I seriously doubt this answer is correct in its claim. Is there a test script? — Pacerier, Aug 06 '17 at 04:09
@Pacerier : Yes, please see here: [plnkr test](http://plnkr.co/edit/ycQbBr0vr7ceUP2p6PHy) — Fernando Echeverria, Aug 07 '17 at 18:34
I know this is a very old question, but just for the sake of reference I will add this documentation of the XMLHttpRequest events: https://xhr.spec.whatwg.org/#events where it points out that it's triggered only when "the fetch succeded" — Williams A., Jan 21 '20 at 11:56

J. K. · Accepted Answer · 2012-02-07T18:44:57.377

74

It should be the same thing. onload was added in XMLHttpRequest 2 whereas onreadystatechange has been around since the original spec.

edited Feb 07 '12 at 18:44

answered Feb 07 '12 at 18:11

J. K.

8,015
1
31
33

1

Seems, that mobile Safari does not come back when using onload. onreadystatechange works, though. – Kai Hartmann Jan 21 '14 at 14:24
1

There is no real clear separation between XHR 1 and XHR 2 anymore, they have merged into one standard. The most common feature that represents XHR 2 is CORS support so from that standpoint XHR 2 didn't appear in IE until IE 10 but XHR.onload was supported in IE 9 which is typically believed to be XHR 1. – Chase Nov 05 '14 at 06:39

score 13 · Answer 3 · answered Oct 15 '17 at 01:19

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

score 1 · Answer 4 · answered Dec 15 '20 at 15:16

in simple code here how they are handle the error

xhr.onload = function() {
  // same or allowed cross origin
  if (this.status == 200) {

  }
  else {} // error http status not 200
};
xhr.onerror = function() {
  //error: cross origin, bad connection
};

VS

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (this.status == 200) {

    }
    else {} // error: cross origin, http status not 200, bad connection
  }
};

Is onload equal to readyState==4 in XMLHttpRequest?

4 Answers4

Linked