|Table of contents|
The following example is a summary of a discussion by Welling and Thomson (2009, p.855-869) and gives an example of an AJAX application that retrieves the server system date and time when you roll over a designated area on the web page.
From Adriel K. Oct 28, 2008.
- Dec 2009
By the end of this page you will be able to:
HTTP Request and Response
Hypertext Transfer Protocol (HTTP) is an Internet standard way that allows the web client (Browser) to communicate to the Web Server.
- A user types in a URL and the Browser sends an HTTP request, for example:
|1||GET http://server/ajaxexample.html HTTP/1.1|
|..||Optional header lines|
|..||Optional message body|
- For line 1: method (GET) path (http://server/AjaxExample.html) HTTP Version (HTTP/1.1)
After processing the request the Server will send a response, for example:
|1||HTTP/1.1 200 OK|
|..||Optional header lines|
- the 200 is the status code: 1##=information, 2## = success, 3## = redirection, 4## = error (e.g. 404 error), 5## = malformed scripts
- create a function that uses the XMLHTTPRequest Object to ask the server for the date and time
It is best to link the html page to a separate js file. So in the html page header you will need to include
and create the following AjaxFunctions.js text file .
- This code is required to handle the inconsistencies of different web browsers :(
- the XMLHTTPRequest object can only call URLs in the same domain as the original web page.
Create (instantiate) XMLHTTPRequest Object
Then in the html page add
Request date/time from the server
- The random number in the URL is to make sure the retrieved data does not come out of the browsers cache.
Server Side Script (PHP)
Now we need to create a script that is run by the server that will return the date and time. This can be done in any server programming language, however here I will use php.
Create a php file on the server in folder ajax called AjaxExample.php
The XMLHTTPRequest Object needs to receive a correctly constructed XML file (XML files follow very strict formatting rules). So, the php code will create an XML file, that will look like (The server will put in the correct current date and time):
So we now need to interpret the response sent by the server. We need to create the function fnHTTPResponse (called in function fnGetServerInfo).
- AjaxLoad.gif is an animated image showing that the request is being processed by the server.
Dynamic HTML (DHTML)
However, its not quite all there, as we have not told the Browser when to update the server date and time. So we need to do two things,
- create an area for the web page to display the contents and
- tell the browser to send a request to the server when something happens (in this case when the mouse is rolled-over the area).
Cascading Style sheet
CSS allows us to format the display of the html independent of the html tag. In this case I will use the CSS to create a style for the box that will display the server information. The following style is added into the HTML file.
- the cursor setting turns the mouse pointer into a hand.
.. and thats all there is to it. If you want to get a more through discussion please read Welling and Thomson (2009, p.855-869).
- Welling, L., & Thomson, L. (2009). PHP and MySQL Web Development. (4th Ed.) Developer's Library. Addison-Wesley. ISBN 978-0-672-32916-6