in AJAX (XMLHttpRequest) is it better to use eventListener or readyStateChange?

Question

I was re-watching a video from WWDC12 on advanced effects with HTML5 and noticed that for the demo they used req.addEventListener("load",callback,true) rather than the usual onreadystatechange .

What are the differences between the load event and state=4 status=200 situation?
Is it the same load event being fired or two different ones?

Answer 1

The load event only indicates that the request was a network success, not necessarily an HTTP success. An Ajax request with always either fire a load event or an error event, indicating the success or failure of the network transaction (as part of the Progress Events specification):

• The error event fires when the network fetch fails due to the server being down or on an inaccessible domain (ie, the request is blocked by the same-origin policy).

• Otherwise, load fires, regardless of the HTTP code returned.

The load or error event always fires last, after the last readstatechange event has fired, so you can be sure that the load or error callback is running with xhr.readyState == 4 and xhr.status set to the correct HTTP response code.