• Choose a category
• All
• Classic-Fiction

All you really need is some kind of structure that can trigger a JavaScript function.

AJAX isn’t a complex technology, but it does draw on several other technologies. You may need to look over the JavaScript chapters in Book IV if this material is unfamiliar to you. Although these examples don’t require PHP, they do involve server-side responses like PHP does, so AJAX is usually studied by people who are already familiar with both JavaScript and PHP as well as the foundational XHTML and CSS environments.

Creating an XMLHttpRequest object

The key to AJAX is a special object called XMLHttpRequest. All the major browsers have it, and knowing how to use it in code is what makes AJAX work. It’s pretty easy to create:

var request = new XMLHttpRequest();

Internet Explorer 5 and 6 had an entirely different way of invoking the XMLHttpRequest object that involved a technology called ActiveX. If you want to support these older browsers, use one of the libraries that I mention in Chapter 2 of this minibook. I’ve decided not to worry about them in this introductory chapter.

This line makes an instance of the XMLHttpRequest object. You use methods and properties of this object to control a request to the server.

AJAX is really nothing more than HTTP, the protocol that your browser and server quietly use all the time to communicate with each other. You can think of an AJAX request like this: Imagine that you have a basket with a balloon tied to the handle and a long string. As you walk around the city, you can release the basket under a particular window and let it rise. The window (server) puts something in the basket, and you can then wind the string to bring the basket back down and retrieve the contents. The various characteristics of the XMLHttpRequest object are described in Table 1-1.

Table 1-1 Useful Members of the XMLHttpRequest Object

Member

Description

Basket Analogy

open(protocol, URL, synchronization)

Opens a connection to the indicated file on the server.

Stand under a particular window.

send(parameters)

Initiates the transaction with given parameters (or null).

Release the basket but hang on to the string.

status

Returns the HTTP status code returned by the server (200 is success).

Check for error codes (“window closed,” “balloon popped,” “string broken,” or “everything’s great”).

statusText

Text form of HTTP status.

Text form of status code.

responseText

Text of the transaction’s response.

Get the contents of the basket.

readyState

Describes the current status of the transaction (4 is complete).

Is the basket empty, going up, coming down, or here and ready to get contents?

onReadyStateChange

Event handler. Attach a function to this para-meter, and when the readyState changes, the function will be called automatically.

What should I do when the state of the basket changes? For example, should I do something when I’ve gotten the basket back?

Don’t worry about all the details in Table 1-1. I describe these things as you need them in the text. Also, some of these elements only pertain to asynchronous connections, so you won’t always need them all.

Opening a connection to the server

The XMLHttpRequest object has several useful methods. One of the most important is the open() method:

request.open(“GET”, “beast.txt”, false);

The open() method opens a connection to the server. As far as the server is concerned, this connection is identical to the connection made when the user clicks a link or submits a form. The open() method takes the following three parameters:

♦ Request method: The request method describes how the server should process the request. The values are identical to the form method values described in Book V, Chapter 3. Typical values are GET and POST.

♦ A file or program name: The second parameter is the name of a file or program on the server. This is usually a program or file in the same directory as the current page.

♦ A synchronization