Cross browser XMLHttpRequest

AJAX has become more and more widely used. It is a cool thing, you can do a lot with it, but basically (and here is the best part) it is only a new JavaScript object: XMLHttpRequest. There is no need to learn new technologies or languages.
Unfortunately, not all the browsers (please read especially IE) support this in a native and smooth way. If in FF2+ and even IE7, this comes in a native way, in IE6 this comes only as an ActiveX object.
The good news is that, except how the objects are instantiated, everything else is the same.
As I said in FF/Mozilla this comes in a native smooth way


var xmlHttp = new XMLHttpRequest();


but in IE5 and 6, to create it, you actually create an ActiveX object


var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");


And that’s not all, even the ActiveX object class can be different from Windows version to another, so you might also have:


xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");


So every time you want AJAX you might end up with something like this:

    var xmlHttp;
    // use the ActiveX control for IE5.x and IE6
    try {
        xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
    } catch (othermicrosoft){
        try { 
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (native) {
            // If IE7, Mozilla, Safari, etc: Use native object
            xmlHttp = new XMLHttpRequest();
        } 
    } 

As I’m lazy and I don’t want to write this code every time, I decided to wrap it up in a nice cross browser way.

How? Look at the code below.

try {
    // test to see if XMLHttpRequest is defined
    XMLHttpRequest.DONE;
}
catch (e) {
    XMLHttpRequest = new Object();
    // define also all the constants
    XMLHttpRequest.UNSENT = 0;
    XMLHttpRequest.OPENED = 1;
    XMLHttpRequest.HEADERS_RECEIVED = 2;
    XMLHttpRequest.LOADING = 3;
    XMLHttpRequest.DONE = 4;
}

/** Creates new instance of the XMLHttpRequest object */
XMLHttpRequest.newInstance = function() {
    var xmlHttp = null;
    // use the ActiveX control for IE5.x and IE6
    try {
        xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
    } catch (othermicrosoft){
        try { 
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (native) {
            // If IE7, Mozilla, Safari, etc: Use native object
            xmlHttp = new XMLHttpRequest();
        } 
    } 

    return xmlHttp;
};

Just to explain a little bit what happens. First we test if the XMLHttpRequest exists, by calling a property on it. If it doesn’t exist, then this will raise an exception and then we will create it. After this, the next step will be to define a method (similar to a static one) to create a new instance and enclose the entire cross browser code. So now we will create a new XMLHttpRequest like this:


var xmlHttp = XMLHttpRequest.newInstance();


Lazy enough for you !? 😉