Ajax (programming) · 13 September 2005, 13:41 by Admin
* HTML (or XHTML) and CSS for presenting information
* 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.
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.
* 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.)
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 . 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.
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.
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.)
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 , smart preloading of data , and proper handling of the XMLHttpRequest object  users might experience delay in the interface of the web application, something which users might not expect or understand. 
There have been some critics of the term Ajax, claiming that Adaptive Path (the consultancy firm that coined the term ) or other proponents are using it as a marketing vehicle for previously-used techniques    .
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).
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.
Browsers which support Ajax
* Apple Safari 1.2 and above
* 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
Examples of Ajax applications
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).
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.
* 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
* Implementing Ajax in ASP.NET using the Ajax.NET wrapper by Karl Seguin
* Ajax Matters Informational site about Ajax
* Ajax Patterns Collection of Ajax design principles and patterns
* CPAINT (Cross-Platform Asynchronous INterface Toolkit)
* Dojo Toolkit
* GLM-AJAX Framework
* Sajax Simple Ajax toolkit
* Sarissa a cross-browser wrapper for native XML APIs
* ThyAPI a complete DHTML library with several widgets, that also use Ajax
* WinLIKE Ajax reload improvements through usage of DHTML windows
Libraries/Scripts with server-side integration
* 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
* 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
* xajax PHP Ajax toolkit
* 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.