Ajax (programming)

From Wikipedia, the free encyclopedia.

(Redirected from AJAX)
Jump to: navigation, search

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

  • XHTML (or HTML) 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 format will work, including preformatted HTML, plain text, JSON and even EBML)

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.

Contents

[edit]

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's 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 by sending a new web page back. Because the server must submit a new page each time, applications run 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 allows 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 noticeably 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 to allow 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. In addition, Mozilla/Gecko support of the feature had matured to the point where it was widely and easily usable.

[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 across the network. Also, because AJAX technologies are open, they are supported in all Javascript enabled browsers regardless of operating system. Competing technologies like Macromedia's Shockwave have plugins for Linux only recently.

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; a number of programming libraries have become available as Ajax has matured, 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.

Some browsers do not support JavaScript or ActiveX. Security settings might cause even Internet Explorer to not support Ajax (ex: JavaScript might be disabled). This is the major con for Ajax. This is comparable to the days of DHTML when it was not supported by many browsers.

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.

However, we can also argue that traditional web applications made using standard HTML do not handle the back button correctly either. Imagine a user deleting an email in a webmail software; the back button would again show that very email, but in reality it has been deleted already. As opposed to standard HTML, Ajax can even help avoid such problems by dynamically changing the browser history.

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] The use of visual feedback to alert the user of background activity and/or preloading of content and data are often suggested solutions to latency issues with AJAX.

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 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, 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 get 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 used.
  • 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 that support Ajax

[edit]

Example applications

[edit]

External links

[edit]

Articles

[edit]

Tutorials/Examples

[edit]

Portals

[edit]

Podcasts

  • Audible Ajax An Ajaxian podcast, including interviews and news.
[edit]

Forums

[edit]

Presentations

[edit]

Libraries/Scripts

  • AjaxGear A simple and cross-browser AJAX toolkit.
  • AjaxToolbox A wrapper around AJAX functionality with a simpler interface and added features like timeouts, activity monitoring, simultaneous requests, error handling, etc.
  • AJAX Proxy HTTP proxy to help simulate impact of network latency / failure on AJAX apps. More detail here.
  • 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.
  • AJAX Samples with Server Code Shows various data access techniques with JavaScript & Java source. Includes a PowerPoint covering AJAX & development issues
  • CGI::Ajax wraps Perl functions with Javascript callbacks to simplify writing Ajax applications in Perl.
  • CPAINT (Cross-Platform Asynchronous INterface Toolkit)
  • EBA: Web ComboBox V3 A Smarter Ajax Cross-Browser Lookup Control
  • Dojo Toolkit cross-browser AJAX/DHTML toolkit for building dynamic Web UIs.
  • GLM-AJAX Framework
  • JavaScript auto-complete LGPL'ed Google Suggest-like function with Unicode support.
  • jsquery AJAX javascript ResultSet - Adds easy dynamic data queries to web pages without requiring page submission.
  • MochiKit A lightweight Javascript library
  • libXmlRequest Cross-browser library that supports pooling of XML objects and response caching.
  • Prototype Open-source object-oriented JavaScript framework with extensive Ajax support.
  • Rico An open-source JavaScript library which provides full Ajax support, drag and drop management and a cinematic effects library.
  • Sajax Simple Ajax toolkit
  • Sarissa A cross-browser wrapper for native XML APIs
  • Script.aculo.us Javascript library for visual effect (in conjunction with the Prototype JavaScript library)
  • Suggest Framework Easy-to-use JavaScript class for Google Suggest-like functionality
  • AutoSuggestBox Open Source .Net component for Google Suggest-like functionality
  • TIBCO General Interface a mature AJAX framework and IDE. GUI controls (including charts), built-in data caching, and communication objects.
  • ThyAPI a complete DHTML library with several widgets, that also use Ajax
  • WinLIKE Ajax reload improvements through usage of DHTML windows
  • XHRConnection Manage the XMLHTTPRequest Object
  • Alternative AJAX techniques AJAX without XMLHttpRequest, frame, iframe, Java or Flash
  • AJAX javascript only AJAX using javascript, without XMLHttpRequest, frame, iframe, Java or Flash
  • Zimbra AJAX Tk Open source SWT like AJAX Tool Kit
[edit]

Libraries/Scripts with server-side integration

[edit]

Multiplatform

  • Bindows Object-oriented platform (SDK) for developing AJAX applications, zero-footprint, very rich & lean.
  • CPAINT A fully featured cross-platform (PHP / ASP) AJAX library.
  • Backbase Community Edition includes all presentation client (Ajax) functions and full utilization of BXML (B-tags).
  • JackBe AJAX for the Enterprise.
  • WebORB by Midnight Coders. .NET and Java Server platform for Ajax-based applications.
  • GeneXus generates AJAX based web applications, generating JAVA/J2EE web applications and .NET/ASP.NET web applications
  • eBusiness Applications (EBA) JSP, PHP, Classic ASP, and ASP.NET Components for editing and searching large datasets. XML based access to remote datasets.
[edit]

ColdFusion

  • CFAjax ColdFusion custom tag providing simple Ajax integration
[edit]

.Net

[edit]

Java

  • AjaxAnywhere an open source project targeted for existing JSP and JSF applications upgrade.
  • 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.
  • jsquery AJAX javascript ResultSet - Adds easy dynamic data queries to web pages without requiring page submission.
  • jWic an open source web application framework which uses AJAX to synchronize the client with the server state.
  • JSON-RPC is a JavaScript-to-Java bridge that allows the invocation of Java methods from JavaScript via a servlet interface.
  • JRP (JSON-RPC Page) is a JSP tag library for creating RPC methods for both JSON-RPC and XML-RPC.
  • ICEfaces is a JSF framework for easily developing AJAX applications.
  • ThinkCAP JX is a RAD environment for AJAX, J2EE, and Open Source that includes a 3-tier client/server event model to minimize writing JavaScript.
  • Pushlets provides a LGPL publish and subscribe interface that works in Java on the server side and javascript on the client. The API works in stream, pull, and poll modes. Events can be unicast or multicast.
[edit]

Perl

  • Catalyst A Perl-based framework with AJAX support
  • CGI::Ajax A Perl-specific system for writing AJAX or DHTML-based web applications
[edit]

PHP

  • HTML_Ajax PHP and JavaScript Ajax
  • XOAD (formerly NAJAX) PHP based AJAX/XAP object oriented framework.
  • xajax PHP Ajax toolkit
  • sajax Simple Ajax Toolkit by ModernMethod
  • pajax Pajax toolkit
  • Class Ajax Customize JavaScript XML HTTP Request Object components from PHP.
  • Pajaj PAJAJ: PHP Asynchronous Javascript and JSON
  • symfony PHP framework with AJAX integration (based on Rails and script.aculo.us)
[edit]

Python

[edit]

Ruby

Retrieved from "http://en.wikipedia.org/wiki/Ajax_%28programming%29"
Personal tools