Getting the Server Time

This simple project will allow us to get the server time and display it on the page without a page load. There is more explanation of some of the techniques used in the sections of the Tutorials page.

First, we'll need a simple server-side script telltime.php to output the time:

echo date("H:i:s");

This is the script that will be called by our Ajax call, each time we push a button on the page.

The returned time will be displayed in a DIV element with id showtime.

From a button element on the page, we shall call a javascript function, here gettime();

onclick = "gettime()"

Here we can see that the button has an onclick event handler that fires a JavaScript function gettime(). This function needs to be added into the head section of the page, along with routines to generate the XMLHTTPRequest object http and handle the data that it returns.

The routine gettime() will send an Ajax call to the server routine telltime.php, which returns the time in HH:MM:SS format.

This data will be returned in the responseText property of the XMLHTTPRequest object, and added to a DIV element on the page by using the innerHTML javascript property:

document.getElementById('showtime').innerHTML = http.responseText

In the following section we'll look at these JavaScript functions in more detail, finishing with a working example of the application.

Next >>>