Internet Explorer 7 and all major browsers that support XMLHttpRequest instantiate the XMLHttpRequest object in the same way:

var req = new XMLHttpRequest();

Internet Explorer versions earlier than version 7 must use the ActiveXObject. However, the exact way to do this varies depending on the version of the XMLHTTP library installed on the client. Therefore, a bit of code juggling needs to be done in order to instantiate an XMLHttpRequest object in earlier versions of Internet Explorer.

The code in Example 18-1 is a cross-browser function to instantiate the XMLHttpRequest object across multiple browsers.

function readyAJAX() {
    try {
        return new XMLHttpRequest();
    } catch(e) {
        try {
            return new ActiveXObject('Msxml2.XMLHTTP'),
        } catch(e) {
            try {
                return new ActiveXObject('Microsoft.XMLHTTP'),
            } catch(e) {
                return "A newer browser is needed.";
            }
        }
    }
}

The function in Example 18-1 uses multiple levels of try/catch blocks to instantiate an XMLHttpRequest, whether the visitor is using Internet Explorer or another browser. If the native call to XMLHttpRequest fails, it indicates that the visitor is using an Internet Explorer browser older than version 7. In such a case, the error is caught and one of the ActiveXObject-based methods for instantiating XMLHttpRequest is tried. If none of these methods succeed, the likely reason is that the browser is too old to support XMLHttpRequest.

The article "About Native XMLHTTP" on MSDN describes some of the version history and security nuances of the XMLHttpRequest object in Internet Explorer. This article can be found at http://msdn2.microsoft.com/en-us/library/ms537505.aspx.

The readyAJAX() function shown in Example 18-1 would be called like this:

var requestObj = readyAJAX();

The requestObj variable now contains the XMLHttpRequest object returned by the function, or, if no XMLHttpRequest was able to be returned, the requestObj variable will contain the string "A newer browser is needed."

With a newly created XMLHttpRequest object in hand, a request can be sent to the Web server. Sending the request is a combination of using the open() and send() methods of the XMLHttpRequest object.

GET / HTTP/1.1
Host: www.braingia.org

HTTP/1.1 200 OK
Date: Wed, 12 Mar 2008 01:04:34 GMT
Server: Apache/1.3.33 (Debian GNU/Linux) mod_perl/1.29 PHP/4.3.10-22
Transfer-Encoding: chunked
Content-Type: text/html; charset=iso-8859-1

There are two fundamentally different ways to send AJAX requests: synchronously and asynchronously. When sent in a synchronous manner, the request will block, effectively preventing further processing or execution of other JavaScript while the script awaits the response from the Web server. This process has obvious disadvantages if the request or response gets lost in transit or is just slow.

Before the request can be sent, it must be built. The open method is used to build the request and has three arguments, the request method (GET, POST, HEAD, and others), the Uniform Resource Locator (URL) to which the request will be sent, and true or false, indicating whether the request will be sent asynchronously or synchronously, respectively.

Assuming that a request object has been retrieved using the readyAJAX() function and placed into a variable named requestObj, a typical asynchronous call to the open method might look like this:

var url = "http://www.braingia.org/getdata.php";
requestObj.open("GET", url, true);

That same call sent synchronously looks like this:

var url = "http://www.braingia.org/getdata.php";
requestObj.open("GET", url, false);

Sending the request is done with the send method, as follows:

requestObj.send();

It's easier to work with the response when the request is sent synchronously because the script's execution stops while awaiting the response. This section first looks at synchronous response processing.

The requestObj variable provides helpful methods for processing a response, including giving access to the status codes and text of the status sent from the server. Regardless of whether the request is synchronous or asynchronous, the status code should be evaluated to ensure that the response was successful (usually indicated by a status of 200).

The responseText method contains the text of the response as received from the Web server.

For example, assume that there is a server application that returns the sum of two numbers. Calling the application to add the numbers 2 and 56 looks like this:

http://www.braingia.org/addtwo.php?num1=2&num2=56

Here's a synchronous call and response retrieval:

requestObj.open("GET", "http://www.braingia.org/addtwo.php?num1=2&num2=56", false);
requestObj.send();
if (requestObj.status == 200) {
    alert(requestObj.responseText);
} else {
    alert(requestObj.statusText);
}

In this example, assume that the requestObj is built using the readyAJAX() function. The open method is then called using a GET request to the specified URL (http://www.braingia.org/addtwo.php?num1=2&num2=56) and the request will be sent synchronously because the last argument to the open method is false. The send method is then called, which actually sends the request to the Web server.

The status method is called and if it's a 200 response code, indicating success, then the responseText is displayed. If the response status code was anything other than 200, the text of the response status is displayed.

Processing an asynchronous response is a bit more complex. When a request is sent asynchronously, the script execution continues. Therefore, it is unpredictable when the script will be notified that the response has been received. The onreadystatechange event can trigger code that checks the event's readyState property to ascertain the state of the request/response cycle. Recall from Chapter 17, that the readyState property has five states, as shown in Table 18-1.

For practical purposes, the only state that matters to the JavaScript and AJAX programmer is state 4—Loaded. Attempting to process a response that has a readyState value other than 4 results in an error.

An anonymous function is commonly used for handling the onreadystatechange event with asynchronous JavaScript. The function checks to see if the readyState property has reached 4 and then checks to ensure that the status is 200, indicating success. The code follows this format:

requestObj.onreadystatechange = function() {
    if (requestObj.readyState == 4) {
        if (requestObj.status == 200) {
            alert(requestObj.responseText);
        } else {
            alert(requestObj.statusText);
        }
    }
}

In this next exercise, you'll create an XMLHttpRequest object and send a request to a Web server to retrieve a book title based on its ISBN. For this exercise, you'll need a Web server and Web server code to print the response because requests sent using XMLHttpRequest are subject to the JavaScript Same-Origin policy.

The Same-Origin policy requires that requests go only to servers within the same domain from which the calling script is executing. In other words, because I'm executing the script in this exercise directly from my Web server at http://www.braingia.org, it will be able to retrieve the response. If you run the script from another Web server, however, the Same-Origin policy will prevent the script from retrieving the response.

One way to get around this security feature is to use an HTTP proxy or to write the server-side program so that it sends a request on behalf of the calling program. Doing so is beyond the scope of this book.

For the upcoming exercise, the script or program running on the server needs to return the phrase "JavaScript Step by Step" when a GET request is received with a name/value argument of the following:

isbn=9780735624498

For example, at its most basic, the server-side program could look like this when implemented inside an ASP page:

<%
dim isbn
isbn=Request.QueryString("isbn")
If isbn<>"" Then
    If isbn=="9780735624498" Then      Response.Write("JavaScript Step by Step")
    End If
End If
%>

The program looks like this when implemented through PHP:

<?php

$isbn = $_GET['isbn'];

if (! $isbn) {
    print "That request was not understood.";
} else if ($isbn == "9780735624498") {
    print "JavaScript Step by Step";
}

?>

Within the following exercise, the URL to which the request will be sent is defined. Replace that URL with the URL where you locate the server-side program. Due to the Same-Origin policy, the server-side program needs to be within the same domain as the page that calls it.

Sending and receiving with XMLHttpRequest

Congratulations! You've now processed your first XMLHttpRequest.

The AJAX examples shown so far have all used plain Hypertext Markup Language (HTML) and text responses from the Web server. These responses have been retrieved using the responseText method. The server application can also return XML responses, which can be processed natively using the responseXML method.

Earlier in this chapter, in the sidebar titled Describing How the Web Works in 500 Words or Less, an example Web server response was discussed. The server response contained this Content-Type header:

Content-Type: text/html; charset=iso-8859-1

To retrieve a response using the responseXML method, the Web server needs to send a Content-Type of "text/xml" or "application/xml," like this:

Content-Type: application/xml

When native XML is received as the response, Document Object Model (DOM) methods are used to process the response.

The responseXML method has historically been somewhat quirky, meaning that using it can result in unexpected behavior, depending on the browser and operating system. In addition, responseXML isn't as widely supported as other JavaScript methods.

Using responseXML means combining the XMLHttpRequest techniques already seen in this chapter with the XML parsing techniques described in Chapter 17. For example, consider this XML document (let's call it book.xml):

<?xml version="1.0" encoding="ISO-8859-1"?>
<book>
<title>JavaScript Step by Step</title>
<isbn>9780735624498</isbn>
</book>

Combining XMLHttpRequest and XML parsing leads to this code to retrieve and display the ISBN from the book.xml document:

var requestObj = readyAJAX();
var url = "http://www.braingia.org/book.xml";
requestObj.open("GET",url,false);
requestObj.send();
if (requestObj.status == 200) {
    var xmldocument = requestObj.responseXML;
    alert(xmldocument.getElementsByTagName("isbn")[0].childNodes[0].nodeValue);
} else {
    alert(requestObj.statusText);
}

JavaScript Object Notation (JSON) is a way to pass data as native JavaScript objects and arrays, rather than encoding that data within XML (or HTML) responses. JSON is a more efficient way to pass data from server to client because it bypasses the DOM parsing and enables the data to be used without needing to be converted to JavaScript objects.

Recall the book.xml document from an earlier example in this chapter. That same data in JSON looks like this:

{
"book":
    {
    "title": "JavaScript Step by Step",
    "isbn": "9780735624498"
    }
}

Retrieval of an individual element is somewhat easier with JSON than with XML. The eval() function is used to parse the response with JSON. For example, this code is used to retrieve and display the book title.

var requestObj = readyAJAX();
var url = "http://www.braingia.org/json.php";
requestObj.open("GET",url,false);
requestObj.send();
if (requestObj.status == 200) {
    var xmldocument = eval('(' + requestObj.responseText + ')'),
    alert(xmldocument.book.title);
} else {
    alert(requestObj.statusText);
}

Using JSON carries with it an inherent security risk because it uses the eval() function to parse the response. The eval() function essentially executes the JavaScript code received, so it's possible that, if that code were malicious, it would execute in the context of the application being run. It is the developer's responsibility to ensure that the data being used with JSON is clean and free of malicious code that could cause problems when executed using eval().

The HTTP HEAD method returns just the response headers from the server, rather than the headers and the body as would be the case with the GET method. The HEAD method is sometimes helpful for determining if a given resource has been updated or changed.

One of the HTTP headers frequently sent is the Expires header, which indicates when the document should be refreshed by the client instead of read from the client's cache. If the Expires header is sent by the server, the HEAD method is an efficient way to view and parse it because it retrieves only the response header rather than the entire body of the requested resource.

The getAllResponseHeaders() method of the XMLHttpRequest object is used to retrieve the response headers, whether using a HEAD request or any other type of request such as GET or POST, as follows:

requestObj.getAllResponseHeaders();

For example, Example 18-2 shows retrieval of response headers from my Web site.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Response Headers</title>
</head>
<body>
<div id="data-id001"></div>
<script type="text/javascript">
function readyAJAX() {
    try {
        return new XMLHttpRequest();
    } catch(e) {
        try {
            return new ActiveXObject('Msxml2.XMLHTTP'),
        } catch(e) {
            try {
                return new ActiveXObject('Microsoft.XMLHTTP'),
            } catch(e) {
                return "A newer browser is needed.";
            }
        }
    }
}
var requestObj = readyAJAX();
var url = "http://www.braingia.org/";
requestObj.open("HEAD",url,true);
requestObj.send();
requestObj.onreadystatechange = function() {
    if (requestObj.readyState == 4) {
        if (requestObj.status == 200) {
            alert(requestObj.getAllResponseHeaders());
        } else {
            alert(requestObj.statusText);
        }
    }
}
</script>
</body>
</html>

Up to this point, the examples shown have used the GET and HEAD methods to retrieve data from the server. The POST method is also a common way to submit queries through HTTP. Using the POST method with XMLHttpRequest is a bit more complex than either GET or HEAD. However, the POST method offers two specific advantages over the GET method.

First, parameters sent using POST can be sent over a Secure Sockets Layer (SSL) connection. Compare this to a GET request, which sends its parameters directly within the URL, thus possibly making it visible to an eavesdropper. With a POST request, the parameters are contained in the body of the request and therefore are subject to the SSL protocol.

Second, the POST method enables larger requests to be sent. Some servers limit the amount or size of a GET request to a certain number of characters, and while those servers might also limit the size of a POST request, the limitation for POSTs is almost always much greater.

The HTTP POST method requires an additional header to be set within the request. Setting an additional header is accomplished with the setRequestHeader() method.

requestObj.setRequestHeader(header, value);

For example, setting the Content-Type header for a Web form, as would be done for a POST request, looks like this:

requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

Recall that when sending an AJAX request using the GET method, the URL includes the parameters or name/value pairs for the application, like so:

http://www.braingia.org/books/javascriptsbs/isbn.php?isbn=9780735624498

In this example, the isbn parameter is sent using the value 9780735624498. However, when working with POST requests, the URL merely contains the document or resource requested and not any parameters. Therefore, the parameters must be sent as part of the send() method.

Example 18-3 presents an AJAX request using the POST method, shown in bold type. Two parameters are used—see if you can spot them.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Post</title>
</head>
<body>
<div id="xmldata-id002"></div>
<script type="text/javascript">
function readyAJAX() {
    try {
        return new XMLHttpRequest();
    } catch(e) {
        try {
            return new ActiveXObject('Msxml2.XMLHTTP'),
        } catch(e) {
            try {
                return new ActiveXObject('Microsoft.XMLHTTP'),
            } catch(e) {
                return "A newer browser is needed.";
            }
        }
    }
}

var requestObj = readyAJAX();
var url = "http://www.braingia.org/books/javascriptsbs/post.php";
var params = "num1=2&num2=2";
requestObj.open("POST",url,true);
requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
requestObj.send(params);
requestObj.onreadystatechange = function() {
    if (requestObj.readyState == 4) {
        if (requestObj.status == 200) {
            alert(requestObj.responseText);
        } else {
            alert(requestObj.statusText);
        }
    }
}
</script>
</body>
</html>

Within the code in Example 18-3, the parameters are set and placed into a variable called params:

var params = "num1=2&num2=2";

After the request object (requestObj) is constructed, the parameters are sent within the send() method:

requestObj.send(params);