Using the XMLHttpRequest object

The Ajax approach to building Web 2.0 applications relies heavily on the XMLHttpRequest object. The object is used to load information from an XML document or to query a database via a server-side page. JavaScript creates and manages the object as well as the callbacks that deal with loaded data.

The XMLHttpRequest object was first created by Microsoft in Internet Explorer 5 as an ActiveX object available through the MSXML WML parser. The latest release, IE7, includes it as a native object. Mozilla and Opera both include a native version of this object and Safari introduced the object in version 1.2.

As you’ll see shortly, the implementation is a little different across browsers so you need to be careful when writing code. In case you’re interested, the World Wide Web consortium (W3C) is implementing similar functionality in the Document Object Model (DOM) Level 3 Load and Save specification.

In this article, I’ll show you how to use JavaScript to work with the XMLHttpRequest object. We’ll explore the code that you need for a cross-browser approach and I’ll show you how to hook into the results with JavaScript. After I’ve shown you some of the theory, we’ll work through a simple example.

You can download the reference files for the tutorial from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file. The download includes the examples covered here.

We’ll start by looking at how the create the XMLHttpRequest object.