The XMLHttpRequest Object
to create the XMLHttpRequest object. The getHTTPObject
function has two separate code blocks to meet the needs of both IE and non-IE browsers as shown below:
var xmlhttp = null;
var success = false;
// List of MS XMLHTTP versions - newest first
var MSXML_XMLHTTP_PROGIDS = new Array(
// test for IE implementations first
for (var i = 0; i < MSXML_XMLHTTP_PROGIDS.length &&
xmlhttp = new ActiveXObject(
success = true;
xmlhttp = false;
// Now test for non-IE implementations
if (!xmlhttp &&
typeof XMLHttpRequest != 'undefined')
xmlhttp = new XMLHttpRequest();
xmlhttp = false;
Notice how the getHTTPObject
function first tests for IE implementations of the XMLHttpRequest object and then tests for non-IE implementations. You can use both implementations in a similar fashionin other words, once you have a reference to an XMLHttpRequest object, the method calls and properties are functionally similar, regardless of the underlying implementation.
After creating an XMLHttpRequest object, you simply set a few properties on it and invoke the open
methods on it to send data to the server. The callService
When you make an asynchronous call to the XMLHttpRequest object, it repeatedly executes the callback function handleServiceResponse (
previously stored in the XMLHttpRequest object's onreadystatechange
property) until the server response is complete.
function queries the readyState
property of the XMLHttpRequest object to determine the completion state of the response. The readyState
property can have one the following possible values:
- 0 (UNINITIALIZED): open() has not been called yet.
- 1 (LOADING): send() has not been called yet.
- 2 (LOADED): send() has been called, headers and status are available.
- 3 (INTERACTIVE): Data is downloading.
- 4 (COMPLETED): Finished with all operations.
When the readyState
property indicates that the response has completed, you can retrieve the response data from the XMLHttpRequest object using either the responseText
or the responseXML
property. The responseText
property returns a string representation of the data and the responseXML
property returns an XML document object that you can then traverse as desired. The following code shows the handleServiceResponse
|Figure 3. The Populated User Form. After completing the background XMLHttpRequest call, the application displays both the raw XML data received and the extracted list of user names.|
shows the populated user form after a receiving a response from the server.
if (httpObj.readyState == 4) // completed
isWorking = false;
if (httpObj.status == 200) // server "OK" response code
// the responseXML property retrieves an XML Document
var xmlDoc =
// the responseText property retrieves a string
document.ServiceRequestForm.users.value = "";
// display the user list from the XML Document
var users = xmlDoc.getElementsByTagName("User");
for (var i = 0; i < users.length; i++)
if (i > 0)
The preceding function retrieves the HTTP response as an XML document and then traverses that document to find the desired nodes. It then uses the data from these nodes to populate fields in the HTML form.