Asynchronous JavaScript and XML (Ajax) has emerged as one of the key technologies to help organizations meet their objectives for maintaining competitive and performance advantages in light of constantly changing market conditions. The reason is simple—Ajax enables them to quickly create rich, dynamic Web applications capable of providing better user experiences with faster overall performance.
Current page-based Web applications restrict client side functionality and impact overall performance in two ways. First, these applications typically rely on the server for all logic, so all interaction with the user results in a connection back to the server with a corresponding delay. Second, the entire page is typically refreshed for any data submission, even though sometimes only a small change is made to the display. This causes screen flicker and unnecessary network traffic, as well as delays without much visual feedback to the user. As a result, the overall application performance is negatively impacted on even the fastest networks.
Ajax enables browsers to asynchronously request only incremental data updates from the server rather than whole pages. Any event that occurs on a browser page can initiate a browser-server interaction. Only the updated segment is returned to the browser page, thereby eliminating unnecessary and numerous page refreshes while decreasing response times. You can also use Ajax to create more visual improvements such as making richer looking controls using a combination of JavaScript, DOM, and CSS.
Ajax is platform agnostic with a low or zero maintenance client, which means there is no install and nothing to upgrade (assuming you already have a compliant browser). Ajax is accessible from any Internet-connected device and offers significant bandwidth savings by leveraging the browser as the presentation layer and transferring more logic to the client. Ajax minimizes page-to-page navigation and can help orchestrate visual effects.
Ajax requires familiarity with coding languages like JavaScript, DOM, CSS, and HTML and can involve some object-oriented programming. Despite its many benefits, and some significant real-world applications including Google's Gmail email program, many developers considered Ajax implementation as somewhat tricky or difficult depending on their experience with related technology. Until recently, those claims have been valid because there have been few development tools. There was no easy way to use Ajax and still achieve many business directives such as meeting government requirements for supporting people with disabilities. Additionally, the immaturity of Ajax toolkits meant that each developer often had to reinvent the same basic techniques, as well as resolve issues involving the different quirks and bugs of each individual browser.
IBM Tools Simplify Many Ajax Complexities
IBM has been working on several fronts to simplify Ajax development efforts and give you the tools you need to develop Ajax enabled Web applications. More importantly IBM, in concert with other major companies, is working on some significant projects to deliver the tools, best practices, features, and technology advances to promote Ajax use and adoption throughout the enterprise.
A discussion of all the areas in which IBM is supporting Ajax development is beyond the scope of this article. However, among the many key areas where IBM has made significant contribution that are noteworthy and will be covered in this article include: IBM Rational Application Developer, an early release of WebSphere Application Server and Eclipse with Ajax support (see sidebar) and a brief discussion of some of the important technology contributions IBM has made to Ajax.
IBM Rational Application Developer Version 7 makes it easier for you to develop Ajax-enabled Web applications by handling all of the low-level details for you. You don't have to have any in-depth knowledge of JavaScript, client-server communication protocols, or server-side code. It understands all the differences and nuances between versions of major browsers easing your debugging and development efforts.
IBM Rational Application Developer Version 7 features JSF extensions that process Ajax requests within the JavaServer Framework. It has a JavaScript library that properly initiates and handles the server-browser interaction so only the appropriate segments of the Web page are updated. It also includes the following new Ajax components:
For more information about Rational Application Developer v7 with some examples of how to create an Ajax .jsp page by activating the controls on the page see, "What's new in IBM Rational Application Developer V7.0"
"JSF and Ajax: Web 2.0 Application Made Easy with Rational Application Developer V7"—explains how to use Ajax and JSF together in Rational Application Developer V7 and walks you through an example that adds Ajax support to an existing application.
IBM Adds Some Mojo to Ajax and Dojo
IBM is playing a key role in many Ajax community initiatives. IBM was a founder of the OpenAjax Alliance, where IBM and more than 60 other companies, are working together to develop Ajax interoperability standards and promote Ajax adoption. IBM is also heavily involved in open source Ajax developer tools at the Eclipse Foundation, where the Ajax Toolkit Framework project provides an open platform in which developers can collaborate and build new tools for enterprise-class Ajax development.
IBM is collaborating with developers in the Dojo Foundation to develop a comprehensive, open source JavaScript toolkit. It is the goal of Dojo and other Ajax providers to make sure the code works seamlessly across different browsers and platforms. IBM's participation in Dojo entails contributing technology, expertise, best practices, and additional functionality such as accessibility and localization, among other things to make it a great Ajax toolkit not only for both individual Web developers but to ensure it is also "enterprise-ready."
Dojo projects serve as the technology underpinning to enable functionality such as the asynchronous I/O and page updates that Ajax depends upon. Dojo has utilities for manipulating the DOM, events, and persistent storage, and an aspect-based event system that lets you attach events to components to create a rich interaction experience.
The Dojo library has numerous features and components you can use to create Web applications that are more useable, responsive, and functional, including vector graphics, animation effects, and many others. You can use several Dojo library components to make asynchronous server requests. Dojo also provides important and interactive widgets like date pickers and sortable tables you can use and combine to compose your Web pages.
Dojo allows you to use and create widgets several ways. You can assign dynamic behavior to widgets by creating, accessing, modifying, and destroying widgets in JavaScript. Declarative style tags can be used to define widget locations and properties and attributes can be added to tags. You can use standard HTML tags to create widgets. The following code example illustrates how this is done:
Listing 1. Using Dojo in HTML tags
<div dojoType="FloatingPane" class="stockPane" title="Stock Form" id="pane"
constrainToContainer="true" displayMaximizeAction="true">
<h2>Stock Service
Enter symbol: <input dojoType="ValidationTextBox" required="true"
id="stockInput">
<p />
<button dojoType="Button2" widgetId="stockButton">
Get Stock Data
</button>
<div id="resultArea" />
</div> The above is a good example of how Dojo can be used in markup to make forms more lively. Here are a couple of other fun Dojo examples:
There are too many other Dojo features to detail in this article. For further information regarding the work that IBM and others are doing, as well as code examples, demos, etc., illustrating how to use Dojo, see the following links:
IBM's Efforts Are Enabling Enterprise-Ready Ajax Development
IBM championed the WAI-ARIA in the W3C and is integrating this standard into the Dojo Toolkit widget set to enable a variety of assistive technologies. IBM is also providing experts to work on making Dojo accessible to people with disabilities by providing a mechanism for creating rich user interface components on the Web that are fully accessible from a keyboard or assistive technologies such as screen readers and magnifiers.
IBM is contributing to Dojo in a number of other areas including providing individual widgets, bug fixes, stability, performance, etc. However, IBM's more visible contributions to Dojo are in the areas of globalization and internationalization for enterprise class applications.
In addition, IBM is working on solutions to ensure the functionality provided by Dojo let you create applications that are not only enterprise ready but can also be used by everyone. Among other criteria, Dojo must adhere to local customs such as providing a facility to substitute strings in the local language. Work is also being done with dates and numbers using local customs and creating widgets that render the text in the right orientation depending on the language (e.g. from right to left for middle eastern languages, etc.).
If you haven't already done so—you owe it to your future success to begin using and exploiting Ajax. Your customers will love you for it and the tools you need to get started and be productive without the painful learning curve are already here.