Sams Teach Yourself JavaScript in 24 Hours

Using XMLHttpRequest

You will now take a look at how to use XMLHttpRequest to communicate with a server. This might seem a bit complex, but the process is the same for any request. Later, you will create a reusable code library to simplify this process.

Creating a Request

The first step is to create an XMLHttpRequest object. To do this, you use the new keyword, as with other JavaScript objects. The following statement creates a request object in some browsers:

ajaxreq = new XMLHttpRequest();

The previous example works with Firefox, Mozilla, and Safari, and with Internet Explorer 7, but not Internet Explorer 5 or 6. For those browsers, you have to use ActiveX syntax:

ajaxreq = new ActiveXObject("Microsoft.XMLHTTP");

The library section later this hour demonstrates how to use the correct method depending on the browser in use. In either case, the variable you use (ajaxreq in the example) stores the XMLHttpRequest object. You'll use the methods of this object to open and send a request, as explained in the following sections.

Opening a URL

The open() method of the XMLHttpRequest object specifies the filename as well as the method in which data will be sent to the server: GET or POST. These are the same methods supported by web forms.

ajaxreq.open("GET","filename");

For the GET method, the data you send is included in the URL. For example, this command opens the search.php program and sends the value "John" for the query parameter:

ajaxreq.open("GET","search.php?query=John");

Sending the Request

You use the send() method of the XMLHttpRequest object to send the request to the server. If you are using the POST method, the data to send is the argument for send(). For a GET request, you can use the null value instead:

ajaxreq.send(null);

Awaiting a Response

After the request is sent, your script will continue without waiting for a result. Because the result could come at any time, you can detect it with an event handler. The XMLHttpRequest object has an onreadystatechange event handler for this purpose. You can create a function to deal with the response and set it as the handler for this event:

ajaxreq.onreadystatechange = MyFunc;

The request object has a property, readyState, that indicates its status, and this event is triggered whenever the readyState property changes. The values of readyState range from 0 for a new request to 4 for a complete request, so your event handling function usually needs to watch for a value of 4.

Although the request is complete, it may not have been successful. The status property is set to 200 if the request succeeded, or an error code if it failed. The statusText property stores a text explanation of the error, or "OK" for success.

Interpreting the Response Data

When the readyState property reaches 4 and the request is complete, the data returned from the server is available to your script in two properties: responseText is the response in raw text form, and responseXML is the response as an XML object. If the data was not in XML format, only the text property will be available.

JavaScript's DOM methods are meant to work on XML, so you can use them with the responseXML property. Later this hour, you'll use the getElementsByTagName() method to extract data from XML.