php-deluxe.net - description Ajax programming

Ajax (programming)

: This page is about the web application architecture. For other Ajax references, see Ajax.

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

HTML (or XHTML) and Cascading Style Sheets for presenting information

The Document Object Model manipulated through JavaScript to dynamically display and interact with the information presented

The XMLHTTP 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 (software bundle), or Single Page Application, 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.

= 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 doesnt 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 its submitting data for processing, loading additional interface code, or retrieving new data the engine makes those requests asynchronously, usually using XML, without stalling a users 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.

[http://www.adaptivepath.com/images/publications/essays/ajax-fig1_small.png Image] showing how a traditional web application handles user interaction comparing it to how an Ajax application handles it.

[http://www.adaptivepath.com/images/publications/essays/ajax-fig2_small.png 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 Ajax (programming)#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.)

= Adoption =

The techniques have been in use since around 1998. The first component to allow client-side script to issue HTTP requests ( . Second, the name Ajax was coined in [http://www.adaptivepath.com/publications/essays/archives/000385.php 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.

= 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 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 graceful degradation 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 s 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 [http://dojotoolkit.org/ 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 Uniform Resource Locator 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 [http://www.xml.com/pub/a/2005/08/22/ajax.html], smart preloading of data [http://www.jonathanboutelle.com/mt/archives/2004/08/latency_must_di.html], and proper handling of the XMLHttpRequest object [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. [http://www.lastcraft.com/blog/index.phpp=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 latency issues with AJAX.

There have been some critics of the term Ajax, claiming that [http://adaptivepath.com/ Adaptive Path] (the consultancy firm that coined the term [http://news.com.com/2061-10798_3-5630188.html]) or other proponents are using it as a marketing vehicle for previously-used techniques [http://www.25hoursaday.com/weblog/PermaLink.aspxguid=018ea507-4a62-4493-b01b-321e3672d725] [http://www.fiftyfoureleven.com/weblog/news-rants-and-ephemera/on-ajax-and-marketing-technologies] [http://developers.slashdot.org/article.plsid=05/02/23/1859222&tid=189&tid=95&tid=217&tid=8] [http://ln.hixie.ch/start=1111339822&count=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.

Many popular applications using the concept have been created, including Google Mail, Google Maps, and [http://virtualearth.msn.com/ 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 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.

= Browsers that support Ajax =

Apple Computer Safari (web browser) 1.2 and above

Konqueror

Microsoft Internet Explorer (and derived browsers) 4.0 and above

Mozilla/Mozilla Firefox (and derived browsers) 1.0 and above

Netscape 7.1 and above

Opera (web browser) 7.6 and above

== Example Applications ==

*List of websites using Ajax

== External links ==

== Articles ==

*[http://www.robsonjunior.com.br/post/juntao-ajax/ Compilation of AJAX articles], by Robson Junior *[http://www.adaptivepath.com/publications/essays/archives/000385.php Ajax: A New Approach to Web Applications], by Jesse James Garrett. The original article which coined the term *[http://www.mousewhisperer.co.uk/ajax_page.html Beginners Guide to Ajax] A quick no-nonsense tour of the fundamental Ajax principles, with example code *[http://www.sitepoint.com/article/remote-scripting-ajax Ajax: Usable Interactivity with Remote Scripting] Introduction on how to use Ajax *[http://www.webpasties.com/xmlHttpRequest/ Guide to Using XMLHttpRequest (with Baby Steps)] Tutorial by Bill Bercik introducing XmlHttpRequest *[http://www.developerfusion.co.uk/show/4704/ Implementing Ajax in ASP.NET] using the Ajax.NET wrapper by Karl Seguin *[http://marc.theaimsgroup.com/l=php-general&m=112198633625636&w=2 Rasmus 30-Second AJAX Tutorial] A simple but functional example and ad hoc tutorial posted by Rasmus Lerdorf of PHP fame. *[http://developer.mozilla.org/en/docs/AJAX:Getting_Started AJAX:Getting Started] Article by Mozilla.org. *[http://hinchcliffe.org/archive/2005/08/18/1675.aspx State of Ajax: Progress, Challenges, and Implications for SOAs] *[http://htmatters.net/htm/1/2005/06/AJAX-Achilles-Heel.cfm Ajax s Achilles Heel] maps.google.com with Javascript disabled *[http://www.ok-cancel.com/archives/article/2005/09/why-ajax-matters-now.html Why Ajax Matters Now] by Jesse James Garrett *[http://beta.news.com.com/Ajax+gives+software+a+fresh+look/2100-1007_3-5886709.html Ajax gives software a fresh look] Blurring the line between desktop and Web applications. *[http://www-128.ibm.com/developerworks/library/j-ajax1/ Ajax for Java developers: Build dynamic Java applications] IBM developerWorks Article by Philip McCarthy *[http://www.softwaresecretweapons.com/jspwiki/Wiki.jsppage=JavascriptRefactoringForSaferFasterBetterAJAX Javascript Refactoring for safer, faster, better AJAX] by Pavel Simakov. *[http://www.objectgraph.com/dictionary/how.html How does it work] XMLHttpRequest article includes connecting to a database.

== Portals ==

*[http://www.ajaxpatterns.org Ajax Patterns] Collection of Ajax design principles and patterns *[http://www.ajaxgoals.com/ Ajax Goals] Ajax Community resources, Tools, Books, and Articles *[http://www.ajaxian.com Ajaxian] Ajax Community *[http://www.ajaxinfo.com/ Ajax Info] Ajax resources, components, blogs, and articles *[http://www.ajaxmatters.com/ Ajax Matters] Informational site about Ajax *[http://www.gxajax.com GeneXus and Ajax] *[http://www.ajaxreview.com/ AJAX Review] Covers AJAX applications and development *[http://www.blinklist.com/tag/ajax/ AJAX Discovery Page] Public list of the newest and most popular ajax sites *[http://ajaxblog.com Ajax Blog] HTML, Javascript and XML coding techniques

== Podcasts ==

*[http://www.ajaxian.com/archives/podcast/index.html Audible Ajax] An Ajaxian podcast, including interviews and news

== Presentations ==

[http://weblog.infoworld.com/udell/2005/05/25.html Jon Udell of InfoWorld Lab s] 8-minute webcast on AJAX encapsulation with TIBCO General Interface

[http://www.altien.com/WebXtra_AJAX Altien WebXtra for FileNet P8] Screen cam of an AJAX based RIA for ECM platform FileNet P8 (turn off popup blockers).

== Libraries/Scripts ==

*[http://developer.tibco.com/ TIBCO General Interface] is a very mature AJAX framework and IDE that was originally brought to market in 2001. Dozens of GUI controls (including charts), built-in data caching, and communication objects provide the foundation for your applications and for the visual tools TIBCO provides, (yes the IDE is an AJAX app that runs in the browser too!) *[http://www.AjaxToolbox.com/ AjaxToolbox] A wrapper around AJAX functionality with a simpler interface and added features like timeouts, activity monitoring, simultaneous requests, error handling, etc. *[http://sourceforge.net/project/showfiles.phpgroup_id=121636&package_id=159929 AJAX Proxy] HTTP proxy to help simulate impact of network latency / failure on AJAX apps. More detail [http://ajaxblog.com/archives/category/ajax-proxy/ here]. *[http://redredmusic.com/brendon/ajform/ 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. *[http://www.clearnova.com/ajax AJAX Samples with Server Code] Shows various data access techniques with JavaScript & Java source. Includes a PowerPoint covering AJAX & development issues *[http://search.cpan.org/searchquery=cgi%3A%3Aajax&mode=module CGI::Ajax] wraps Perl functions with Javascript callbacks to simplify writing Ajax applications in Perl. *[http://cpaint.sourceforge.net/ CPAINT] (Cross-Platform Asynchronous INterface Toolkit) *[http://developer.ebusiness-apps.com/technologies/webdevelopment/codeandcomponents/ebawebcombov3/default.htm EBA: Web ComboBox V3] A Smarter Ajax Cross-Browser Lookup Control *[http://dojotoolkit.org/ Dojo Toolkit] cross-browser AJAX/DHTML toolkit for building dynamic Web UIs. *[http://sourceforge.net/projects/glm-ajax GLM-AJAX Framework] *[http://mochikit.com/ MochiKit] A lightweight Javascript library *[http://prototype.conio.net/ Prototype] Open-source object-oriented JavaScript framework with extensive Ajax support. *Rico (Ajax) An open-source JavaScript library which provides full Ajax support, drag and drop management and a cinematic effects library. *[http://www.modernmethod.com/sajax/ Sajax] Simple Ajax toolkit *[http://sarissa.sourceforge.net/doc/ Sarissa] A cross-browser wrapper for native XML APIs *[http://script.aculo.us/ Script.aculo.us] Javascript library for visual effect (in conjunction with the Prototype JavaScript library) *[http://www.sourceforge.net/projects/suggest Suggest Framework] Easy-to-use JavaScript class for Google Suggest-like functionality *[http://www.travelope.com/DeveloperCorner/Default.aspx AutoSuggestBox] Open Source .Net component for Google Suggest-like functionality *[http://thyapi.thyamad.com ThyAPI] a complete DHTML library with several widgets, that also use Ajax *[http://www.ceiton.net/winlike/73_sample_xmlhttprequest.html WinLIKE] Ajax reload improvements through usage of DHTML windows *[http://xhrconnection.sutekidane.net XHRConnection] Manage the XMLHTTPRequest Object *[http://zingzoom.com/ajax/ajax_with_image.php Alternative AJAX techniques] AJAX without XMLHttpRequest, frame, iframe, Java or Flash *[http://www.nicon.nl/rsjsdef/nwxhttp.html AJAX javascript only] AJAX using javascript, without XMLHttpRequest, frame, iframe, Java or Flash *[http://www.zimbra.com Zimbra AJAX Tk ] Open source SWT like AJAX Tool Kit

== Libraries/Scripts with server-side integration ==

*[http://www.dotnetremoting.com] Rich Web Client SDK For ASP.NET

=== Multiplatform ===

=== ColdFusion ===

*[http://www.indiankey.com/cfajax/ CFAjax] ColdFusion custom tag providing simple Ajax integration

=== .Net ===

*[http://ajaxpro.schwarz-interactive.de/ Ajax.NET Professional] the first and free Microsoft .NET library *[http://ajaxaspects.blogspot.com Aspects of Ajax] Free Ajax Engine for ASP.NET and JavaScript focusing on WebServices *[http://atlas.asp.net/ Atlas] Microsoft ASP.NET 2.0 AJAX platform. *[http://www.tiggrbitz.com Bitkraft] Integrated Client/Server approach to Ajax Development in the ASP.NET environment *[http://www.borgworx.net BorgWorX Ajax.NET] a free .NET library (built on the *[http://ajax.schwarz-interactive.de/ Ajax.NET] source code) including several Ajax based easy-to-use ASP.NET WebControls and JavaScript library see [http://examples.borgworx.net BorgWorX Ajax.NET Examples] *[http://www.dart.com/powerweb/livecontrols.asp PowerWEB LiveControls for ASP.NET] Ajax for Visual Studio ASP.NET *[http://castleproject.org/index.php/MonoRail MonoRail] uses the prototype library by Sam Stephenson *[http://www.comfortasp.de ComfortASP.NET] AJAX based framework to enhance ASP.NET Pages *[http://csharpedge.blogspot.com/2005/10/outpost-post-back-over-xmlhttp.html OutPost] Post Back Over Xmlhttp for ASP.NET WebForms *[http://www.dotnetremoting.com] Commercial Rich Web Client SDK For ASP.NET

==== Java ====

*[http://ajaxanywhere.sourceforge.net AjaxAnywhere] an open source project targeted for existing JavaServer Pages and Java Server Faces applications upgrade. *[http://ajaxtags.sourceforge.net/ AjaxTags] a free set of JavaServer Pages tags that simplify the use of Ajax technology in JavaServer Pages. *[http://www.getahead.ltd.uk/dwr/ DWR] a free (Apache Licensed) Java programming language library *[http://www.nextapp.com/products/echo2 Echo2] a free Java programming language Ajax library with a thick client API *[http://www.javaguise.com/ Guise] an Internet application framework that handles AJAX automatically without the need to write JavaScript or HTML. *[http://www.jwic.de/ jWic] an open source web application framework which uses AJAX to synchronize the client with the server state. *[http://oss.metaparadigm.com/jsonrpc/ JSON-RPC] is a JavaScript-to-Java bridge that allows the invocation of Java methods from JavaScript via a servlet interface. *[http://www.xmlap.com/jrp/ JRP] (JSON-RPC Page) is a JSP tag library for creating RPC methods for both JSON-RPC and XML-RPC. *[http://www.icesoft.com/products/icefaces.html ICEfaces] is a Java Server Faces framework for easily developing AJAX applications. *[http://www.clearnova.com 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. *[http://www1.softwareag.com/Corporate/products/cai/default.asp Composite Application Integrator] Composite Application Integrator is a powerful design and runtime environment to rapidly deploy rich and composite internet applications for the Web and the desktop fully based on Ajax. Not only does it help developers create browser-based applications that look and behave like thick clients, it reuses existing business logic and information. *[http://www.pushlets.com 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.

=== Perl ===

*[http://search.cpan.org/searchquery=Catalyst Catalyst] A Perl-based framework with AJAX support *[http://search.cpan.org/searchquery=CGI::Ajax CGI::Ajax] A Perl-specific system for writing AJAX or DHTML-based web applications

=== PHP ===

*[http://pear.php.net/package/HTML_Ajax HTML_Ajax] PHP and JavaScript Ajax *[http://www.xoad.org/ XOAD] (formerly NAJAX) PHP based AJAX/XAP object oriented framework. *[http://xajax.sourceforge.net/ xajax] PHP Ajax toolkit *[http://www.modernmethod.com/sajax/ sajax] Simple Ajax Toolkit by ModernMethod *[http://www.auberger.com/pajax pajax] Pajax toolkit *[http://expert.no-ip.org/ajax Class Ajax] Customize JavaScript XML HTTP Request Object components from PHP.

=== Python ===

*[http://www.myghty.org/index.myt Myghty] Myghty Ajax Toolkit *[http://www.turbogears.org TurboGears] TurboGears Framework

=== Ruby ===

*[http://rubyforge.org/projects/nitro Og/Nitro] *[http://www.onlamp.com/pub/a/onlamp/2005/06/09/rails_ajax.html Ruby on Rails ]