Application examples
What is AJAX then? Nothing too new, but not too old either. I'd define AJAX as the rebirth of Javascript, for example, it's not only Javascript we're talking about. The acronym stands for Asynchronous Javascript And XML and it already gives an idea of the fundamentals of the technology: something build on asynchronous server requests and responses . This may be clear to coders, but the best way to try explaining this to everyday internet users is showing some famous applications:
Gmail[2]: The first example? The most famous? The most used? Perhaps. Google aimed to impress both end users and geeks with it's free, long awaited email service. What's so unusual in this webmail application?
- An innovative and intuitive interface, more similar to a desktop application than a traditional webpage.
- Rich formatting through an effective, easy-to-use editor.
- Online spell checker.
- Instant (one click) email tagging, labels, contact groups etc.
- Email auto save.
Kiko[3]: This is a very neat online calendar, free to use and customizable. Features include:
- Multiple user/contacts/events administration.
- Personalization of the right click menu (it overrides your browser's default behavior).
- Drag and drop events across the calendar.
- Easily switch through different calendar views without any page refresh.
-
Writely[4]: An online word processor. Although it is not as advanced as its desktop's cousins, this is a truly admirable effort to port a desktop application to the web. The service is free for now and it allows users to create, edit, share and export text documents. Among its features there are:
- High degree of document formatting - modify font size, style, colors, alignment, insert images and links etc.
- Enhanced exporting options - it can create html documents, Word documents, zip files etc.
- Online spell-checker.
- Ability to easily share and publish your work.
This list can continue[5], as new "AJAX-powered" applications are created nearly every day.
How does it work?
Ajax[7] is fundamentally the union of various technologies - not something new by itself:
- (X)HTML, CSS, etc., used as presentation layer and format the information retrieved by the server: nothing special here.
- The XMLHttpRequest [8] object, which allows data exchange between client and server "silently", in an asynchronous way, without the need of refreshing and reloading a whole web page
- The Dom Object Model (DOM)[9], a Object-Oriented way to represent and access HTML or XML.
- XML and XSLT used for data interchange and manipulation
The magic is undoubtedly in the XMLHttpRequest object, originally invented by Microsoft as an ActiveX object and then made available as a standard Javascript class by Mozilla-based browsers. At least something which seems to be compatible with most browsers then.
A necessary step in any Javascript script using the XMLHttpRequest object would be something like:
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
In order to have an http_request object to use later on which is independent from the browser type.
Let's now examine an example of elementary Ajax application[10]. The following code is broken into different parts and commented, the uncommented source and a demo is available on degraeve.com[10].
For this simple example we need to create a simple server-side script which will be called by our Ajax application. The script can be in any language, this one is in Perl.
#!/usr/bin/perl -w
use CGI;
$query = new CGI;
$secretword = $query-param('w');
$remotehost = $query-remote_host();
print $query-header;
print "The secret word is $secretword and your IP is $remotehost.
Basically it creates a new CGI object named $query, used to access the parameter which will be passed by our submission form, "w", and get the user's IP address.
The script will then print a the page header and a phrase containing the word entered in our form and the user's IP address.
And here's the simple Ajax application:
Simple Ajax Example