Can one replace xhr.onreadystatechange with xhr.onload for AJAX calls?

Question

I need to support major modern browsers only (IE10+, FF, Chrome, Safari)

Can I make this substitution as I want to simplify my code base:

From:

xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
        if (this.status === 200) {
            o.callback(xhr.responseText);
        } else {
            return false;
        }
    } else {
        return false;
    }
};

To:

xhr.onload = function (test) {
    o.callback(xhr.responseText);
};

I don't feel that the MDN documentation is clear in this regard.

Clarification:

I choose not to use a framework.

As they are they are functionally equivalent since you do nothing if the request fails. — Musa, Feb 18 '13 at 22:17
@elias94xx "Trying it out" is not feasible in this case. One would have to try it out on all versions of all major browsers, and there would still be no guaranteed support. Furthermore some browsers may not actually support the specifications they claim to support so looking it up may not be reasonable here either. — Waleed Khan, Feb 19 '13 at 03:10
possible duplicate of [Is onload equal to readyState==4 in XMLHttpRequest?](http://stackoverflow.com/questions/9181090/is-onload-equal-to-readystate-4-in-xmlhttprequest) — oHo, Nov 07 '13 at 12:57

score 19 · Accepted Answer · edited May 23 '17 at 12:34

19

maybe you take a look at this one and a look at W3C: XMLHttpRequest it's the same if your browser supports xhr.onload. Requires XMLHttpRequest 2)

You can also write a wrapping function that emulates xhr.onload if it's not present. (I think you need to override XMLHttpRequest.prototype.onload = function(args){//calling onreadystatechanges somehow}). If you only support modern browsers using xhr.onload should be available - the best solution is using a framework (like jquery or mootools that provides wrapping functionality for that.

edited May 23 '17 at 12:34

Community

1
1

answered Feb 18 '13 at 22:32

mr.VVoo

2,265
20
30

7

xhr2 is suported by IE10+ and of course the other 3. http://caniuse.com/#search=xhr2 – Feb 19 '13 at 20:48
3

Update: it's 2017 - Frameworks are optional now that ES6 exists >_ – ChristoKiwi Mar 26 '17 at 23:41
If the two are equivalent, then why does this MDN article nest the two: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests – Magnus Jun 08 '18 at 17:25

Gert Cuykens · Answer 2 · 2013-02-19T03:00:45.657

In the MDN documentation they state the following

Events

onreadystatechange as a property on the xhr object is supported in all browsers.

Since then, a number of additional event handlers were implemented in various browsers (onload, onerror, onprogress, etc.). These are supported in Firefox. In particular, see nsIXMLHttpRequestEventTarget and Using XMLHttpRequest.

More recent browsers, including Firefox, also support listening to the XMLHttpRequest events via standard addEventListener APIs in addition to setting on* properties to a handler function.

So I think you can assume that onreadystatechange is the way to go and onload is a addition that can be used if the browser supports it. @mr.VVoo answer is the correct one, to stick to w3c when in doubt.

score 4 · Answer 3 · answered Jul 20 '17 at 19:41

4

Since the original asker said "I need to support major modern browsers only (IE10+, FF, Chrome, Safari)" it is obvious that onload, onerror, etc are the ways to go. Also, as of today, onreadystatechange is pretty much obsolete, as you are obviously not going to support anything that old that it supports onreadystatechange only.

To sum it up, forget about onreadystatechange.

answered Jul 20 '17 at 19:41

Íhor Mé

896
9
13

1

In 2017, this is pretty accurate. Also see: https://stackoverflow.com/a/19247992/1367414 – Xunnamius Jun 11 '18 at 17:05

user126440 · Answer 4 · 2017-09-03T08:22:13.097

You can clean up your first example by doing this

xhr.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
        o.callback(xhr.responseText);
    } else {
        return false;
    }
};

Note, you probably want to check onload too with this.status === 200 if you are doing something with the else statement. Although, if you are checking for errors, there is also onerror, which you can write something like

xhr.onerror = function(){
    console.log('Error: Do something else...');
}

Can one replace xhr.onreadystatechange with xhr.onload for AJAX calls?

4 Answers4

Linked