Style Sheets (CSS), HTML, the
and Document Object Model (DOM) (see Resources for more
information on each of these standards). Ajax applications running on a browser communicate with the Web server in an asynchronous manner and only update portions of the page. By taking advantage of Ajax techniques, you can provide a rich, browser-based user experience.
Upon embarking on the Ajax journey, you need to get a handle on many different languages, standards, tools, and libraries. Navigating between the various options and assembling a development environment can be overwhelming at the beginning. The authors draw from their own ramp-up experiences to help you avoid some of the more common and irritating issues you might encounter on your journey.
Ajax is about changing the experience a user has on a Web site from a page-per-click experience to one with the look and feel of an interactive and nimble desktop application. Your users can avoid page reloads and avoid waiting for the next piece of content to be presented. You might be thinking that all of this sounds great, but how do you do it? To answer that, a little background about the technologies behind Ajax is helpful.
Ajax is a collection of the following several Web technologies and standards that lets you use the client's machine to run a significant portion of the application's logic behind the scenes and not just present its output:
- Hypertext Markup Language (HTML): Defines the content that is ultimately presented to the user.
- Cascading Style Sheets (CSS): Define the style (or decoration) of the presented content.
All these technologies execute inside the user’s Web browser, which serves as the platform that executes the Ajax programs.
To use Ajax, it is important to understand that the technologies composing it, while standards-based, are browser-specific to some extent; putting it in another way, the same application might behave differently on different browsers. However, because it is neither possible to restrict users to a specific browser nor wise to ignore clients because of the fact that their browser may be CSS or DOM challenged, you, the application creator, need to understand the differences between the various browsers.
To be an effective Ajax developer, you need to:
- Know the technologies that form Ajax development's foundation.
- Understand the available run-time platforms and Web browsers.
- Use an IDE that supports the various languages used while developing Ajax applications.
- Have debuggers and application test tools available for the various environments and languages.
One of the best Ajax tutorials out there is the Mastering Ajax series here on developerWorks, by Brett McLaughlin. This series assumes very little prior Ajax programming knowledge and walks you through various Ajax-related technologies. If you are looking to gain a better understanding of Web architecture, you may also want to get familiar with Representational State Transfer (REST). The article "How to Create a REST Protocol" (see Resources) is a good first step in that direction.
If you are using the Mozilla Firefox browser, you should use the DevEdge sidebars (see Resources). These sidebars contain indexes to standards defining the individual Ajax technologies and allow you to use them as a reference guide.
Finally, if you want to feel the pulse of the Ajax community, you should subscribe to the Ajaxian blog (see Resources).
The Web browser is not only your Ajax deployment environment, but it is also your debugging environment. Most browsers can be extended with debugging aids such as DOM tree viewers or debuggers. The next section gives you an overview of these popular browsers:
- Microsoft® Internet Explorer (IE)
IE remains the browser of choice for the majority of users. IE6 is an aging browser with very deep market penetration. In IE6, many CSS and DOM features are not supported or are provided in a proprietary way. Developers using IE6 may encounter some of the following reported issues:
- Lack of transparent PNG support.
- DOM events: An event may have one name in Firefox and a different name in IE. The call order of some of the events is different, and there may be a different set of attributes for similar event objects in IE and Firefox. Read more about this issue in "Migrate apps from Internet Explorer to Mozilla" (see Resources).
- Unimplemented CSS attributes such as minimum/maximum height, selectors, and so on.
Despite these issues, you should always assume that the majority of your users are using this browser. You can also try to use various libraries such as /IE7/ (see Resources) that can provide some remedy to the IE6 quirks.
You can use the following tools to debug applications with IE:
- The IE Developer Toolbar: Lets you better control the IE environment (cache, cookies), explore the DOM tree, and explore and manipulate the element’s style. This is a useful tool when analyzing the page generated by the application. (The IE Developer Toolbar is available for download from Microsoft. See Resources for a link.)
You can use Trident, an IE browser engine, to create "new" browsers such as maxthon. New is quoted here because from a developer perspective, the browser's key attributes (such as its Ajax support) stay the same. (Learn more about Trident in Resources).
While several Firefox versions have been released to date, this discussion covers only Firefox 2.0. Firefox is very commonly used by developers and power users, is the browser of choice for UNIX®-type operating systems, is open source, and is second in popularity to IE.
Firefox has a powerful and open extension mechanism that was used by its community to create a large set of Web development aids. However, Firebug (see Resources) is by far the most important of them all. (For more details about the capabilities of Firebug, take a look at "Ajax Debugging with Firebug.") Firebug is an all-in-one extension that lets you:
- Review network traffic.
- Review and tweak the DOM tree and the CSS of the various elements.
The strength and flexibility of Firebug 1.0 signified a landmark in Ajax development and are good reasons to use Firefox as a preferred development browser.
Mozilla Gecko (see Resources), the Firefox layout engine, is used within several browsers such as Camino. These browsers exhibit the same capabilities as Firefox, with a matching Gecko version.
Safari is the browser that ships with MacOSX (and as of release 3 is also running on Windows®). While noticeably faster than Firefox and IE7, when compared, Safari lacks in standards support (although the latest WebKit builds show improvements; the next section gives more details on WebKit). Note also that the Safari developer community is noticeably smaller than those associated with Firefox and IE. As a result, there is also less information about it on the Web and many libraries are not well tested on Safari.
The Safari browser engine is developed in an open source project called WebKit (see Resources). To debug your application in Safari, we recommend using a WebKit build. The build includes:
- A stripped down browser with CSS and DOM inspector.
If you insist on testing your application in Safari, you can turn on the Safari Debug menu, which allows you to inspect the DOM tree, CSS, the cache, and so on.
WebKit is used in several browsers, most noticeably OmniWeb.
When you develop new Ajax applications, it will become clear to you the benefit of using an IDE that supports all Ajax-related technologies and provides a quick and pleasant development environment and UI. Some of the features to look for when you choose an Ajax IDE are:
- Related documentation for the various technologies
- Network monitoring
- DOM introspection
- Framework integration
While you might consider an IDE for purchase, Eclipse and its related plug-ins provide a fully functional, open source-based Ajax IDE, which you can download for no charge. This section covers the following Eclipse-based Ajax IDEs, including add-ons:
- Eclipse with the Web toolkit
- Eclipse ATF
This section also covers the JsUnit unit testing package.
Note that the Eclipse Web tools environment is not limited to Ajax development, but rather supports Web application development with a server-side emphasis. Thus, it provides core functionality such as syntax highlighting and basic code completion. It does not provide debugging capability or DOM manipulation, which are Ajax-specific development tasks.
You can install and thus combine the Eclipse Ajax Toolkit Framework (ATF) environment (see Resources) with the Eclipse Web toolkit, resulting in a powerful environment that supports all aspects of your Ajax development needs. The ATF offers features such as:
- A DOM browser and CSS runtime editor
- Network traffic monitoring
- Simple library integration for common libraries through library profiles
A valuable feature of this toolkit is the ability to run, test, and inspect your application in the integrated XUL runner.
Aptana (see Resources) is a very useful open source, Eclipse-based environment that you can download free of charge. Unlike the ATF, whose tools specifically target Ajax development, Aptana is an IDE for developing Web 2.0 applications. Aptana has acquired the Ruby Development Toolkit (RDT), providing Ruby-Eclipse integration.
You can download Aptana either as a complete Eclipse environment (which makes things very simple compared to the ATF option) or as a set of plug-ins to be added to an Eclipse environment that has been previously set up.
The Aptana environment offers several useful features, such as:
- High-quality users' guide and technology reference documentation
- Debugging capability using an external Firefox browser
- Basic Ajax library integration
- A code validation system that marks potential errors
- The ability to edit any location on the file system as well as remote files using FTP
You might find that Aptana is a solution for your development needs that is simpler to install and learn than ATF.
Many Ajax development frameworks have recently emerged, with the goal of easing potentially tedious Ajax development tasks. This section reviews several nascent open source Ajax frameworks that can make your job easier by:
- Providing a collection of widgets that serve as building blocks for a rich Web user interface (UI)
- Simplifying asynchronous data interaction and transfer protocols
- Easing any cross-browser incompatability
Because covering the myriad of Ajax frameworks available is beyond the scope of this article, we've chosen to detail only Prototype, script.aculo.us, Dojo, and Rico. For a more comprehensive list of available Ajax frameworks and their usage, see the Ajaxian.com 2006 survey (see Resources for a link).
- Basic DOM manipulation
- Ajax calls
- A handful of utility functions
- Working with input fields and forms
Prototype, developed by Sam Stephenson, was inspired by the Ruby programming style and is now an open source project under the Massachusetts Institute of Technology (MIT) license (see Resources).
The following is an example scenario of how using Prototype can simplify Ajax
programming. Imagine you have a requirement for a page with a section that
will refresh periodically and display the most recent news.
You set a timer to call the method
updateNews() once a minute. In the
updateNews() method, you use
Prototype Ajax.Updater to issue an asynchronous request for the latest news content. When the
result is received, it is inserted as the HTML content of the
most-recent-news. Listing 1
demonstrates one example of the many powerful functions provided by Prototype:
Listing 1. Example Prototype scenario
Without the use of Prototype, this example scenario would have required many more details and much more coding effort.
Script.aculo.us (see Resources) is an open source project under the MIT license. It is built on top of Prototype and is included with Ruby on Rails. Script.aculo.us is a popular framework for developing rich Web-UI Rails applications, but you can also use it with any other server-side technology. Script.aculo.us, while described as a rather thin framework, has strong animation capabilities, as well as the following features:
- Drag-and-drop support
- A few controls and widgets, such as autocomplete, slider, and in-place editing
Listing 2 gives you an example of the use of Script.aculo.us's powerful animation effects, where a line of text, when clicked, gradually fades out of sight:
Listing 2. Script.aculo.us animation effects
The Dojo Toolkit (see Resources) is a comprehensive Ajax framework that meets a broad set of needs. Dojo provides:
- DOM manipulation
- A packaging system to optimize download time and size
- A rich and extensible set of widgets
- Drag-and-drop support
- Animation support
- A very rich server-side integration library
One of Dojo’s strong selling points is that its widgets are extensible, enabling you to create composite widgets from simpler ones. Therefore, unlike most Ajax libraries and frameworks, Dojo guides you toward a specific programming model that, if followed, lets you design your Web interface in a manner that can resemble desktop GUI programming.
Dojo is being developed as an open source project by the Dojo Foundation and is provided under the Academic Free License (see Resources). A very active project, Dojo is supported by major corporations such as IBM, Sun Microsystems, AOL, and others.
Figure 1 shows a screenshot of a mail application demo that uses Dojo. You can see that Dojo provides tree, table, and many other widgets that help you create a desktop-like UI. It also simplifies the interactions among these widgets.
Figure 1. Sample Dojo interface
Rico is an open source Ajax framework provided under the Apache 2.0 license (see Resources for links to the Rico Web site as well as a link to a description of the Apache 2.0 license). It packs considerable value into a relatively small footprint. Some of Rico’s most prominent features are:
- Extensive DOM manipulation using a template
- Various widgets, such as accordion, LiveGrid, and pull down
- Drag-and-drop support
- Simple animation
- Utilities to round corners, manage colors, and other appearances
- Simple server-side integration
Although Rico includes fewer functions than the Dojo framework, if the available functions meet your UI development needs, Rico's compact footprint can be an advantage. In particular, Rico's LiveGrid widget can make the common task of creating dynamic tables very simple.
If you're ready to jump onto the Ajax development wagon, the following roadmap gives you a list of steps to get you started. (Note: This roadmap uses Aptana as the IDE and Dojo as the Ajax framework, but you can change the configuration to suit your needs.)
- Download Mozilla Firefox 2.0 and install the Firebug plug-in.
- Download and install Aptana.
- Following the “Mastering Ajax” tutorial, write the code samples in Aptana. Debug the examples in Firebug as you go.
- Download the Dojo Toolkit and go through the Dojo “Hello World” tutorial (see Resources).
The next article in this series will guide you through putting your newly gained Ajax development knowledge into practice by developing a simple Dojo-based blog reader. Not on board the Ajax wagon yet? You will be soon. Stay tuned!
- Explore the /IE7/ library, which can provide remedy to IE6 quirks.
The Mozilla developers Center
provides comprehensive documentation for the various technologies that
form Ajax's foundation.
The Mozilla DevEdge Sidebars site
provides Firefox users with indexed access to Ajax technology
series here on developerWorks gets you started developing applications.
- "How to Create a REST Protocol" is a highly recommended publication on REST.
W3Schools provides short and
focused information and references on Ajax technologies.
- Get more information on Trident, an IE browser engine.
- Learn more about Firebug.
- For more details about the capabilities of Firebug, take a look at "Ajax Debugging with Firebug."
- Explore Mozilla Gecko,
the Firefox layout engine.
- The Safari browser engine is developed in an open source project
called WebKit. Learn more about WebKit.
- For a comprehensive list of available Ajax frameworks and their usage, see the
- Explore the details of the Massachusetts Institute of Technology (MIT) license.
- Explore the details of the Academic Free License.
- Explore the details of the Apache 2.0 license.
- Read up on Script.aculo.us.
- The Dojo Toolkit is a
comprehensive Ajax framework that meets a broad set of needs.
- Go through the Dojo
Rico is an open source Ajax framework. Learn more.
The Ajax patterns site
provides a comprehensive list of common Ajax design patterns.
Douglas Crockford maintains several interesting
apps from Internet Explorer to Mozilla" (developerWorks, July 2005) gives you information on
differences between Firefox and IE.
Read "Ajax: A New Approach to Web Applications" which coined the term Ajax.
Get products and technologies
- Download the IE Developer Toolbar and the Microsoft Script Debugger from the Microsoft Download Center.
- Learn more about and download the Eclipse Ajax Toolkit Framework (ATF).
Aptana is a useful open source, Eclipse-based environment that you can download free of charge.
- If you want to feel the pulse of the Ajax
community, subscribe to the
Gal Shachor is an IBM Senior Technical Staff Member and researcher working at the IBM Haifa Research Lab, on various topics related to middleware and rich Internet applications. Gal is the author of the book JSP Tag Libraries and several technical articles.
Yoav Rubin holds a B.Sc. in Information Systems Engineering from the Computer Science faculty in the Technion, Israel Institute of Technology, and for the last seven years, he has been working as a Software engineer in IBM Haifa Research Lab, mostly in the fields of visual application development tools and complex event processing. His main interests are Java and Web technologies, simplified programming, and usability.
Shmuel Kallner holds a B.Sc. in Information Science from Yeshiva College, New York, NY. For the last 26 years, he has been working as a software engineer at various locations in IBM, most recently at the IBM Haifa Research Lab. He has worked in the fields of databases, client server applications, and Java telephony servers. His main interests are Java and Web technologies, simplified programming, and usability.