JavaBeat
Struts Tutorials | Hibernate Tutorials | JSP Tutorials | Servlet Tutorials | EJB Tutorials | Struts Resources | Spring Resources | Hibernate Resources
AJAX Home | Articles | Resources | Forums

AJAX - Overview

AJAX stands for Asynchronous Javascript and XML. AJAX technique is used for making asynchronous server calls. This enables to update a part for the page without refrshing the entire page. AJAX is a buzz word from Web 2.0. The intent is to shift a great deal of interaction to the Web surfer's computer, exchanging 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) and 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 transfering data, although any format will work, including preformatted HTML, plain text, JSON and even EBML
What is AJAX?

AJAX is a combination of technologies (Javascript/XML/HTML) that work together to make Websites that update without refreshing the entire page. With AJAX you can update portions of a web page at a time.

Probably the most critical component of AJAX is the "XMLHttpRequest object". It allows the dynamic transfer of information with the need for a full page refresh. Sites like Google Mail (Gmail.com) and Google Maps (google.com/maps) have really made AJAX popular.

Father of AJAX
Jesse James Garrett is the president and a founder of Adaptive Path. He is the author of the widely-referenced book The Elements of User Experience. He is also the founder of the name AJAX(Asynchronous Javascript and XML). He coined the term Ajax in 2005.

Articles
Books
Downsides of Ajax

  • Limited Capabilities: Some Ajax applications are certainly doing things people never dreamed were possible on the web, but there are still substantial restrictions of the web platform. For example: multimedia capabilities, local data storage, real-time graphics, interaction with hardware such as printers and webcams. Support for some of these are improving in recent browsers, some can be achieved by delegating to Flash, but many are simply not possible, and if required, would rule out Ajax.
  • Performance Concerns: Constant interaction between browser and server can make an application feel unresponsive. There are, however, quite a few well-known patterns for performance optimisation such as browser-side caching. These usually suffice, even for fast-paced applications like stock trading, but Ajax still might not work for really time-critical applications such as machine control.
  • Internet Access Required: The user can't access an Ajax application in the absence of a network connection.
  • Second Programming Language: Serious Ajax applications require some knowledge of Javascript. Many developers are discovering that Javascript is actually a more capable language than at first assumed, but there is nevertheless an imposition to use a language different to that on the server-side.
  • Easily Abused: As with any powerful technology, Ajax concepts can be abused by careless programmers. The patterns on this site are intended to guide developers towards more usable solutions, but the fact remains that Ajax isn't always used in a manner that supports usability.
Lifecycle of an Ajax Application

The Ajax lifecycle is more like that of a traditional GUI than a traditional web application, with DOM objects acting like GUI widgets. The script registers event listeners on DOM objects, and manipulates the DOM in response to those events. As part of the event-processing cycle, the server may be invoked. There's actually a slight complication here in that the server calls are asynchronous, so the event-listening phase is split from the event-responding phase.

Here's a typical Ajax lifecycle within the browser:

  • Visit: The user visits a site the usual way, i.e. by clicking on a link or typing a URL.
  • Initialisation The page initially loads. Callbacks are established to handle user input, a loop might be established to continously refresh page elements.
  • Event Loop:
    • Browser Event An event occurs, such as a keypress.
    • Server Request The browser sends a request to the server.
    • ...Server processes the event>
    • Server Response A moment later, the server responds, and the response is passed into a request callback function, one that was specified when the request was issued.
    • Browser Update The request callback function updates the DOM, including any Javascript variables, according to the response.

Of course, there are plenty of variants. In particular, many events are handled locally and don't actually trigger a trip to the server. Also, some Ajax applications are short-lived and the browser interaction is eventually terminated with the user submitting a form. Others remain to interact with the user as long as they are in the user's browser.

Note that the Browser Event and the Server Request occur in one thread, and the Server Response and Browser Update occur in a separate thread. This is due to the asynchronous nature of the server request. It's actually possible to configure XMLHttpRequest to make synchronous calls, but poor practice as it holds up the user.

JavaBeat 2006, India | javabeat home | About Us | partners directory | Advertise with us