Jump to content

Ajax (programming): Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
m revert testing
Line 20: Line 20:


As an example, many photography websites allow users to enter captions for their photos. To change a caption with a traditional web application, a user would follow a link similar to "change caption", which would then load a page from the webserver containing a traditional HTML form in which caption changes could be made. After making any changes, the user would submit the form, which would make another page request loading the new photo page with the changed caption. A website programmed using Ajax technologies might allow a user viewing a photo page to just click on the caption text, an action which would use DHTML to replace the caption text with a text input box on the same page. After editing the caption and clicking submit, the new caption would instantly replace the text input box on the page, and the change would be submitted to the webserver in the background. (This example is actually how [[Flickr]] allows users to change photo captions.)
As an example, many photography websites allow users to enter captions for their photos. To change a caption with a traditional web application, a user would follow a link similar to "change caption", which would then load a page from the webserver containing a traditional HTML form in which caption changes could be made. After making any changes, the user would submit the form, which would make another page request loading the new photo page with the changed caption. A website programmed using Ajax technologies might allow a user viewing a photo page to just click on the caption text, an action which would use DHTML to replace the caption text with a text input box on the same page. After editing the caption and clicking submit, the new caption would instantly replace the text input box on the page, and the change would be submitted to the webserver in the background. (This example is actually how [[Flickr]] allows users to change photo captions.)

This is a test editing


== Pros and cons ==
== Pros and cons ==

Revision as of 07:02, 19 August 2005

Ajax or Asynchronous JavaScript and XML is a term describing 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 Mozilla Firefox, Microsoft Internet Explorer, Opera, Konqueror and Apple Safari.

Compared to traditional web applications

Traditional web applications allow users to fill out forms, and when these forms are submitted, a request is sent to a web server. The web server acts upon whatever was sent by the form, and then responds back by sending a new web page. A lot of bandwidth is wasted since much of the HTML from the first page is present in the second page. Because a request to the web server has to be transmitted on every interaction with the application, the application's response time is dependent on the response time of the web server. This leads to user interfaces that are much slower 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, and using JavaScript in the client to process the web server response. The result is more responsive applications, since the amount of data interchanged between the web browser and web server is vastly reduced. Web server processing time is also saved, since a lot of this is done on the computer from which the request came.

  • 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, many photography websites allow users to enter captions for their photos. To change a caption with a traditional web application, a user would follow a link similar to "change caption", which would then load a page from the webserver containing a traditional HTML form in which caption changes could be made. After making any changes, the user would submit the form, which would make another page request loading the new photo page with the changed caption. A website programmed using Ajax technologies might allow a user viewing a photo page to just click on the caption text, an action which would use DHTML to replace the caption text with a text input box on the same page. After editing the caption and clicking submit, the new caption would instantly replace the text input box on the page, and the change would be submitted to the webserver in the background. (This example is actually how Flickr allows users to change photo captions.)

This is a test editing

Pros and cons

Like DHTML applications, Ajax applications have to be tested rigorously to deal with the quirks of different browsers (there are a number of libraries available that can ease this task). The advantage of using the technology, however, is the speed at which an application runs and responds to user interaction. Clearly, using Ajax technologies also requires users to have JavaScript enabled in their browser (although it is possible to develop websites including Ajax functionality which degrades gracefully by offering a non-Ajax alternative for users without JavaScript enabled).

Another major complaint voiced against Ajax applications is that they may easily break the expected behavior of the browser's back button (see Jakob Nielsen's 1999 Top-10 New Mistakes of Web Design). When a page is updated dynamically, returning to the previous state may not be possible, 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. (For example, Google Maps 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.)

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.

Criticism

There have been some critics of the term Ajax, claiming that Adaptive Path, the consultancy firm that coined the term [2], or other proponents, are using it as a marketing vehicle for previously used techniques [3] [4] [5] [6].

Ajax is not a new approach to building software. From a higher perspective the presentation layer is like a form and a programming layer behind handling the events, commonly known in programming terms as MVC. This kind of programming is very well known in older programming environments like Smalltalk, Delphi, MFC, Visual Basic, Oracle ADF, and Windows Forms, just to name a few. Applications using this model of programming have been around for years: Microsoft Outlook Web Access using WebDAV and web-based ERP systems such as Costpoint Smart Business Applications [7] and P2plus [8], which uses web services directly from the browser. However, because there are no standards available for the communication model behind previous implementations, all use proprietary extensions.

A new aspect to Ajax is that there are now multiple browsers that can be used to realize this type of application, as opposed to earlier technologies which were frequently limited only to Microsoft's Internet Explorer.

Accessibility

For some uses of Ajax it's hard or impossible to create fallback for browsers that do not support Ajax technologies. This limits use of Ajax to desktop, graphical browsers and is against WAI accessibility guidelines.

In other cases, web developers use Ajax to simply replace portions of a web page instead of performing heavier manipulation in the web browser. Non-Ajax users load the whole page, but Ajax users only load fragments of pages. This allows the developers to preserve the experience of users in non-Ajax environments, including all accessibility concerns, while giving those with capable browsers a much more responsive experience, without full page reloads.

Many popular applications using the concept have been created by Google, including Google Mail and Google Maps. Along with Flickr, these are high-profile examples of Ajax usage that have served to demonstrate the flexibility and utility of the web programming model. More recently, competitors of Google have released similar Ajax-based websites (such as America Online's AIM Mail, and Microsoft's Virtual Earth).

Ajax applications

The Wikibook Programming has a page on the topic of: AJAX

Articles

Sites

  • Ajaxian an informational site about Ajax.
  • AJAX Matters an informational site (portal) about Ajax.
  • Ajax Patterns Growing collection of Ajax design principles and patterns.

Libraries/Scripts

Retrieved from "https://en.wikipedia.org/enwiki/w/index.php?title=Ajax_(programming)&oldid=21347369"