Knowledge Base

Ajax (programming) · 13 September 2005, 13:41 by Admin

Asynchronous JavaScript and XML, or Ajax, is a web development technique for creating interactive web applications using a combination of:

* HTML (or XHTML) and CSS for presenting information

* The 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. (XML is commonly used, although any text format will work, including preformatted HTML, plain text, and JSON)

Like DHTML, LAMP, or SPA, Ajax is not a technology in itself, but a term that refers to the use of a group of technologies together. In fact, derivative/composite technologies based substantially upon Ajax, such as AFLAX are already appearing.

Ajax applications use web browsers that support the above technologies as a platform to run on. Browsers that support these technologies include Microsoft Internet Explorer, Mozilla Firefox, Opera, Konqueror and Apple Safari.

Comparison to traditional web applications

Ajax applications look almost as if they reside on the user’s machine, rather than across the Internet on a server. The reason: pages get updated, not entirely refreshed.

“Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine instead,” wrote Jesse James Garrett, in the essay that first defined the term. “Any response to a user action that doesn’t require a trip back to the server—such as simple data validation, editing data in memory, and even some navigation—the engine handles on its own. If the engine needs something from the server in order to respond—if it’s submitting data for processing, loading additional interface code, or retrieving new data—the engine makes those requests asynchronously, usually using XML, without stalling a user’s interaction with the application.”

Traditional web applications essentially submit forms, completed by a user, to a web server. The web server responds back by sending a new web page. Because the server must submit a new page each time, applications runs more slowly and awkwardly than their native counterparts.

Ajax applications, on the other hand, can send requests to the web server to retrieve only the data that is needed, usually using SOAP or some other XML-based web services dialect. On the client, JavaScript processes the web server response. The result is a more responsive interface, since the amount of data interchanged between the web browser and web server is vastly reduced. Web server processing time is also saved, since much of it is done on the client.

* Image showing how a traditional web application handles user interaction comparing it to how an Ajax application handles it.

* Image showing how the different components of Ajax applications interact with each other comparing it to how traditional web applications do it.

(Both images come from the Adaptive Path article by Jesse James Garrett, cited in the External Links section below.)

As an example of how Ajax works, consider a photography website that allow users to enter captions. With a traditional web application, the entire page including the image would need to be refreshed. With Ajax technologies, DHTML might replace just the caption text, resulting in a noticably smoother transaction. (This example is actually how Flickr allows users to change photo captions.)
[edit]

Adoption

The techniques have been in use since around 1998. The first component which allowed client-side script to issue HTTP requests (XMLHTTP) was written by the Outlook Web Access team, which is a part of Microsoft Exchange Server, and it soon became a part of the Internet Explorer 4.0 installation [1]. Some observers consider the Outlook Web Access to be the first successful commercial Ajax application and others soon followed including Oddpost’s web mail product. However, in early 2005 a number of seminal events have popularised the technique. First, Google used asynchronous communication as a basis for prominent interactive applications including Google Groups, Google Maps, Google Suggest and Gmail. Second, the name Ajax was coined in Ajax: A New Approach to Web Applications, which quickly came into popular use and helped raise consciousness of the technique.
[edit]

Pros, cons and criticism

The biggest advantage of using Ajax technologies is that data can be manipulated without having to render the entire page again in the web browser. This allows web applications to respond more quickly to many types of user interaction and to avoid repeatedly sending unchanged information back and forth across the network.

While no browser plug-in is required, Ajax requires users to have JavaScript enabled in their browsers. As with DHTML applications, Ajax applications must be tested rigorously to deal with the quirks of different browsers and platforms. As Ajax has matured a number of programming libraries have become available that can help ease this task. Likewise, techniques have been developed to assist in designing applications which degrade gracefully and offer alternative functionality for users without JavaScript enabled.

One major complaint voiced against the use of Ajax in web applications is that it might easily break the expected behavior of the browser’s back button (see Jakob Nielsen’s 1999 Top-10 New Mistakes of Web Design). Returning to the previous state may not be possible when a page is updated dynamically, since browsers typically record only static page visits in their history lists. The distinction between a static page, loaded in its entirety, and a page which has been modified dynamically might be a subtle one; users generally expect that clicking the back button in web applications will undo their last change and in Ajax applications this might not be the case. Developers have implemented various solutions to this problem, most of which revolve around creating or using invisible IFRAMEs to invoke changes that populate the history used by a browser’s back button. (Google Maps, for example, performs searches in an invisible IFRAME and then pulls results back into the Ajax element on the visible web page; the Dojo toolkit allows tracking of Ajax requests via callbacks which are called whenever the back button is pressed, restoring the application state that existed at the time.)

A related issue is that the use of dynamic web page updates makes it difficult for a user to bookmark a particular state of the application. Solutions to this problem have likewise begun to appear, many of which use the URL fragment identifier (commonly known as the anchor, or the portion of the URL after the ”#”) to keep track of, and allow users to return to, the application in a given state. (Many browsers allow JavaScript scripts to update the anchor dynamically, which allows the Ajax application to update it in parallel with the contents of the display.) These solutions also address many of the issues related to lack of back button support.

Network latency — or the interval between user request and server response — needs to be considered carefully during Ajax development. Without clear feedback to the user [2], smart preloading of data [3], and proper handling of the XMLHttpRequest object [4] users might experience delay in the interface of the web application, something which users might not expect or understand. [5]

There have been some critics of the term Ajax, claiming that Adaptive Path (the consultancy firm that coined the term [6]) or other proponents are using it as a marketing vehicle for previously-used techniques [7] [8] [9] [10].
[edit]

Accessibility

Using Ajax technologies in web applications provides many challenges for developers interested in also adhering to WAI accessibility guidelines. Developers need to provide fallback options for users on other platforms or browsers, as most methods of Ajax implementation rely on features only present in desktop graphical browsers.

Web developers use Ajax in some instances to provide content only to specific portions of a web page, allowing data manipulation without incurring the cost of re-rendering the entire page in the web browser. Non-Ajax users would optimally continue to load and manipulate the whole page as a fallback, allowing the developers to preserve the experience of users in non-Ajax environments (including all relevant accessibility concerns) while giving those with capable browsers a much more responsive experience.

Many popular applications using the concept have been created, including Google Mail and Google Maps, and Flickr. These high-profile examples of Ajax usage demonstrate the flexibility and utility of the web programming model. Google’s competitors have recently released similar Ajax-based websites (such as America Online’s AIM Mail and Microsoft’s Virtual Earth).
[edit]

Search Engine / Deeplinking

Several approaches are available for making your Ajax application accessible to search engines; these approaches differ in the level of indexing, which is obtainable and how this is achieved. For certain sites, it is not necessarily a requirement that every part of the site can be indexed by search engines. A site which provides a web-based e-mail service, for example, does not require every single piece of information on the site to be indexed by a search bot. Other sites, however, do require that every piece of information can easily be found and indexed by search engines. A web site with information about the courses provided by a university is one example. The following strategies can be used to getting a SPI indexed by search engines:

* Lightweight Indexing: no structural changes are made to your site; existing tags such as meta, title and h1 are leveraged.

* Extra Link Strategy: extra links are placed on the site, which search bots can follow and thereby index the whole site.

* Secondary Site Strategy: a secondary site is created, which is fully accessible to the search engine.

[edit]

Browsers which support Ajax

* Apple Safari 1.2 and above

* Konqueror

* Microsoft Internet Explorer (or derived browsers) 4.0 and above

* Mozilla Firefox 1.0 (or derived browsers) and above

* Netscape 7 and above

* Opera 7.6 and above

[edit]

Examples of Ajax applications
[edit]

Free to use

Live Ajax on linked site (no sign-up needed):

* AJAX Chatroom

* Google Maps Interactive maps (by Google).

* Google Suggest Live retrieval of type-ahead suggestions for search terms (by Google).

* Map of Switzerland (map.search.ch): The first interactive map (by Search.ch).

* Protopage Highly-configurable personal start page.

* Kiko Online calendar, click on “Try a demo…” to see Ajax. Note: saved accounts require registration.

Sign-up required to see Ajax:

* Flickr Photo management (by Ludicorp—now a Yahoo! company). Note: “Exploring” does not require sign-in.

* ajax im Instant messenger application. The live demo requires very quick sign-in.

* Backpack Personal information management (by 37Signals).

* BlinkList Personal and social bookmarking (by MindValley).

* Gmail Email application (by Google).

* Tadalist Simple web-based sharable to-do lists (by 37Signals).

[edit]

Pay to use

Live Ajax on linked site (no sign-up needed):

* Currently, all free commercial demos require registration (see below).

Sign-up required to see Ajax:

* 24SevenOffice ERP/CRM application using Ajax. Free demo—signup required.

* Basecamp Project management (by 37Signals). Free minimal-access accounts available.

* Blinksale Invoicing. Free minimal-access accounts available.

* NetSuite ERP application has Ajax powered “Dashboard”. Free demo—signup required.

External links
[edit]

Articles

* Ajax: A New Approach to Web Applications, by Jesse James Garrett. The original article which coined the term

* Ajax: Usable Interactivity with Remote Scripting Introduction on how to use Ajax

* Guide to Using XMLHttpRequest (with Baby Steps) Tutorial by Bill Bercik introducing XmlHttpRequest

* Ajax’s Achilles Heel maps.google.com with Javascript disabled

* Implementing Ajax in ASP.NET using the Ajax.NET wrapper by Karl Seguin

[edit]

Portals

* Ajax Matters Informational site about Ajax

* Ajax Patterns Collection of Ajax design principles and patterns

[edit]

Libraries/Scripts

* AJForm an AJAX Forms toolkit which seamlessly submits data from any given form in an HTML page, then sends the data to any specified JavaScript function.

* CPAINT (Cross-Platform Asynchronous INterface Toolkit)

* Dojo Toolkit

* GLM-AJAX Framework

* MochiKit A lightweight Javascript library

* Rico An open-source JavaScript library which provides full Ajax support, drag and drop management and a cinematic effects library.

* Prototype Open-source object-oriented JavaScript framework with extensive Ajax support.

* Sajax Simple Ajax toolkit

* Sarissa a cross-browser wrapper for native XML APIs

* Suggest Framework Easy-to-use JavaScript class for Google Suggest-like functionality

* ThyAPI a complete DHTML library with several widgets, that also use Ajax

* WinLIKE Ajax reload improvements through usage of DHTML windows

[edit]

Libraries/Scripts with server-side integration
[edit]

.Net

* Ajax.NET a free Microsoft .NET library

* Aspects of Ajax Free Ajax Engine using Ajax based on WebServices and a Blog

* Bitkraft Integrated Client/Server approach to Ajax Development in the ASP.NET environment

* PowerWEB LiveControls for ASP.NET Ajax for Visual Studio ASP.NET

[edit]

Java

* AjaxTags a free set of JSP tags that simplify the use of Ajax technology in JavaServer Pages.

* DWR a free (Apache Licensed) Java library

* Echo2 a free Java Ajax library with a thick client API

* Guise an Internet application framework that handles AJAX automatically without the need to write JavaScript or HTML.

[edit]

PHP

* HTML_Ajax PHP and JavaScript Ajax

* NAjax PHP library that aims to connect JavaScript and PHP. It acts as a proxy that maps PHP objects to JavaScript and vice versa.

* xajax PHP Ajax toolkit

[edit]

Multiplatform

* Backbase Community Edition includes all presentation client (Ajax) functions and full utilization of BXML (B-tags).

* WebORB by Midnight Coders. .NET and Java Server platform for Ajax-based applications.