Our First Ajax Application

By Phil Ballard

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.

In this lesson you will learn how to construct a complete and working Ajax application using the techniques discussed in previous lessons.

Constructing the Ajax Application

The previous lessons have introduced all the techniques involved in the design and coding of a complete Ajax application. In this lesson, we're going to construct just such an application.

Our first application will be simple in function, merely returning and displaying the time as read from the server's internal clock; nevertheless it will involve all the basic steps required for any Ajax application:

An HTML document forming the basis for the application
JavaScript routines to create an instance of the XMLHTTPRequest object and construct and send asynchronous server calls
A server-side routine (in PHP) to configure and return the required information
A callback function to deal with the returned data and use it in the application

Let's get to it, starting with the HTML file that forms the foundation for our application.

The HTML Document

Listing 11.1 shows the code for our HTML page.

LISTING 11.1 The HTML Page for Our Ajax Application

This is a simple HTML layout, having only a title, subtitle, button, and

element, plus some style definitions. Figure 11.1 shows what the HTML page looks like.

TIP: In HTML the <div> Â </div> element stands for division and can be used to allow a number of page elements to be grouped together and manipulated in a block.

[next]

URL:

Our First Ajax Application