Sams Teach Yourself JavaScript in 24 Hours

Creating a Simple AJAX Library

You should be aware by now that AJAX requests can be a bit complex. To make things easier, you can create an AJAX library. This is a JavaScript file that provides functions that handle making a request and receiving the result, which you can reuse any time you need AJAX functions.

This library will be used in the two examples later this hour. Listing 17.1 shows the complete AJAX library.

Listing 17.1. The AJAX Library

// global variables to keep track of the request // and the function to call when done var ajaxreq=false, ajaxCallback; // ajaxRequest: Sets up a request function ajaxRequest(filename) { try { // Firefox / IE7 / Others ajaxreq= new XMLHttpRequest(); } catch (error) { try { // IE 5 / IE 6 ajaxreq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (error) { return false; } } ajaxreq.open("GET", filename); ajaxreq.onreadystatechange = ajaxResponse; ajaxreq.send(null); } // ajaxResponse: Waits for response and calls a function function ajaxResponse() { if (ajaxreq.readyState !=4) return; if (ajaxreq.status==200) { // if the request succeeded... if (ajaxCallback) ajaxCallback(); } else alert("Request failed: " + ajaxreq.statusText); return true; }

The following sections explain how this library works and how to use it.

The ajaxRequest() Function

The ajaxRequest() function handles all of the steps necessary to create and send an XMLHttpRequest. First, it creates the XMLHttpRequest object. This requires a different command for different browsers, and will cause an error if the wrong one executes, so TRy and catch are used to create the request. First the standard method is used, and if it causes an error, the ActiveX method is tried. If that also causes an error, the ajaxreq variable is set to false to indicate that AJAX is unsupported.

The ajaxResponse() Function

The ajaxResponse() function is used as the onreadystatechange event handler. This function first checks the readyState property for a value of 4. If it has a different value, the function returns without doing anything.

Next, it checks the status property for a value of 200, which indicates the request was successful. If so, it runs the function stored in the ajaxCallback variable. If not, it displays the error message in an alert box.

Using the Library

To use this library, follow these steps:

The two remaining examples in this hour make use of this library to create AJAX applications.