Cross-Browser XMLHttpRequest

By Bret Taylor, July 23, 2006

Internet Explorer 6.0 has a different interface to XMLHttpRequest than Firefox, Safari, and Opera, though that will be fixed in Internet Explorer 7.0. Most of the cross-browser XMLHttpRequest snippets on the web are unnecessarily complex. This recipe works in IE 5.5+ and all recent versions of Firefox, Safari, and Opera:

function createXMLHttpRequest() {
    if (typeof XMLHttpRequest != "undefined") {
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined") {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        throw new Error("XMLHttpRequest not supported");
    }
}

If you run into other recipes on the web that look more complicated (like this one), note that there is no need to try any ActiveXObject arguments other than Microsoft.XMLHTTP, which does the "right thing" in IE 5.5+. See MSDN's discussion of the issue for more information.

Example usage:

var request = createXMLHttpRequest();
request.open("GET", "myfile.txt", true);
request.onreadystatechange = function() {
    if (request.readyState == 4) {
        var node = document.createTextNode(request.responseText);
        document.getElementById("output").appendChild(node);
    }
}
request.send(null);

See the example

Digg  del.icio.us  Reddit

Comments

On December 16, 2006, Laurent wrote
not enough, the request.readyState == 4 doesnt means the request is ok. A 404 url, will go to readyState 4. At this step, the request can be considered valid if (and only if) the request.status == 200, else there's an error to manage.
On December 17, 2006, Chris wrote
Good point laurent

Its also worth noting that appending the text via a textnode will NOT render any tags you have in the resultant code.

So unless your fetching plain text then you will have to update the function.
On December 18, 2006, Leonjhon wrote
I think
request.open("GET", "myfile.txt", true);
can be replace to
request.open("GET", "myfile.txt");
On December 18, 2006, frumbert wrote
aah, so IE7 finally implements *something* that approaches a standard - "window.XMLHttpRequest". How novel!

<a href="http://www.jibbering.org/2002/4/httprequest.html">Jim Ley</a> has a good description of how the whole object, and lots of examples.
On December 27, 2006, Alexander Gyoshev wrote
actually, the XMLHttpRequest hasn't been fully fixed in IE7; there is plenty of stuff written on the 'net since this was discovered (keeping things simple - the object in IE7 is not much of a javascript object but a nasty wrapper of the whole ActiveX-initialization-procedure).

I scouted out for an article and found this one (I'm not pretending to have found the most accurate, merely one that describes the problem better than this comment):
http://www.techtoolblog.com/archives/ie-7-native-xmlhttprequest-not-so-good
On January 30, 2007, Sanoj wrote
Yeah,
Really Helpful for a newcomer like me...
On August 30, 2008, Gerrad Roberts wrote
Laurent, do you normally write urls into your code that 404? Anyway here is something more useful then complaining

var request = createXMLHttpRequest();
request.open("GET", "<testfilehere>", true);
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
var node = document.createTextNode(request.responseText);
document.getElementById("output").appendChild(node);
}
}
request.send(null)

Write a Comment