Home > Web > Cross browser XMLHttpRequest

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 !?😉

Categories: Web Tags: , ,
  1. Robinson Junior
    September 12, 2014 at 12:56 am

    i can create a file (.txt) and copy this file to LPT1 on client machine?

  2. September 17, 2014 at 11:28 am

    You can create a file using http://www.w3.org/TR/file-upload/. The problem is that this is working draft and the support in browsers is not that great: http://caniuse.com/#search=file. I’m not sure about sending it to LPT1.
    But to me it sounds like you want to print something dynamically generated. I think it’s better to open a new window, modify the document and then print it.

  3. December 30, 2015 at 8:54 pm

    Helpful !

  1. January 17, 2016 at 6:56 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: