Ajax and traditional Web applications

Asynchronous JavaScriptTM and XML (Ajax), is a branding for Rich Internet Applications (RIA) that is based on existing JavaScript, XML, and other technologies. Figure 1 shows a high-level diagram of a typical Web-enabled client and server architecture without Ajax, which is contrasted with an Ajax application.


Figure 1. A Web site serving static Web content

The Hypertext Markup Language (HTML) is the dominant mark-up language that is used to create Web pages. HTML describes the structure of the document and how to render the document on the client. How an HTML document is created is determined by the technology on the server. The server technology available includes Hypertext Preprocessor (PHP), Ruby on Rails, JavaTM Platform, Enterprise Edition (Java EE), and so on. Users make a request to a server through the client. The server interprets the request and can access the persistent storage of a server or other services to fulfill the request. The result is rendered in an HTML document and returned to the client using the HTTP protocol. The client renders the HTML and displays the request. The experience is synchronous, meaning that the user issues the request and waits for the response from the server. Variations on the architecture include using plug-ins on the client side that understand or render output other than HTML documents. Plug-in solutions require the user to download code that is integrated into the client to provide extended functionality. Adobe Flash Player is an example of a plug-in that is used to render rich content.

You can use Ajax to create more responsive and interactive user experience on the browser. Google Maps is an example of the potential of the technology. Ajax frameworks, such as Dojo, contain a set of JavaScript libraries that you can use to create a richer experience. While Ajax adds additional graphic user interface (GUI) options to improve the user experience, Ajax also offers the potential to bind server service data to the presentation layer of the browser through the use of XML-based asynchronous requests.


Figure 2. A Web site serving dynamic Web content

Ajax does not entail a new architecture but Ajax augments what already exists. In the previous diagram, the JavaScript UI Widget represents a GUI option that is created using JavaScript. The Dojo Toolkit packages a number of GUI JavaScript libraries that you can easily be inserted into the presentation rendering of the HTML page. The GUI libraries include widgets such as page tabs, FORM elements (such as text boxes, combination boxes, and check boxes), and other JavaScript controls.

Beyond the GUI libraries, the Dojo Toolkit provides JavaScript libraries that can take advantage of the asynchronous nature of the browser by using the Dojo wrappers for the JavaScriptXMLHttpRequest object, such as xhrGet and xhrPut. An example of a callback registration would be dojo.xhrGet wrapper to allow for notification when results are returned by the server. Typically, the request response format that is issued to the server is in XML or JSON format over HTTP.

Use Dojo to add Ajax code to your application to enhance the user interface.

Replace traditional controls with Ajax to support asynchrous communication.