Best method of Instantiating an XMLHttpRequest object

Question

What is the best method for creating an XMLHttpRequest object?

It should work in all capable browsers.

Answer 1

Use jQuery (or a similar JavaScript library). It takes care of the cross-browser compatibility issues of things like making Ajax calls.

For example, using the jQuery Ajax call:

$.ajax({
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        // do something with xml
    }
});

Answer 2

Here's a useful link and some code (should cover all bases)

http://blogs.msdn.com/xmlteam/archive/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer.aspx

        var request = null;

        function InitAJAX()
        {
            var objxml = null;
            var ProgID = ["Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.3.0", "Microsoft.XMLHTTP"];            

            try
            {
                objxml = new XMLHttpRequest();
            }
            catch(e)
            {                
                for (var i = 0; i < ProgID.length; i++)
                {
                    try
                    {
                        objxml = new ActiveXObject(ProgID[i]);
                    }
                    catch(e)
                    {                        
                        continue;
                    }
                }
            }

            return objxml;            
        }

        request = InitAJAX();

Answer 3

Using just about any JavaScript Ajax library is preferable to writing your own Ajax framework -- unless that's the point. You might want to check out the jQuery or Prototype or MooTools or Dojo or [insert name here] framework to see how they do it if you insist on writing your own.

Answer 4

For a library-less solution, you can emulate Prototype's use of Try.these fairly easily:

function newAjax() {
    try { return new XMLHttpRequest();                    } catch(){}
    try { return new ActiveXObject('Msxml2.XMLHTTP.6.0'); } catch(){}
    try { return new ActiveXObject('Msxml2.XMLHTTP.3.0'); } catch(){}
    try { return new ActiveXObject('Msxml2.XMLHTTP');     } catch(){}
    try { return new ActiveXObject('Microsoft.XMLHTTP');  } catch(){}
    return false;
}

Answer 5

This is what I use, it works fine for me:

    function request()
    {
        try
        {
            try
            {
                return new ActiveXObject("Microsoft.XMLHTTP")
            }
            catch( e )
            {
                return new ActiveXObject("Msxml2.XMLHTTP")
            }
        }
        catch(e) 
        {
            return new XMLHttpRequest()
        }
    }

Answer 6

I go with Cletus's suggestion of jQuery and also check out the jQuery Form plug-in, very powerful and simple to use to quickly convert your forms to work via Ajax.

Answer 7

Use XMLHttpRequest.js - Standard-compliant cross-browser XMLHttpRequest object implementation and work with the object in a standard (W3C) way

Answer 8

I'd suggest following Sergey's advise or writing a small, less sophisticated patch for IE yourself:

if(typeof window.XMLHttpRequest !== 'function' &&
    typeof window.ActiveXObject === 'function') {
    window.XMLHttpRequest = function() {
        try { return new ActiveXObject('Msxml2.XMLHTTP.6.0'); } catch(e) {}
        try { return new ActiveXObject('Msxml2.XMLHTTP.3.0'); } catch(e) {}
        try { return new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) {}
        try { return new ActiveXObject('Microsoft.XMLHTTP'); } catch(e) {}
        throw new Error('failed to create an ActiveX XMLHTTP object');
    };
}

Then you can do

var req = new XMLHttpRequest;

even in IE.