XDomainRequest vs XMLHTTPRequest

Question

We are creating an application using PixiJS which has a dynamic json loader in it.

It loads the .json files using the following:

if(window.XDomainRequest)
{
    this.ajaxRequest = new window.XDomainRequest();
}
else if (window.XMLHttpRequest)
{
    this.ajaxRequest = new window.XMLHttpRequest();
}
else
{
    this.ajaxRequest = new window.ActiveXObject('Microsoft.XMLHTTP');
}

Which seems to work everywhere except on windows phone and IE. However, if I swap XMLHttpRequest with XDomainRequest it works fine.

So finally, can someone please explain the differences between XDomainRequest and XMLHTTPRequest? Which one should take precedence over the other?

Answer 1

XDomainRequest is the only way of having an XHR that supports CORS in IE8 and 9. At the time of IE8, Microsoft decided to come up with their own CORS XHR instead of the standard CORS XMLHttpRequest which is now used in IE10. Since IE10, XDomainRequest has been removed (editor: see comment).

You should only use XDomainRequest if you need CORS in IE8/9. XDomainRequest is not completely interchangeable with XMLHttpRequest, the interfaces aren't exactly the same. One is example is it doesn't support the onreadystatechange event. So if you want to switch between them like in the question, you will need to make sure you use onload not onreadystatechange and check any other functionality is interchangeable.

There's an example usage in this answer.