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.
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
forces the server to pause program execution for
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:
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.