spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / ajax_starter_kit2

[previous]

Sr. Web Developer
mediabistro.com
US-NY-New York

Justtechjobs.com Post A Job | Post A Resume
Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?


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.

Summary

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

home / programming / ajax_starter_kit2

[previous]

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

URL: