Memoirs of a Developer

Ajax (Asynchronous JavaScript and XML) is a new paradigm which was introduced in 2005. The purpose of Ajax is that of giving the illusion that websites are responsive. It achieves this by processing requests which involve the sending and receiving of small packets of data without refreshing the web browser. Ajax is founded on:

• XHTML - A rigid subset of html which is used to mark-up and style the information.
• DOM - The Document Object Model which can be accessed by the client browsers.
• XMLHttpRequest - The object used to exchange the information asynchronously.
• XML - The format used to transfer the data from the server to the client.

In this tutorial we will see how to create a piece of text that keeps changing using Ajax. Before you start this tutorial make sure that you have a text editor and a web server with PHP extensions available. The following section explains the source files, why they were created, and how to deploy them.

(Tested on: IIS 5 and PHP 5.1.4)

(Development Tools: Textpad and Notepad++)

Implementation

Client Side File (AjaxClientSite.html)

This file contains the html code required to output the information to the clients display. When the page is being outputted the first time, the javascript file is triggered and this sets off the system to start polling the web server for information.

Javascript File (ajaxRotator.js)

This javascript file contains the Ajax code that will perform the calls to the server and will be handling the results returned from the server. When the javascript is triggered, it will start an infinite loop and will request an xml document (using XMLHttpRequest) from the web servers at every iteration. Each time an xml document is returned the javascript posts the html into the current page, thus updating the page without needing a page refresh.

Server File (ajaxServerSide.php)

This file contains the server-side scripts. When the web server is started, this php file will be made available for execution. When the client places an XMLHttpRequest to the server for this file, the php resolves the dynamic page which is to be returned and the information is returned to the client (in this case the text).

A fact that programmers need to bear in mind when using Ajax is that although Ajax does all the processing in the background, an html file is still being transfered at every call. This means that Ajax is useful when communication is performed sparingly (like in a chat or an online server) and should be avoided when there is a need for the system to be very responsive (e.g. online gaming). Ajax is only supported on recent browsers, so developers should be weary when using it to avoid viewers who are not sporting the latest browsers to view the site (e.g. FireFox Mozilla 1.5).

Live Demo:

• Demo

Source Code:

• sample.zip

LINKS:

• Ajax in Wikipedia
• Phpied