Ajax - the XMLHTTPRequest object

The XMLHTTPRequest object is Javascript's device for communicating with the server 'in the background' (i.e. without the necessity of a page load or refresh) and forms the nucleus of the 'Ajax' application model.

Before we can use such an object, however, it must be created. How this is done depends on which browser we are using, so we need some code to either detect the browser type and perform the relevant action, or test all of the means of creating the XMLHTTPRequest object until we find one that works. The latter, although sounding a little ungainly, is actually quite easy to code and suffers little if any performance hit. Example code to create the object this way is available under the 'Code' menu or by clicking here.

When you're experimenting with Ajax applications, it's important to check that your programs work in all of the commonly-used browsers. It always surprises me that so many Windows users don't install other browsers - at the very least, Firefox - to try in addition to Internet explorer. It's free, has pop-up blocking, tabbed browsing, as well as privacy and security features, and a rapidly-exoanding user base. If you run Windows, you can install Firefox alongside IE and compare the results in both. Why not take a moment to get it now?

open() and send() methods of the XMLHTTPRequest object

Although there are several other methods associated with the XMLHTTPRequest object, open() and send() are the two most employed in Ajax applications.

Let's suppose that we have created our XMLHTTPRequest object and called it http.

We use the open() method to connect to the server (let's say http://www.somedomain.com), and in the same command we specify whether we want to use an HTTP GET or HTTP POST request:

http.open("GET", "http://www.somedomain.com", true);

The optional third argument determines whether or not the request can be carried out asynchronously. If set to true (also the default state if the third argument is not present) then the request will be executed as soon as the 'send' command is given:


Although the argument null is given in this example, the send() function can optionally include an argument such as a postable string or DOM object data.

XMLHTTPRequest Object Properties

There are four properties of our XMLHTTPRequest object which will be indispensible in creating our Ajax application:

  • onreadystatechange
  • readyState
  • responseText
  • responseXML

The onreadystatechange property defines an event handler which executes every time the readyState property (see below) of the object changes

The ReadyState can take integer values of zero to four: 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete. In general, we are only interested in a readyState of 4 (complete) which tells us that the server request has completed and we can therefore use the data which has been returned.

The responseText and responseXML properties refer to the information returned from the server, in text and XML formats respectively.

For examples of using these methods and properties to create an Ajax application, see this page, or for practical examples see the items in the 'Projects' menu.


Think this may help others? Please share ...Google+FacebookPinterestStumbleUponLinkedInTwitter

Before using any software from this site, please see the Terms

3 Users Online.

All of the code and information on this site is provided free of charge (but without warranty).
If you feel that the site has been useful, you may care to donate a little toward the running of the site and the development of further projects?