AJAX – Web Applications

1. Introduction:

AJAX is also known as Asynchronous JavaScript and XML, 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 requests a change. This is intended to increase the web page's interactivity, speed, and usability.

Ajax uses the JavaScript DOM, the XMLHttpRequest object, XML, and CSS to download and display just the content that needs to change.

When you write an application today, you have two basic choices:

  • Desktop applications
  • Web applications

These are both familiar; desktop applications usually come on a CD and install completely on your computer. They might use the Internet to download updates, but the code that runs these applications resides on your desktop. Web applications -- and there's no surprise here -- run on a Web server somewhere and you access the application with your Web browser.

On the other hand, Web applications are usually up-to-the-second current and they provide services you could never get on your desktop (think about Amazon.com and eBay). However, with the power of the Web comes waiting -- waiting for a server to respond, waiting for a screen to refresh, waiting for a request to come back and generate a new page.

Obviously this is a bit of an oversimplification, but you get the basic idea. As you might already be suspecting, Ajax attempts to bridge the gap between the functionality and interactivity of a desktop application and the always-updated Web application. You can use dynamic user interfaces and fancier controls like you'd find on a desktop application, but it's available to you on a Web application.

2. Technologies related to AJAX

When it comes to Ajax, the reality is that it involves a lot of technologies -- to get beyond the basics, you need to drill down into several different technologies. Here are the basic technologies involved in Ajax applications:

  • HTML is used to build Web forms and identify fields for use in the rest of your application.
  • JavaScript code is the core code running Ajax applications and it helps facilitate communication with server applications.
  • DHTML, or Dynamic HTML, helps you update your forms dynamically. You'll use div, span, and other dynamic HTML elements to mark up your HTML.
  • DOM, the Document Object Model, will be used (through JavaScript code) to work with both the structure of your HTML and (in some cases) XML returned from the server.
  • Asynchronous data retrieval using XMLHttpRequest.
  • Data interchange and manipulation using XML and XSLT.

The classic web application model works like this: Most user actions in the interface trigger an HTTP request back to a web server. The server does some processing — retrieving data, crunching numbers, talking to various legacy systems — and then returns an HTML page to the client. It’s a model adapted from the Web’s original use as a hypertext medium, but as fans of The Elements of User Experience know, what makes the Web good for hypertext doesn’t necessarily make it good for software applications.

Figure 1: The traditional model for web applications (left) compared to the Ajax model (right).

This approach makes a lot of technical sense, but it doesn’t make for a great user experience. While the server is doing its thing, what’s the user doing? That’s right, waiting. And at every step in a task, the user waits some more.

3. How AJAX is Different

An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true.

Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine — written in JavaScript and usually tucked away in a hidden frame. This engine is responsible for both rendering the interface the user sees and communicating with the server on the user’s behalf. The Ajax engine allows the user’s interaction with the application to happen asynchronously — independent of communication with the server. So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something.

Figure 2: The synchronous interaction pattern of a traditional web application (top) compared with the asynchronous pattern of an Ajax application (bottom).

Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn’t 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 it’s submitting data for processing, loading additional interface code, or retrieving new data — the engine makes those requests asynchronously, usually using XML, without stalling a user’s interaction with the application.

4. How Does AJAX Work

The kernel of Ajax is the XmlHttpRequest JavaScript object. This JavaScript object was originally introduced in Internet Explorer 5, and it is the enabling technology that allows asynchronous requests. In short, XmlHttpRequest lets you use JavaScript to make a request to the server and process the response without blocking the user.

By performing screen updates on the client, you have a great amount of flexibility when it comes to creating your Web site. Here are some ideas for what you can accomplish with Ajax:

  • Dynamically update the totals on your shopping cart without forcing the user to click Update and wait for the server to resend the entire page.
  • Increase site performance by reducing the amount of data downloaded from the server. For example, on Amazon's shopping cart page, when I update the quantity of an item in my basket, the entire page is reloaded, which forces 32K of data to be downloaded. If you use Ajax to calculate the new total, the server can respond with just the new total value, thereby reducing the required bandwidth 100 fold.
  • Eliminate page refreshes every time there is user input. For example, if the user clicks Next on a paginated list, Ajax allows you to just refresh the list with the server data, instead of redrawing the entire page.
  • Edit table data directly in place, without requiring the user to navigate to a new page to edit the data. With Ajax, when the user clicks Edit, you can redraw the static table into a table with editable contents. Once the user clicks Done, you can spawn an Ajax request to update the server, and redraw the table to have static, display-only data.

The possibilities are endless! Hopefully you are excited to get started developing your own Ajax-based site. Before we start, however, let's review an existing Web site that follows the old paradigm of submit/wait/redisplay and discuss how Ajax can improve the user's experience.

4.1. The XMLHttpRequest object

The first object we want to understand is probably the one that's newest; it's called XMLHttpRequest. This is a JavaScript object and is created as simply as shown in the following table.

<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();

Table 1. Create a new XMLHttpRequest object

This is the object which handles all of our server communications. Note that we have used JavaScript technology through the XMLHttpRequest object that talks to the server. That's not the normal application flow and it's where Ajax gets much of its magic.

Ajax essentially puts JavaScript technology and the XMLHttpRequest object between your Web form and the server. When users fill out forms, that data is sent to some JavaScript code and not directly to the server. Instead, the JavaScript code grabs the form data and sends a request to the server. In other words, the JavaScript code sends the request behind the scenes; the user doesn't even realize that the request is being made. Even better, the request is sent asynchronously, which means that your JavaScript code (and the user) doesn't wait around on the server to respond. So users can continue entering data, scrolling around, and using the application.

Then, the server sends data back to your JavaScript code (still standing in for the Web form) which decides what to do with that data. It can update form fields on the fly, giving that immediate feeling to your application -- users are getting new data without their form being submitted or refreshed. The JavaScript code could even get the data, perform some calculations, and send another request, all without user intervention! This is the power of XMLHttpRequest.

4.2. Adding in some JavaScript

Once you get a handle on XMLHttpRequest, the rest of your JavaScript code turns out to be pretty mundane. In fact, you'll use JavaScript code for just a few basic tasks:

  • Get form data: JavaScript code makes it simple to pull data out of your HTML form and send it to the server.
  • Change values on the form: It's also simple to update a form, from setting field values to replacing images on the fly.
  • Parse HTML and XML: You'll use JavaScript code to manipulate the DOM and to work with the structure of your HTML form and any XML data that the server returns.

For those first two items, you want to be very familiar with the getElementById() method as shown in Table 2.

// Get the value of the "phone" field and stuff it in a variable called phone
var phone = document.getElementById("phone").value;
// Set some values on a form using an array called response
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];

Table 2. Grab and set field values with JavaScript code

4.3. Finishing off with the DOM
Last but not least, there's the DOM, the Document Object Model. We will find the DOM in use a lot is in heavy-duty Java and C/C++ programs; in fact, that's probably where the DOM got a bit of its reputation for being difficult or hard to learn.
Fortunately, using the DOM in JavaScript technology is easy, and is mostly intuitive. When you start to send XML back and forth between your JavaScript code and the server and really change the HTML form, you'll dig back into DOM.

5. Where AJAX used

Google is making a huge investment in developing the Ajax approach. All of the major products Google has introduced over the last year — Orkut, Gmail, the latest beta version of Google Groups, Google Suggest, and Google Maps — are Ajax applications. Others are following suit: many of the features that people love in Flickr depend on Ajax, and Amazon’s A9.com search engine applies similar techniques.

These projects demonstrate that Ajax is not only technically sound, but also practical for real-world applications. This isn’t another technology that only works in a laboratory. And Ajax applications can be any size, from the very simple, single-function Google Suggest to the very complex and sophisticated Google Maps.

6. AJAX Frameworks

Ajax framework is a web application framework that helps to develop web applications that use Ajax, a technology to build dynamic web pages on the client side. Data is read from the server or sent to the server by JavaScript requests. However, some processing at the server side is required to handle requests, i.e., finding and storing the data. This is accomplished more easily with the use of a framework dedicated to process Ajax requests. This Ajax engine is intended to suppress waiting for the user when the page attempts to access the server. The goal of the framework is to provide this Ajax engine and associated server and client-side functions.

A framework eases the work of the Ajax programmer at two levels: on the client side, it offers JavaScript functions to send requests to the server. On the server side, it processes the requests, searches for the data, and transmits them to the browser.

6.1. Types of AJAX Frameworks
Ajax frameworks can be loosely grouped into categories according to the features they offer and the skills required of the user.

6.1.1. Direct Ajax frameworks
These frameworks require HTML, CSS and Ajax expertise: a developer is expected to author pages directly in HTML, and framework APIs deal directly with HTML elements. Cross-browser APIs are provided for a variety of purposes, commonly including communications, DOM manipulation, event handling, and sizing/moving/animating HTML elements.
These frameworks are generally smaller. They are commonly used for a web site such as a shopping experience, but not for a web application such as web-based email, at least not without further frameworks layered on top.

6.1.2. Ajax component frameworks    
These frameworks offer pre-built components, such as tabbed panes, which automatically create and manage their own HTML. Components are generally created via JavaScript or XML tags, or by adding special attributes to normal HTML elements. These frameworks are generally larger, and intended for web applications rather than web sites.

Some component frameworks require the developer to have extensive HTML/CSS/Ajax experience and hence to do cross-browser testing. For example, grids, tabs and buttons may be provided, but user input forms are expected to be authored directly in HTML/CSS and manipulated via Ajax techniques. Other frameworks provide a complete component suite such that only general XML and/or JavaScript abilities are requierd.

Ajax component frameworks can enable more rapid development than direct Ajax frameworks, but with less control, hence it is key that an Ajax component framework provides;

  • customization APIs, eg, an event that fires when the user stops editing within a grid
  • skinning facilities, where appearance can be changed without affecting behavior or layout
  • programmatic control, eg, dynamically adding tabs, or dynamically creating components based on user data
  • extensibility, ideally, creation of new components based on other components, so that the benefits of a component-based framework aren't lost

6.1.3. Server-driven Ajax frameworks
Several frameworks offer a server-side component-based development model with some degree of Ajax support.
Components are generally created and manipulated on the server using a server-side programming language. Pages are then rendered by a combination of server-side and client-side HTML generation and manipulation. User actions are communicated to the server via Ajax techniques, server-side code manipulates a server-side component model, and changes to the server component model are reflected on the client automatically.

These frameworks offer familiarity for server-side developers at the expense of some degree of power and performance. Ajax frameworks that handle presentation completely within the browser are more scalable because they do not run presentation code on the server at all. In a server-driven model, some UI interactions can become chatty, for example, an input field that is dynamically enabled or disabled based on server-side code may cause many network requests. Still, this approach is popular, especially in situations where the benefits of a full Ajax architecture can't be captured anyway.

Extending such a framework may require the developer to understand which parts of the presentation are handled on the client vs on the server, and to write a mixture of Ajax and server-side code. Examples include frameworks that offer Ajax for JSF, and Google's GWT.

6.2. Example AJAX Frameworks

6.2.1 JavaScript Framework
Javascript Frameworks are browser-side frameworks very commonly used in AJAX development.

  • Prototype, a JavaScript framework that provides an Ajax framework and other utilities.
  • Mootools, a compact and modular, Object-Oriented javascript framework, designed to make the process of writing extensible and compatible code more efficient.
  • Jquery, a lightweight JavaScript framework that emphasizes the interaction between JavaScript and HTML.

6.2.2 C++ API
C++ Toolkits are interfaces to AJAX technology.

  • WT, WT(witty) is a WebToolkit, allowing programmers to write code in C++ (without knowledge of real AJAX), generating content rich AJAX GUI. OpenSource Licence.

6.2.3 Java Frameworks
Such frameworks permit the use of Java web services interactively with web pages. The most common Ajax specific frameworks are;

  • DWR, a remoting toolkit and DHTML library.
  • Echo, an open source framework for developing AJAX web applications in pure Java (no HTML/Javascript knowledge required).
  • Google Web Toolkit, a widget library with Java to Javascript compiler.
  • IT Mill Toolkit, a user interface library for developing Ajax -based web applications in plain Java run in server.
  • ZK, an AJAX/XUL Web Application Framework.
  • ThinWire, open source Swing like AJAX framework for developing web applications

6.2.4 .Net Frameworks
These tools run only on the .NET platform, and thus under Windows and perhaps some compatible ports as Mono and others.

  • ASP.NET AJAX (previously Microsoft Atlas) works best with .NET services behind it, even if it has JavaScript libraries that can run without .NET.
  • Ajax.NET Professional serialize .NET data to the JSON format.
  • Gaia Ajax Web Widgets NoJavaScript type of framework.

6.2.5 PHP Framework:
A PHP framework is able to deal with database, search data, and build pages or parts of page and publish the page or return data to the XMLHttpRequest object. PHP 5 specifically, thanks to its SimpleXML class, is able to create XML files that may be returned to the object. However, it is better to use a predefined library that performs the various tasks.

  • Xajax uses only the XML format, on the server side

7. Conclusion

At this point, you're probably not ready to go out and write your first Ajax application. However, you can start to get the basic idea of how these applications work and a basic understanding of the XMLHttpRequest object. From the various articles and tutorials, you'll learn to master this object, how to handle JavaScript-to-server communication, how to work with HTML forms, and even get a handle on the DOM.

At Adaptive Path, the web developers have been doing their own work with Ajax over the last several months, and they were realizing that they have only scratched the surface of the rich interaction and responsiveness that Ajax applications can provide. Ajax is an important development for Web applications, and its importance is only going to grow. And because there are so many developers out there who already know how to use these technologies, we expect to see many more organizations following Google’s lead in reaping the competitive advantage Ajax provides.

The biggest challenges in creating Ajax applications are not technical. The core Ajax technologies are mature, stable, and well understood. Instead, the challenges are for the designers of these applications: to forget what we think we know about the limitations of the Web, and begin to imagine a wider, richer range of possibilities.

For now, though, spend some time thinking about just how powerful Ajax applications can be.

It’s going to be fun.


A.Adham Sheriff, MCA., M.Phil.,
Lecturer, Dept of MCA,
Velammal Engg College,
Chennai – 66.

R. Senthil Kumar, MCA., M.Phil.,
 Lecturer, Dept of MCA,
 Velammal Engg College,
 Chennai – 66.

A.Abdul Rahman, MCA., M.E.,
Lecturer, Dept of M.Sc – CT,
Velammal Engg College,
Chennai – 66.