Brief Overview


Ajax, short for Asynchronous JavaScript + XML, is a web development tool that is used to create web applications. Ajax allows a Web 2.0 like user interface and web experiences that behave much like desktop applications. This is done by creating a way for the client-side to interact with the server-side application to provide data to the user without the reload of a page. Ajax increases the usability of a site by improving user interaction and speed. Ajax in itself is not a technology. Actually, it is several technologies all put together to provide a dynamic application with a rich user interface.

Among these technologies are:
- XHTML and CSS – Presents Data
- Document Object Model (DOM) – Dynamic Display and Interaction
- XML and XSLT – Manipulates Data
- XMLHttpRequest – Asynchronous Data Retrieval
- JavaScript – The Glue that Binds It All Together

Principles of Ajax

  • The browser hosts an application, not content
  • The server delivers data, not content
  • User interaction with the application can be fluid and continuous
  • This is real coding and requires discipline


How does it work?

ajax.png
*Image courtesy of AdaptivePath.com

Explanation of the model:

Classic web application model (synchronous):

Most web pages use this two step method between the user and the server. The user's page is loaded (a form, for example), the user fills in the necessary fields and send the information to the server. During this brief period, the client sees a load page as the server processes the sent information. After the server is finished, it sends the finished product (which could be the next form) letting the user know that the last page has gone through properly. This is a repetitive process performed until the user has achieved their goal.

Ajax web application model (asynchronous):

Ajax has become more popular because it utilizes three layers, with the addition being client-side processing acting as a buffer between the user and the server. This allows the user's page to stay active while they make changes. Although the transfer between the user and the client-side processing communicates at different times in comparison to the client-side processing and the server, there is still a constant communication that allows the live changes to be made. This gets rid of the need for load times.

History


In 2005, information architect Jesse James Garrett, founder and president of Adaptive Path, first coined the term Ajax. Though the term and the technique gained in popularity shortly after James' article, he did not invent it. Ajax has been evolving since the mid-1990's, but in recent years has become a "new" approach for designers and users. The development of Ajax came about because of a desire for more user-oriented interfaces that were faster than HTML/HTTP web pages. Many techniques came together to form Ajax, here is a brief history.


Problems with Ajax


There are some problems with using Ajax. Because Ajax doesn't record history on the browser like other applications there is difficulty bookmarking, the "Back" function and certain URL addressing issues. Google Maps and IFRAMEs have offered temporary solutions. However, the biggest problem, according to Ajax opposers is that it has difficulities with compatibility and creates problems in navigation on the web. Due to these problems, some argue that Ajax is not integrating well into the current system.

Benefits of Ajax


Ajax is an exciting development for user-interactive web pages. It is the next revolution in getting the user involved with the technology on a more personal basis. Without the need to reload entire pages, the web experience is faster, more efficient and more enjoyable for the user. On the otherside of the technology, programmers are excited about the new opportunities to build web pages that are innovative and unique. With the Ajax web development tool, they can mix applications in ways that work best for them and their individual clients.

Who uses Ajax?


Some of the most well-known users of Ajax are:

Google – Every major product Google has released in the last year utilizes Ajax. This includes, but is not limited to: Orkut, Gmail, Google Groups, Google Suggest, and Google Maps.
Flickr – Photo Gallery Service
A9 – Amazon’s Newest Search Engine
YahooYahoo Instant SearchYahoo PhotosYahoo Tech!


Live Example:


We have created a working application that utilizes Ajax. This application improves the user interface by providing rich Ajax based live data manipulation. The application is named PaCDB – Project and Client Database Manager. PaCDB manages projects and clients for any given programmer. The application utilizes Ajax to provide live sorting, adding of clients and projects, live deletion, and inline editing of data. You can view PaCDB at: http://www.mattstamant.com/pm/

Related Terms:


Asynchronous
CSS
Document Object Model
Dynamic HTML
JavaScript
Web 2.0
XHTML
XML
XMLHttpRequest
XSLT

Resources:


If you would like to dive in to the cutting edge world of Ajax, below are some links you might find useful:
Ajax Tutorial
Ajax Help for Newbies
Ajaxian
Ajax Matters
Ajax Impact
Ajax Developer Resource Center