Ajax is a Web application client technique that combines JavaScript, Cascading Style Sheets (CSS), HTML, the XMLHttpRequest object, 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.

Getting on board the Ajax wagon

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.
• The Document Object Model (DOM): An API used by the browser to expose the presented content to JavaScript scripts. Scripts can then use the DOM to modify the content dynamically before the user’s eyes.
• The XmlHttpRequest object: Facilitates asynchronous interaction between the browser and the server, invoked from JavaScript scripts.
• JavaScript: A programming language that executes inside the browser, gluing together all other Ajax ingredients. Scripts can listen to events happening inside the browser (such as clicking a button), react to them by calling back to the server with XmlHttpRequests, and later on modify the DOM tree based on the returned results.

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.

Information sources

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.

After you complete the Mastering Ajax series and start some development of your own, you will also need reference information. W3Schools (see Resources) provides online reference information for the core Ajax technologies (JavaScript, CSS, HTML, DOM, XML, and so on).

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 browser as a run-time environment

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)
• Firefox
• Safari

Internet Explorer

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:

• Slow JavaScript interpreter and inconsistent standards implementations.
• 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.

IE7 provides many visible improvements over IE6, such as tab support. For developers, the hidden improvements are more important. IE7 provides a better performing JavaScript interpreter and fixes many of the flaws in IE6 (CSS, for example) such that most standard-compliant Ajax applications should be able to run on it with very few modifications.

IE debugging aids

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.)
• The Microsoft Script Debugger: Shipped with Microsoft Office (and downloadable from Microsoft, see Resources), lets you place breakpoints in your JavaScript code, watch variables, and in general perform regular debugging routines. Note that when debugging, it is recommended to disable the cache via the IE Developer Toolbar before every debug session or you will be debugging cached versions of your code.

IE related browsers

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).

Mozilla Firefox

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 fast JavaScript interpreter and a very good implementation of the various Web standards. Because of its Ajax friendliness, we highly recommend using Firefox for most of your Ajax development. In general, many Ajax developers start their application development on Firefox and later migrate it to other browsers.

Firefox debugging aids

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:

• Debug JavaScript code with breakpoints, with variable monitoring, and by stepping through the code.
• 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.

Firefox-related browsers

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

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.

Safari debugging aids

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.
• Drosera: A JavaScript debugger. Drosera lets you debug applications but is limited in features when compared to Firebug.

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.

Safari-related browsers

WebKit is used in several browsers, most noticeably OmniWeb.

Ajax IDEs and tools

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:

• Syntax-directed editing (for HTML, CSS, JavaScript, and the DOM) with features such as auto complete, color highlighting, error indications, and so on
• Related documentation for the various technologies
• An integrated JavaScript debugger
• 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
• Aptana

This section also covers the JsUnit unit testing package.

Eclipse with the Web toolkit

If you are a Java™ developer and have server-side Java responsibility, the Eclipse Web toolkit may be a simple and easy way to start basic Ajax development. Adding Eclipse's Web tools (see Resources) gives you a basic working environment for developing Web artifacts and provides editors and editing tools for HTML, CSS, and JavaScript files.

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.

The Eclipse ATF

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
• A JavaScript debugger (by leveraging the Mozilla XUL runner)
• Network traffic monitoring
• Simple library integration for common libraries through library profiles
• Integration with JSLint (see Resources) to perform JavaScript validation

A valuable feature of this toolkit is the ability to run, test, and inspect your application in the integrated XUL runner.

Aptana

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
• A complete editing environment for Ajax artifacts with JavaScript code analysis, DOM integration, and browser compatibility information
• 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.

JsUnit

JsUnit (see Resources) is a JavaScript-based unit-testing framework that was created by porting JUnit (a common Java unit testing library) to JavaScript. JsUnit supports both the definition of test cases for JavaScript functions and running them inside a browser environment. If you seek a way to perform consistent unit tests of developed code, JsUnit can be a useful framework.

Ajax frameworks

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
• Providing useful JavaScript methods that simplify many common Ajax development tasks, such as DOM manipulation and event registration, among others

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).

Prototype

Prototype (see Resources) is a JavaScript library that introduces powerful functions to help simplify Ajax programming. While it may not be considered as an Ajax framework itself, it lies at the core of several other frameworks, such as script.aculo.us, Moo.fx2, Rico, and others. Prototype supports:

• 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).

An example Prototype scenario

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 div element most-recent-news. Listing 1 demonstrates one example of the many powerful functions provided by Prototype:

                
<html>
   <head>
      <script src="js/prototype.js" type="text/javascript"></script>
      <script type="text/javascript">
          function updateNews() {
              new Ajax.Updater(
                  {success: 'most-recent-news'},
                  'http://myserver/news/recent-news'
	        );
              setTimeout("updateNews()",60000);
          }
      </script>
    </head>
    <body onload="updateNews()">
        <h1>Recent News</h1>
        <div id="most-recent-news"></div>
    </body>
</html>
            

Without the use of Prototype, this example scenario would have required many more details and much more coding effort.

Script.aculo.us

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:

• Shallow DOM manipulation with a JavaScript-based DOM builder
• 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:

                
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
...
<div onclick="new Effect.Fade(this)">
    Click here to see me fade out!
</div></html>
            

The Dojo Toolkit

The Dojo Toolkit (see Resources) is a comprehensive Ajax framework that meets a broad set of needs. Dojo provides:

• Cross-browser stdlib for JavaScript
• 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.

The Rico framework

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.

Beginner's roadmap -- get started now

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).

Summary and next steps

At this point, you probably have more than enough Ajax application development tool information to chew on, and if you've followed the beginner's roadmap mentioned here, you have a bit of practical, hands-on experience with Ajax applications. So what's next? Reading in-depth about Ajax-related technologies and choosing and reading about an Ajax framework to use will help you build your knowledge base. There is a lot of material out there on HTML, JavaScript, and CSS (see Resources for a link to W3School tutorials, which are a good place to start). You should also go through the Ajax Patterns site (see Resources). And nothing gets you started faster than getting started -- test the waters by writing an application of your own.

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!

Resources

Learn

• The developerWorks Ajax resource center is packed with Ajax resources to help you get started, including links to descriptions of these standards: JavaScript, Cascading Style Sheets (CSS), HTML, the XMLHttpRequest object, and Document Object Model (DOM).
  
  
• W3Schools provides online reference information for all core Ajax technologies (JavaScript, CSS, HTML, DOM, XML, and so on).
  
  
• 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 specifications.
  
  
• The Mastering Ajax 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 ‘Ajaxian.com 2006 Survey Results.
  
  
• 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 "HelloWorld" tutorial.
  
  
• 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 JavaScript and JSON articles on his Web site.
  
  
• "Migrate 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.
  
  
• Adding Eclipse's Web tools gives you a basic working environment for developing Web artifacts, and provides editors and editing tools for HTML, CSS, and JavaScript files.
  
  
• 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.
  
  
• JsUnit is a JavaScript-based unit-testing framework that was created by porting JUnit (a common Java unit testing library) to JavaScript.
  
  
• JSLint is a JavaScript program that looks for problems in JavaScript programs.
  
  
• Prototype is a JavaScript library that introduces powerful functions to help simplify Ajax programming.
  
  

Discuss

• If you want to feel the pulse of the Ajax community, subscribe to the Ajaxian blog.
  
  

About the authors

Rate this article

Comments

Back to top

Table of contents

• Getting on board the Ajax wagon
• Information sources
• The browser as a run-time environment
• Ajax IDEs and tools
• Ajax frameworks
• Beginner's roadmap -- get started now
• Summary and next steps
• Resources
• About the authors
• Comments

Next steps from IBM

Create rich Internet applications using WebSphere Portal Express Web 2.0 technologies.

---

• Try: WebSphere Portal Express
• Article: Get started using Ajax and WebSphere Portal Express
• Tutorial: Quickly build a an Ajax-enabled WebSphere Portal Express Web application
• Demo: Architecture, design, and construction using the IBM Rational Software Delivery Platform: AJAX
• Buy: WebSphere Portal Express

Dig deeper into Web development on developerWorks

IBM SmartCloud trial. No charge.

Unleash the power of hybrid cloud computing today!

---

Public and private solutions in one trial.

Special offers