Article: Ajax for Java developers: Build dynamic Java applications

Ajax, or Asynchronous JavaScript and XML, is an approach to Web application development that uses client-side scripting to exchange data with the Web server. As a result, Web pages are dynamically updated without a full page refresh interrupting the interaction flow. With Ajax, you can create richer, more dynamic Web application user interfaces that approach the immediacy and usability of native desktop applications.

Ajax isn't a technology, it's more of a pattern -- a way to identify and describe a useful design technique. Ajax is new in the sense that many developers are just beginning to be aware of it, but all of the components that implement an Ajax application have existed for several years. The current buzz is because of the emergence in 2004 and 2005 of some great dynamic Web UIs based on Ajax technology, most notably Google's GMail and Maps applications and the photo-sharing site Flickr. These UIs were sufficiently groundbreaking to be dubbed "Web 2.0" by some developers, with the resulting interest in Ajax applications skyrocketing.

In this series, I'll give you all the tools you need to begin developing your own applications using Ajax. In this first article, I'll explain the concepts behind Ajax and demonstrate the fundamental steps to creating an Ajax interface for a Java-based Web application. I'll use code examples to demonstrate both the server-side Java code and the client-side JavaScript that make Ajax applications so dynamic. Finally, I'll point out some of the pitfalls of the Ajax approach, as well as the broader usability and accessibility issues you should consider when creating Ajax applications.

A better shopping cart
You can use Ajax to enhance traditional Web applications, streamlining interaction by eliminating page loads. To demonstrate this, I'll use the simple example of a shopping cart that is dynamically updated as items are added to it. Incorporated into an online store, this approach would let users continue browsing and adding items to their carts without having to wait after each click for a full-page update. While some of the code in this article is specific to the shopping cart example, the techniques illustrated can be applied to any Ajax application. Listing 1 shows the relevant HTML code the shopping-cart example uses. I'll refer back to this HTML throughout the article.

Listing 1. Relevant fragments of the shopping cart example

<!-- 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>

.....

[Read More..]

Courtesy:- http://www.ibm.com/