XDomainRequest aborts POST on IE 9

Question

I am doing a cross domain Ajax call.

My Code:

if (window.XDomainRequest) // Check whether the browser supports XDR.
{
    xdr = new XDomainRequest(); // Create a new XDR object.
    if (xdr) {
        xdr.timeout = 3000;//Set the timeout time to  3 second.
        xdr.onload = function () {
            alert("Success");
        };
        xdr.onerror = function () {
            alert("Error");
        };
        xdr.ontimeout = function () {
            alert("Error");
        };
        xdr.open("post", urlSearch);
        xdr.send();
    }
}
else {
    $.ajax({
        url: urlSearch,
        type: 'POST',
        dataType: 'json',
        timeout: 3000,
        success: function (data) {
            alert("Success");
        },
        error: function () {
            alert("Error");
        }
    });
}

The above code works fine in all browsers, but in IE sometimes it is showing an error like (aborted).

To overcome this error I searched in Google and did not find any good solution.

You can see the error message where (aborted) is showing. http://postimg.org/image/k01u6t9v5/

When I do individual call to a specific URL it is not showing any (aborted) message(Showing Success alert). But when I do multiple call (like in the image) its showing that type of error.

How to overcome this issue?

Please help

Thanks in advance

Answer 1

I'm not sure this is the same problem, but in my case all of these needed to be set: onerror; onprogress; ontimeout; and onload. Here are some references that discuss the problem:

• http://social.msdn.microsoft.com/Forums/ie/en-US/30ef3add-767c-4436-b8a9-f1ca19b4812e/ie9-rtm-xdomainrequest-issued-requests-may-abort-if-all-event-handlers-not-specified
• http://cypressnorth.com/programming/internet-explorer-aborting-ajax-requests-fixed/
• http://rudovsky.blogspot.com/2012/09/microsoft-shit-xdomainrequest.html
• https://github.com/faye/faye/pull/98

There are many others as well. They're scattered and sometimes contradictory in their suggested solution. For example, one suggests wrapping the xdr.send call in a setTimeout.

The behavior I was seeing went away by adding non-blank bodies for each of the event handler functions. I'm not sure if all are necessary. The setTimeout wrapper was definitely not necessary.

One possibly irrelevant piece of info: in my case I decided to bind each handler to the 'this' object. I also added function implementations to keep my compiler from assigning them all to the same empty function. My code was using GET, not POST. YMMV.

Your code leaves one handler unset:

if (window.XDomainRequest) // Check whether the browser supports XDR.
{
    xdr = new XDomainRequest(); // Create a new XDR object.
    if (xdr) {
        xdr.timeout = 3000;//Set the timeout time to  3 second.
        xdr.onload = function () {
            alert("Success");
        };
        xdr.onerror = function () {
            alert("Error");
        };
        xdr.ontimeout = function () {
            alert("Error");
        };
        // this also needs to be set
        xdr.onprogress = function() {
            window.console.log('progress');
        };
        xdr.open("post", urlSearch);
        xdr.send();
    }
}
else {
    $.ajax({
        url: urlSearch,
        type: 'POST',
        dataType: 'json',
        timeout: 3000,
        success: function (data) {
            alert("Success");
        },
        error: function () {
            alert("Error");
        }
    });
}