Our First Ajax Application | Page 2
Our First Ajax Application
in thesection of the document.
First, let's add our function to create our
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
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
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:
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
<div> contains nothing. We want to update the content of this container to show the server time information stored in
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
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
This event handler fires as soon as thearea of the page has finished loading.