Internet Explorer Aborting AJAX Requests Is Now FIXED

Code Sport 16 Sep , 2013  

Buffer

ajax-and-internet-explorerHi all, W always face some issues with IE, being a developer their are compatibilities you must follow, I came across a strange issue where the requests were being aborted by IE before the response was finished being delivered. Using Fiddler and Firebug, I was able to see that the request was being made properly, and even the response was coming back properly, but at some point, IE would simply stop accepting the data if it was not a very short response.

You would be surprise that the problem was even more perplexing because it did not happen every time and it did not happen the same in all versions of IE, in fact IE 9 had more difficulty than IE 7.

You might be familiar with the typical way of making an AJAX request using XDR for Internet Explorer. It would generally look like the following:

//USING JQUERY
if ($.browser.msie && window.XDomainRequest) {
    // Use Microsoft XDR
    var xdr = new XDomainRequest();
    xdr.open("get", "someurl");
    xdr.onload = function () {
    var JSON = $.parseJSON(xdr.responseText);
    if (JSON == null || typeof (JSON) == 'undefined')
    {
        JSON = $.parseJSON(data.firstChild.textContent);
    }
    processData(JSON);
    };
    xdr.send();
}

Check the process of this, it goes like this:

  1. Create the XDomainRequest object
  2. Define the request type (GET,POST) and the request path (URL) in .open()
  3. Define an event handler to capture the response in .onload()
  4. Send the request using .send()

Depending on what you are returning, this is usually all you need.If you run into the problem that we were having, you need to do a little more to fix it.

The Solution

So the problem has to do with IE timing out the request even though data is being transmitted. By defining some additional event handlers and specifying a timeout value of 0, IE will not abort the request prematurely. Your mileage may vary but for us the solution was to define the following handlers as empty:

xdr.onprogress = function () { };
xdr.ontimeout = function () { };
xdr.onerror = function () { };

Then wrap the send() function in a timeout declaration:

setTimeout(function () {
            xdr.send();
        }, 0);

Now lets have a look over the final resulting XDR call of:

if ($.browser.msie && window.XDomainRequest) {
    // Use Microsoft XDR
    var xdr = new XDomainRequest();
    xdr.open("get", "someurl");
    xdr.onload = function () {
    var JSON = $.parseJSON(xdr.responseText);
    if (JSON == null || typeof (JSON) == 'undefined')
    {
        JSON = $.parseJSON(data.firstChild.textContent);
    }
    processData(JSON);
    };
    xdr.onprogress = function(){ };
    xdr.ontimeout = function(){ };
    xdr.onerror = function () { };
    setTimeout(function(){
        xdr.send();
    }, 0);
}

 

Hope that would help you, if you are facing any other issue like that then let me know by commenting.

, , , ,