Ajax| Program | programmer | dynamic
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 ＞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＞The Ajax interaction begins with a JavaScript object called XMLHttpRequest. As the name suggests, it allows client script to execute HTTP requests and parse XML server responses. The first step in the Ajax roundtrip process is to create an instance of XMLHttpRequest. Sets the HTTP method (get or POST) that the request uses on the XMLHttpRequest object and the destination URL.
Now, do you remember that Ajax's first A is for asynchronous (asynchronous)? When sending an HTTP request, you do not want the browser to hang waiting for the server to respond. Instead, you want the browser to continue to respond to the user's interaction with the page and then process the server response when it arrives. To implement this requirement, you can register a callback function on the XMLHttpRequest and assign XMLHttpRequest asynchronously. The control then returns to the browser, and the callback function is invoked when the server response arrives.
On a Java Web server, the request arrives like any other httpservletrequest. After parsing the request parameters, the servlet invokes the necessary application logic, serializes the response into XML, and writes the XML to the HttpServletResponse.
When you return to the client, the callback function registered on the XMLHttpRequest is now invoked to handle the XML document returned by the server. Finally, the user interface is updated by using JavaScript to manipulate the HTML DOM of the page based on the data returned by the server. Figure 1 is a sequential diagram of the Ajax round-trip process.
Figure 1. Ajax Roundtrip process
Now you have a high level of understanding of the Ajax round-trip process. I'll zoom in on each of these steps for a more detailed look. If you get lost in the process, look back at the figure 1--because of the asynchronous nature of the Ajax approach, the order is not very simple.
[1] [2] [3] [4] [5] Next page
