Using XMLHttpRequest

Due to the differences between browser implementations of XMLHttpRequest, it’s necessary to create a special function in order to ensure that your code will work on all major browsers.

To do this, you must understand the three ways of creating an XMLHttpRequest object:

IE 5: request = new ActiveXObject("Microsoft.XMLHTTP")
IE 6+: request = new ActiveXObject("Msxml2.XMLHTTP")
All others: request = new XMLHttpRequest()

This is the case because Microsoft chose to implement a change with the release of Internet Explorer 6, while all other browsers use a slightly different method. Therefore, the code in Example 17-1 will work for all major browsers released over the last few years.

Example 17-1. A cross-browser Ajax function

<script>
function ajaxRequest()
{
    try // Non-IE browser?
    {
        var request = new XMLHttpRequest()
    }
    catch(e1)
    {
          try // IE 6+?
          {
            request = new ActiveXObject("Msxml2.XMLHTTP")
          }
          catch(e2)
          {
               try // IE 5?
               {
                request = new ActiveXObject("Microsoft.XMLHTTP")
               }
               catch(e3) // There is no Ajax support
               {
                     request = false
               }
          }
    }
    return request
}
</script>

You may remember the introduction to error handling in the previous chapter, using the try...catch construct. Example 17-1 is a perfect illustration of its utility: it uses the try keyword to execute the non-IE Ajax command and, upon success, jumps on to the final return statement, where the new object is returned. If, however, the command fails, a catch traps the error and the subsequent command is executed. Again, upon success, the new object is returned; otherwise, the final of the three commands is tried. If that attempt fails, the browser doesn’t support Ajax and the request object is set to false; otherwise, the object is returned. So there you have it—a cross-browser Ajax request function that you may wish to add to your library of useful JavaScript functions.

Okay, so now you have a means of creating an XMLHttpRequest object, but what can you do with these objects? Well, each one comes with a set of properties (variables) and methods (functions), which are detailed in Table 17-1 and Table 17-2.

Table 17-1. An XMLHttpRequest object’s properties

Properties	Description
`onreadystatechange`	Specifies an event handling function to be called whenever the `readyState` property of an object changes.
`readyState`	An integer property that reports on the status of a request. It can have any of these values: `0` = Uninitialized, `1` = Loading, `2` = Loaded, `3` = Interactive, and `4` = Completed.
`responseText`	The data returned by the server in text format.
`responseXML`	The data returned by the server in XML format.
`status`	The HTTP status code returned by the server.
`statusText`	The HTTP status text returned by the server.

Table 17-2. An XMLHttpRequest object’s methods

Methods	Description
`abort()`	Aborts the current request
`getAllResponseHeaders()`	Returns all headers as a string
`getResponseHeader(``param`)	Returns the value of `param` as a string
`open('method', 'url', 'asynch')`	Specifies the HTTP method to use (`GET` or `POST`), the target URL, and whether the request should be handled asynchronously (`true` or `false`)
`send(data)`	Sends `data` to the target server using the specified HTTP method
`setRequestHeader('param', 'value')`	Sets a header with a parameter/value pair

These properties and methods give you control over what data you send to the server and receive back, as well as a choice of send and receive methods. For example, you can choose whether to request plain text (which could include HTML and other tags) or data in XML format. You can also decide whether you wish to use the POST or GET method to send to the server.

Let’s look at the POST method first by creating a very simple pair of documents: a combination of HTML and JavaScript, and a PHP program to interact with it via Ajax. Hopefully you’ll enjoy these examples, because they illustrate just what Web 2.0 and Ajax are all about. With a few lines of JavaScript, they request a web document from a third-party web server, which is then returned to the browser by your server and placed within a section of the current document.