A.J.A.X. versus Ajax and Ajax Effect

If there's one term that's over-used and misused in the world of ‘Web 2.0’, it's the term ‘Ajax’ and its cousin ‘AJAX’. Confused yet? So are most people, so not to worry - this article attempts to clear things up a little.

For those wondering whether to read further - if you're a web developer/coder, you might be interested in the acronym ‘AJAX’. If you're more of a designer or creative, you're probably more interested in the term ‘Ajax’ (note the uppercase A and the other lower case letters) and its companion term ‘Ajax Effects’.

Ajax (the technique)

In essence, Ajax is a technique, not a particular technology. It can be defined as:

“The art of trading data with a web server, and changing parts of a web page, without reloading the whole page”

In a normal Web application, users fill out form fields and click a Submit button. Then, the entire form is sent to the server, the server passes on processing to some back-end code, it sends back a completely new page. That page might be HTML with a new form with some data filled in or it might be a confirmation or perhaps a page with certain options selected based on data entered in the original form. Of course, while the script or program on the server is processing and returning a new form, users have to wait. Their screen will go blank and then be redrawn as data comes back from the server. This is where low interactivity comes into play - users don't get instant feedback and they certainly don't feel like they're working on a desktop application.

Ajax essentially puts some technology between your Web form and the server. When users fill out forms, that data is sent to some code within the browser and not directly to the server. Instead, this browser-side code grabs the data and sends a request to the server. While this is happening, the form on the users screen doesn't flash, blink, disappear, or stall. In other words, the code sends the request behind the scenes; the user doesn't even realise that the request is being made. Even better, the request is sent asynchronously, which means that the user doesn't wait around on the server to respond. So users can continue entering data, scrolling around, and using the application.

Then, the server sends data back to the browser code (still standing in for the Web form) which decides what to do with that data. It can update form fields on the fly, giving that immediate feeling to your application - users are getting new data without their form being submitted or refreshed. The code could even get the data, perform some calculations, and send another request, all without user intervention! It can talk back and forth with a server all it wants, without the user ever knowing about what's really going on. The result is a dynamic, responsive, highly-interactive experience like a desktop application, but with all the power of the Internet behind it.

Ajax Effects

Along with Ajax, we have ‘Ajax Effects’ (aka ‘Javascript Effects’). Such effects usually occur after an ‘Ajax’ call - they are visuals, animations… something you see. These effects are added to an application to direct the user's attention to something that has changed on the page. For example, if a form field is left empty, we might notify the user using an error message, next to the form field, to indicate that the field is required. There are also page animations - for instance, changes in opacity, height, width or position of objects a web page.

For many of web-sites, developers have resorted to Flash to create such effects. However, it is now possible to use language Javascript to create effects that can be just as creative as Flash. Javascript Libraries such as JQuery, Prototype, Mootools and YUI have been created to make such effects easier to implement and compatible across the major web-browsers.

A.J.A.X. (the acronym)

Now for the science bit - AJAX is an acronym for "Asynchronous JavaScript and XML". It is not one technology, programming language or web-plugin, but is actually a collection of technologies:

• XHTML (or HTML) is used for marking up content and displaying text and images in a web browser (such as Firefox, Opera, or Internet Explorer). XML, pre-formatted HTML, plain text, JSON and even EBML can also work with AJAX
• CSS and styling information. CSS stands for Cascading Style Sheets and is used to "style" a webpage. CSS can be code on a page, or an external file that contains instructions (code) that tells a browser how to display HTML. CSS can be used to set colours borders, text properties such as font, text size, text colour, styling and much more.
• The DOM (Document Object Model) manipulated through JavaScript to dynamically display and interact with the information presented
• The XMLHttpRequest object to exchange data asynchronously with the web server. In some Ajax frameworks and in some situations, an ‘iframe’ object is used instead of the XMLHttpRequest object to exchange data with the web server.

This collection of A.J.A.X. technologies are used to implement the technique of ‘Ajax’.

Reference

More Reading: Ajax: A New Approach to Web Applications

Well-known websites that use Ajax:

• Google Maps
• Google Mail (Gmail)
• Amazon (Product Search)
• Flixr (Slideshow)

Examples of Ajax visual effects:

• World of Merix Studio
• Utah Travel
• Slice Machine
• Fat-man Collective
• The Sixty One
• Eyedraw
• 9 Elements
• Unowhy?
• Howarths
• Paul J. Noble
• MTV Sticky
• Serial Cut™
• More...