The article where the term Ajax was first used was from http://www.adaptivepath.com/publications/essays/archives/000385.php This article was the first to put a handle on the new mode of programming for interactive web sites.
Well known Ajax applications are things like Google Maps. Ajax web applications now include email, word processors, spreadsheets, etc.
The previous way to create interactive web sites was to present the user with a form for them to fill out. The user would fill out the fields in the form and then click on the "Submit" button. The form data would then be sent to an application on the server that would perform the requested computation. The application would then send back to the requesting client a HTML page with the results.
The server application could be written in Perl, PHP, Python, Java, C, C++, etc.
Javascript (it started as Livescript) entered the scene and started to provide some front-end validation checking. This allowed the web client to validate some of the data prior to submitting it to the back-end server.
The Document Object Model or DOM is how a HTML web page is organized. It gives to Javascript a programmable interface to manipulate any of the components or objects on the page. The browser uses the DOM to prepresent the HTML data as a data tree. You can see how that tree is structured from this small web page.
<html>
<head>
</head>
<body>
<h1>Header</h1>
<p>Paragraph
<img src="someimage.jpg" />
</p>
</body>
</html>
The DOM can be manipulated through the Javascript "document" object, i.e.
document.getElementById("payment").value;
Javascript is the language of how you describe to the browser just how you want the DOM to be modified. If DOM is a tree, then Javascript is the web arborist's toolbox to be able to prune and graft the tree.
Cascading Style Sheets or CSS will be used to bring the eye candy to your web page.
The server side will be written in whatever language suits your needs. The main change to your server program is that instead of returning complete web pages, it will now just return the data that will need to be updated on the page.
The components of an Ajax application look like they follow in order, but the reality is that you will probably work on all of these areas in parallel. A real first step in a team approach would be to create a static XHTML page that will contain all of the elements that you might have on the page at any time. This target template would then be given to the design team to create the CSS for the layout. The web application team would use this template to work out how to generate the page. This might include server side programming along with Javascript client side programming.
Your web page should be written to be XHTML compliant. It will make the page less likely to be rendered by the browser in an unpredictable manner. A fully XHTML compliant page will also make sure that the DOM is not broken as well.
See XHTML 1.0 The Extensible HyperText Markup Language for more information.
The asynchronous communications magic is through a XMLHttpRequest object (Internet Explorer calls it something else).
var request = null;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}
if (null == request)
alert("Error creating request object!");
This object will send data to the server and then let you know when the server responds.
Remember, Javascript is not a standalone programming language. You are really extending the capabilities of the browser. The browser makes the calls to the server on the behalf of your Javascript code. If the browser is accepting cookies, then cookies will be returned with your XMLHttpRequest call.
The backend server can be written in any language that you choose. Some of the most common web server languages are: Java, Perl, PHP, Python and Ruby. This list is in alphabetical order only.
Cascading Style Sheets or CSS will be used to bring the eye candy to your web page. By using CSS you separate layout and display elements from pure content. A good example site for what can be done is CSS Zen Garden. This site show dozens, if not hundreds, of web page designs without changing one piece of XHTML code.
In the examples show during this presentation, the returned data has been in XML format. There really isn't any thing special about using XML. You could have returned the data as plain text. One of the advantages of XML over plain text is that XML will minimize the possibility of data ambiguity.
Another good candidate for data transfer format is JSON (JavaScript Object Notation). JSON has an advantage over XML in that JSON data IS Javascript. Basically the client side of an Ajax application is easier to write if the server will return JSON formatted data.
There are toolkits that provide a good deal of functionality when it comes to Ajax programming. Here are a few for you to take a look at:
Dojo allows you to easily build dynamic capabilities into web pages and any other environment that supports JavaScript sanely. You can use the components that Dojo provides to make your web sites more useable, responsive, and functional. With Dojo you can build degradeable user interfaces more easily, prototype interactive widgets quickly, and animate transitions. You can use the lower-level APIs and compatibility layers from Dojo to write portable JavaScript and simplify complex scripts. Dojo's event system, I/O APIs, and generic language enhancement form the basis of a powerful programming environment. You can use the Dojo build tools to write command-line unit-tests for your JavaScript code. You can use the Dojo package system to make your code easier to maintain and less platform dependent. The Dojo build process helps you optimize your JavaScript for deployment by grouping sets of files together and reuse those groups through "profiles".
Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.
script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.
What's inside? animation framework, drag and drop, Ajax controls DOM utilities, and unit testing.
It's an add-on to the fantastic Prototype framework.
An open-source JavaScript library for creating rich internet applications. Rico provides full Ajax support, drag and drop management and a cinematic effects library.
Rico depends on the prototype library.
Ajax web applications can be a boon to your user or customer. It can provide user interfaces that work and behave more like desktop applications. Your application can become cross platform in that it can "run" on any platform with a web browser.
While users may enjoy the benefits of an Ajax enabled application, you as a developer will have some additional pain. You will need to coordinate programming and communications between the server (in whatever language you choose) and the client JavaScript. You will need to plan for your choice of data format for data exchange. You will need to plan how the handle the style sheets to "beautify" your application. All in all, not difficult tasks, but ones that you cannot ignore.
In theray your application can run on any platform that supports an XHTML 1.0 compliant web browser with JavaScript enabled. The reality is that some browsers are more compliant than others. You will still need to verify that the JavaScript and the CSS behave as designed on each of the browsers you are targeting, or you will need to make sure that things fail gracefully.
You will have more work to do with less automated help, but over all it is worth taking on and learning Ajax programming.