Programming Ajax.

Asynchronous JavaScript And XML, or its acronym Ajax, is a Web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change. This is meant to increase the Web page's interactivity, speed, and usability.

The Ajax technique uses a combination of:

* XHTML (or HTML), CSS, for marking up and styling information.

* The DOM accessed with a client-side scripting language, especially ECMAScript implementations like JavaScript and JScript, 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.

* XML is commonly used as the format for transferring data back from the server, 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.

History

Most histories of Ajax start with Microsoft's initiatives in developing Remote Scripting. However, remote scripting was actually first introduced by Netscape in 1997 as part of its layer specification for the Netscape Communicator browser, Netscape 4.0. An early example of this technique is Valley of the Nile [1] (http://worldwideworlds.com/) an Ajax visual chat environment designed for Netscape 4.0 in 1997.

As documented in Netscape's specification of layer for Javascript 1.2 [2] (http://docs.sun.com/source/816-6408-10/layer.htm), the tag had an src attribute that could take any external URL, enabling asynchronous loading of content on an existing web page without requiring a full reload. At the time Netscape introduced layer, Microsoft was readying Internet Explorer 4.0, which implemented a totally different and incompatible document object model (DOM).

Microsoft's DOM relied on a new method, document. all, which was similar to the getElementById method that became part of the planned W3C DOM in 1998. This divergence in Javascript coincided with the beginning of Internet Explorer's ascendancy during the browser wars. As IE gained dominance, Netscape's influence on Javascript began to wane, and the layer tag was not accepted by developers who were struggling to write cross-browser DHTML to satisfy both Netscape and IE, each with about half of the market by 1999. By 2000, it was clear Netscape had lost the browser wars, and so layer fell out of use. As a consequence, most developers never bothered to learn or utilize the layer src method, and it took many years for remote scripting and DHTML--the combination that we now call Ajax--to once again come to the attention of developers as a tool for enhancing user interfaces for web applications.

After essentially killing off the Netscape remote scripting approach, Microsoft developed its own form of Remote Scripting, initially to support development of its web interface for Outlook. Microsoft's early form used a dedicated Java applet, preceding development of the XMLHttpRequest method that is used in Ajax applications today.

The web development community, first collaborating via the microsoft.public.scripting.remote newsgroup and later through blog aggregation, subsequently developed a range of techniques for remote scripting in order to enable consistent results across different browsers. Early examples are the IFRAME-based JSRS (http://www.ashleyit.com/rs/jsrs/test.htm) library from 2000, the introduction of the Image/Cookie (http://www.depressedpress.com/Content/Development/JavaScript/Articles/GIFAsPipe/Index.cfm) technique in 2000, and the JavaScript on Demand (http://dotvoid.com/view.php?id=13) technique in 2002.

In 2002, a user-community modification(http://groups.google.ca/group/microsoft.public.scripting.remote/browse_thread/thread/99b7e6152b45b2e7/6b368) to Microsoft Remote Scripting was made to replace the Java applet with XMLHttpRequest.

Remote Scripting Frameworks such as ARSCIF (http://arscif.dsi.unimi.it/) surfaced in 2003 not long before Microsoft introduced Callbacks in ASP.NET (http://msdn.microsoft.com/msdnmag/issues/04/08/CuttingEdge/)

Some early articles promoting Remote Scripting techniques:

* Microsoft Internet Developer Magazine (http://www.microsoft.com/mind/0498/cutting0498.asp) 1998

* ScottAndrew's XML-RPC example (http://www.scottandrew.com/xml-rpc/) 2001

* Apple Developer Connection (http://developer.apple.com/intemet/webcontent/iframe.html) 2002.

* Using the XML HTTP Request object (http://jibbering.eom/2002/4/httprequest.html) 2002-2006

Since XMLHttpRequest is now implemented across the majority of browsers in use, alternative techniques are used infrequently. However, they are still used where wide compatibility, small implementation, or cross-site access are required. One alternative, the SVGT protocol (http://networkimprov.net/airwrx/awscene.html), employs a persistent connection for continuous exchange between browser and service.

Pros, cons and criticism

Pros

Interactivity

Ajax applications are mainly executed on the user's machine, by manipulating the current page within their browser using document object model methods. Ajax can be used for a multitude of tasks such as updating or deleting records; expanding web forms; returning simple search queries; or editing category trees--all without the requirement to fetch a full page of HTML each time a change is made. Generally only small requests are required to be sent to the server, and relatively short responses are sent back. This permits the development of more interactive applications featuring more responsive user interfaces due to the use of DHTML techniques.

Portability

Ajax applications use well-documented features present in all major browsers on most existing platforms. Though this situation could feasibly change in the future, at the moment, Ajax applications are effectively cross-platform.

While the Ajax platform is more restricted than the Java platform, current Ajax applications effectively fill part of the one-time niche of Java applets: extending the browser with lightweight mini-applications.

Cons and criticism

Usability criticisms

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 (http://www.useit.com/alertbox/990530html)).

The different expectations between returning to a page which has been modified dynamically versus the return to a previous static page might be a subtle one. Users generally expect that clicking the back button in web applications will undo their last state 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 an element on the visible web page; it is possible to track user behaviour via callbacks which are called whenever the back button is pressed, restoring the application state that existed 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.

Usually overlooked, WAI is a concern. Most developers do not implement AJAX in a WAI-compatible manner.

Response-time concerns

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 [3] (http://www.xml.eom/pub/a/2005/08/22/ajax.html), smart preloading of data [4] (http://www.jonathanboutelle.com/mt/archives/2004/08/latency_must_di.html), and proper handling of the XMLHttpRequest object [5] (http://ajaxblog.com/archives/2005/06/01/async-requests-over-an-unreliable-network) users might experience delay in the interface of the web application, something which users might not expect or understand. [6] (http://www.lastcraft.com/blog/index.php?p=19) The use of visual feedback to alert the user of background activity and/or preloading of content and data are often suggested solutions to these latency issues.

In general the potential impact of latency has not been "solved" by any of the Public Domain AJAX toolkits and frameworks available today, such as the effect of latency variance over time [7] (http://www.sitepomt.comMogs/2006/02/10/ajaxlocamost/).

JavaScript

While no browser plug-in is required for Ajax, it requires users to have JavaScript enabled in their browsers. This applies to all browsers that support Ajax except for Microsoft Internet Explorer 6 and below which additionally requires ActiveX to be enabled along with ActiveScript. The XMLHTTPRequest object used in Internet Explorer is ActiveX. Security settings might cause Internet Explorer to not support Ajax (e.g.: ActiveScript or ActiveX might be disabled). It is possible to use inline frames (IFRAMEs) to avoid this ActiveX problem. Internet Explorer 7, however, exposes XMLHTTP object in the native browser API and hence does not need ActiveX to render AJAX sites.

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.

Name issues

There have been some critics of the term Ajax, claiming that Adaptive Path (http://www.adaptivepath.com/) (the consulting firm that coined the term [8] (http://news.com.com/2061-10798_3-5630188.html)) or other proponents are using it as a marketing vehicle for previously-used techniques [9] (http://www.25hoursaday.com/weblog/PermaLink.aspx?guid=018ea507-4a62-4493-b01b-321e3672d725) [10] (http://www.fiftyfoureleven.com/weblog/news-rants-and-ephemera/on-ajax-and-marketing-technologies) [11] (http://developers.slashdot.org/article.pl?sid=05/02/23/1859222&tid=189&tid=95&tid=217&tid=8) [12] (http://ln.hixie.ch/?start=1 111339822&coun1^1).

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.

Markup language vs programming

The common approach to apply Ajax usually involves extensive programming in JavaScript. Frameworks are then aimed to provide ready-to-use UI (e.g., in HTML or XUL) widgets and libraries to make programming in JavaScript easier.

The major advantage of the declarative approach is that non-programmers are allowed to define user interfaces with HTML-like markup language. The disadvantage is that pages are becoming harder and more obscure to design and maintain, as it becomes more sophisticated.

Browsers that support Ajax

(Note that this is a general list, and support of Ajax applications will depend on the features the browser supports.)

* Microsoft Internet Explorer version 5.0 and above, and browsers based on it (Mac OS versions not supported)

* Gecko-based browsers like Mozilla, Mozilla Firefox, SeaMonkey, Epiphany (web browser), Galeon andNetscape version 7.1 and above

* Browsers implementing the KHTML API version 3.2 and above, including Konqueror version 3.2 and above, and Apple Safari version 1.2 and above

* Opera browsers version 8.0 and above, including Opera Mobile Browser version 8.0 and above

* ICab version 3.0b352 and above

Browsers that do not support Ajax

This is a list of browsers that definitely do not support Ajax

* Opera 7 and below

* Microsoft Internet Explorer 4.0 and below

* Text-based browsers like Lynx and Links

* Browsers for the visually impaired (speech-synthesising, braille)

* Browsers made before 1997

See also

* Rich Internet Application 

* Single Page Application

* Client/SOA

* Progressive Enhancement

* Graceful degradation

* Open Ajax

* AjaXSLT

External links--Articles

* Ajax: A New Approach to Web Applications (http://www.adaptivepath.com/publications/essays/archives/000385.php), by Jesse James Garrett. The original article which coined the term.

* Why Ajax Matters Now (http://www.ok-cancel.com/archives/article/2005/09/whyajax-matters-now.html)

by Jesse James Garrett.

* Weighing the Alternatives (http://www.ajaxinfo.com/default~viewart~8.htm) How Ajax stacks up against competing RIA approaches.