Learning JavaScript

How Ajax Works

Ajax is not as complicated as it may seem at first. A request needs to be sent to the server, a service invoked, and data returned. However, instead of submitting a form and loading a new page with the response, Ajax handles all of this activity within the context of the same page.

A special object, either Microsoft’s ActiveXObject or the more general XMLHttpRequest, manages the asynchronous communication between the server and the client. Asynchronous means that the request is sent, but the client doesn’t have to stop, hold, and wait for the process to finish; there is no twirly icon to signal working while you twiddle your thumbs. Instead, the client provides a function to be called when the state of the request changes. In this function, this state is checked; then, based on its value, as well as the status of the request, the data returned from the service is processed and usually output to the page in some form.

To the web-page reader, all of this activity looks as if the processing is happening within the page, rather than through client/server interaction. The only indicator that server access is happening is if this information is specifically provided.

Now that we’ve had the 10,000-foot view, let’s look first at an Ajax application, and then go through the individual pieces in the rest of the chapter.

Tip

Ajax does require a server-side component. I’m using PHP for this book because PHP is probably one of the most common scripting languages used today. ...