Our First Ajax Application | Page 2

[previous] [next]

Our First Ajax Application

Adding JavaScript

We can now add our JavaScript routines to the HTML page. We'll do so by adding them inside a container to the

section of the page.

TIP: Alternatively we could have added the routines in an external JavaScript file (ajax.js, say) and called this file from our document by using a statement like:

in the

section of the document.

The XMLHTTPRequest Object

First, let's add our function to create our XMLHTTPRequest object:

It's now a simple matter to create our XMLHTTPRequest object, which on this occasion we're going to call http:

The Server Request

Now we need a function to construct our server request, define a callback function, and send the request to the server. This is the function that will be called from an event handler in the HTML page:

Once again we have added a parameter with a random value to the URL to avoid any cache problems. Our callback function is named useHttpResponse and is called each time a change is detected in the value of http's readyState property.

Our PHP Server-Side Script

Before explaining the operation of the callback function, we need to refer to the code of the simple PHP server routine telltimeXML.php, shown in Listing 11.2.

LISTING 11.2 telltimeXML.php

<?php header('Content-Type: text/xml'); echo "<?xml version=\"1.0\" ?><clock1><timenow>" .date('H:i:s')."</timenow></clock1>"; ?>

This short program reports the server time using PHP's date() function. The argument passed to this function defines how the elements of the date and time should be formatted. Here we've ignored the date-related elements completely and asked for the time to be returned as Hours:Minutes:Seconds using the 24-hour clock.

Our server script returns an XML file in the following format:

<?xml version="1.0" ?> <clock1> <timenow> XX:XX:XX </timenow> </clock1>

with XX:XX:XX replaced by the current server time. We will use the callback function to extract this time information and display it in the <div> container of the HTML page.

The Callback Function

Here is the code for the callback function useHttpResponse:

Once again we have used the getElementsByTagname method, this time to select the <timenow> element of the XML data, which we have stored in a variable timeValue. However, on this occasion we're not going to display the value in an alert dialog as we did in Lesson 10, "Using the Returned Data."

This time we want instead to use the information to update the contents of an element in the HTML page. Note from Listing 11.1 how the <div> container is defined in our HTML page:

In addition to the class declaration (which is used in the <style> definitions to affect how the <div> element is displayed), we see that there is also defined an id (identity) for the container, with a value set to showtime.

Currently the <div> contains nothing. We want to update the content of this container to show the server time information stored in timeValue. We do so by selecting the page element using JavaScript's getElementById() method, which we met in Lesson 10. We'll then use the JavaScript innerHTML property to update the element's contents:

Employing Event Handlers

Finally, we must decide how the server requests will be triggered. In this case we shall slightly edit the HTML document to use the onClick() event handler of the <button> object:

This will correctly deal with the occasion when the Get Server Time button is clicked. It does, however, leave the <div> element empty when we first load the page.

To overcome this little problem, we can use the onLoad() event handler of the page's

element:

This event handler fires as soon as the

area of the page has finished loading.
[previous] [next]

URL: