Ajax for Java developers: Building dynamic Java Applications

In WEB application development, page overload cycling is one of the biggest barriers to use, and a daunting challenge for Java™ developers. In this series, author Philip McCarthy describes a pioneering way to create a dynamic application experience. Ajax (asynchronous JavaScript and XML) is a programming technique that allows you to combine Java technology, XML, and JavaScript into Java-based WEB applications to break the paradigm of page overloading.

Ajax (that is, asynchronous JavaScript and XML) is a Web application development tool that uses client script to exchange data with a Web server. Therefore, you can dynamically update Web pages without having to use a full page refresh that interrupts interaction. With Ajax, you can create richer, more dynamic WEB application user interfaces, with immediacy and availability even closer to native desktop applications.

Ajax is not a technology, but more like a pattern--a way to identify and describe useful design techniques. Ajax is novel, because many developers are just beginning to know about it, but all the components that implement AJAX applications have been around for several years. It is now being valued because of the great dynamic Web UI that emerged from Ajax Technologies in 2004 and 2005, most notably Google's GMail and Maps apps, and Flickr, the photo-sharing site. These user interfaces are groundbreaking enough, some developers call it "Web 2.0," so the interest in Ajax applications is soaring.

In this series, I will provide all the tools you need to develop your application using Ajax. In the first article, I'll explain the concepts behind Ajax and demonstrate the basic steps of creating an Ajax interface for java-based WEB applications. I'll use code samples to demonstrate server-side Java code and client JavaScript that make Ajax applications so dynamic. Finally, I'll point out some of the drawbacks of the AJAX approach, as well as some of the broader usability and accessibility issues that should be considered when creating AJAX applications.

A better shopping cart

You can use Ajax to enhance traditional Web applications, simplifying interactions by eliminating page loading. To illustrate this, I take a simple shopping cart example, which is dynamically updated when I add an item to it. If the technology is integrated into an online store, users can continuously browse and add items to the cart without having to wait for full page updates after each click. Although some of the code in this article is specific to the shopping cart example, the techniques demonstrated can be applied to any AJAX application. Listing 1 shows the HTML code used in the shopping cart example, which is used throughout the article.

Listing 1. A piece about the shopping cart sample

<!-- Table of products from store's catalog, one row per item -->
<th>Name</th> <th>Description</th> <th>Price</th> <th></th>
...
<tr>
　<!-- Item details -->
　<td>Hat</td> <td>Stylish bowler hat</td> <td>$19.99</td>
　<td>
　　<!-- Click button to add item to cart via Ajax request -->
　　<button onclick="addToCart('hat001')">Add to Cart</button>
　</td>
</tr>
...
<!-- Representation of shopping cart, updated asynchronously -->
<ul id="cart-contents">
　<!-- List-items will be added here for each item in the cart -->

</ul>
<!-- Total cost of items in cart displayed inside span element -->
Total cost: <span id="total">$0.00</span>