Our First Ajax Application | Page 3 | WebReference

Our First Ajax Application | Page 3


Our First Ajax Application

Putting It All Together

Listing 11.3 shows the complete client-side code for our Ajax application.

LISTING 11.3 The Complete Ajax Application

Loading the page into our browser, we can see that the server time is displayed in the <div> container, indicating that the onLoad event handler for the <body> of the page has fired when the page has loaded.

User Feedback

Note also that we have provided user feedback via the line

which executes on each change to the value readyState until the condition

is satisfied. This line loads into the time display element an animated GIF with a rotating pattern, indicating that a server request is in progress, as shown in Figure 11.2. This technique was described in more detail in Lesson 10.

TIP: If you have a fast server and a good Internet connection, it may be difficult to see this user feedback in action because the time display is updated virtually instantaneously. To demonstrate the operation of the animated GIF image, we can slow down the server script to simulate the performance of a more complex script and/or an inferior connection, by using PHP's sleep() command:

The line

forces the server to pause program execution for x seconds.

Now, each time we click on the Get Server Time button, the time display is updated. Figure 11.3 shows the completed application.


In this lesson, we constructed a simple yet complete Ajax application that does the following:

  • Creates an instance of the XMLHTTPRequest object
  • Reacts to JavaScript event handlers built into an HTML page
  • Constructs and sends asynchronous server requests
  • Parses XML received from the server using JavaScript DOM methods
  • Provides user feedback that a request is in progress
  • Updates the displayed page with the received data

This chapter is excerpted from Ajax StarterKit Quick Start Guide, authored by Phil Ballard, published by Sams Publishing, © Copyright 2007 Sams Publishing. All rights reserved.

Digg This Add to del.icio.us