Inconsistent AJAX requests using XDR under Internet Explorer [FIXED]

Solving IE Aborted Request Issues

By  

Why world? Why do you cling to IE 6 and 7? These two browsers are the cause of massive frustration and wasted time for developers. In our latest thrill ride with Internet Explorer, we came across an issue where AJAX requests were being aborted almost instantaneously, but only sporadically.

To make matters worse, the issue behaved differently between versions of Internet Explorer (6,7,8,and 9. 10 worked fine.) We’re using Internet Explorer's XDomainRequest object because the request simply won’t work using jQuery under IE. As it turns out, IE treats the XDomainRequest object differently for each version of IE. Thanks Microsoft!

A normal XDR request looks something like this:

var xdr = new XDomainRequest();
xdr.open("get", "someurl");
xdr.onload = function () { //process successful. };
xdr.send();

That code isn’t going to get you very far however. While it may work in one version of IE, chances are it won’t work for another. There are two primary problems with the XDR object that will cause this code to potentially fail, and they both need to be compensated for.

1) Required(ish) handler methods

The XDR object defines several event handler methods that you are able to bind onto. Normally these methods would be optional, but for some reason if you do not define them for the object you’ll experience intermittent problems. These methods are:

xdr.onerror
xdr.ontimeout
xdr.onprogress

It’s important to note that it’s not enough to define empty callbacks for each, they need something to do in order to appease IE. A simple return should do the trick.

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

2) ASYNC Stack Execution Issues

I don’t actually know the reason behind this problem, but the continued rapid execution of the stack immediately after calling xdr.send() causes the request to abort on occasion as well. A solution to the issue which has worked for me but may not be the best method is to wrap the xdr.send() call in a JavaScript timeout declaration like so:

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

Fix

Pulling these two pieces together you get a full XDR request that looks like this:

var xdr = new XDomainRequest();
xdr.open("get", "someurl");
xdr.onerror = function(){return;}
xdr.ontimeout = function(){return;}
xdr.onprogress = function(){return;}
xdr.onload = function () {
//process successful.
};
setTimeout(function () {
xdr.send();
}, 0);

Good luck and keep fighting the good fight against outdated browsers. Just think, fifteen years from now almost nobody will be using IE 6 or 7. IE 8 will be bigger than ever though.

Photo Credit: 
Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Spotlight on ...
Online Training

    Upgrade your skills and earn higher pay

    Readers to share their best tips for maximizing training dollars and getting the most out self-directed learning. Here’s what they said.

     

    Learn more

Answers - Powered by ITworld

ITworld Answers helps you solve problems and share expertise. Ask a question or take a crack at answering the new questions below.

Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Ask a Question
randomness