The core application of the Web2.0 era: Introduction to Ajax

Ajax|web|web2

As Java EE developers, we often seem to be concerned about the "back-end mechanism (backend mechanics)." We often forget that the main success of Java EE is in Web applications, and many reasons make people like to use web development applications, but primarily because of their ease of deployment, they allow the site to have millions of users at the lowest possible cost.

Unfortunately, over the last few years, we've spent too much time on the back end, but not enough to make our Web user interface responsive to the nature and responsiveness of our users.

This article describes a method, Ajax, that you can use to build a more dynamic and responsive Web application. The key to this approach is the combination of JavaScript, DHTML, and asynchronous communication with the server on the browser side. This article also demonstrates how easy it is to enable this method: An AJAX framework (DWR) is used to construct an application that communicates directly from the browser to the backend service. If used properly, this powerful force can make the application more natural and responsive, thereby enhancing the user's browsing experience.

The sample code used in this application has been packaged as a separate war file for download.

Brief introduction

The term Ajax is used to describe a set of techniques that enable browsers to provide a more natural browsing experience for users. Before Ajax, the Web site forced the user into the Submit/wait/display paradigm, and the user's actions were always synchronized with the server's "Think Time." Ajax provides the ability to communicate asynchronously with the server, freeing users from the request/response loop. With Ajax, you can use JavaScript and DHTML to update the UI immediately when the user clicks the button, and to send an asynchronous request to the server to perform an update or query the database. When the request returns, you can use JavaScript and CSS to update the UI appropriately instead of refreshing the entire page. Most importantly, the user doesn't even know that the browser is communicating with the server: The Web site appears to be responding instantly.

While the infrastructure required for Ajax has been on for some time, the true power of the recent asynchronous request has not been exploited. Being able to have a very responsive web site is really exciting because it ultimately allows developers and designers to create "desktop-style (desktop-like)" Usability using standard html/css/javascript stacks.

Typically, in Java EE, developers are too focused on the development of services and persistence layers that the usability of the user interface is lagging behind. In a typical Java EE development cycle, it is often heard that "we have no time to put the UI" or "cannot be implemented in HTML." However, the following Web site proves that these reasons are no longer tenable:

• BackPack
• Google suggest
• Google Maps
• Palmsphere

All of these Web sites tell us that Web applications do not have to rely entirely on the reload of the page from the server to render changes to the user. Everything seems to happen in an instant. In short, the benchmark is set even higher when it comes to the responsiveness of the user interface.

Defining Ajax

Adaptive Path Company Jesse James Garrett this definition of Ajax:

Ajax is not a technology. In fact, it is a combination of several booming technologies in a new and powerful way. Ajax contains:

• Representation based on XHTML and CSS standards;
• Use the document Object model for dynamic display and interaction;
• Asynchronous communication with the server using XMLHttpRequest;
• Use JavaScript to bind everything.

This is great, but why do you want to name it Ajax? In fact, the term Ajax was created by Jesse James Garrett, who said it was "shorthand for asynchronous JavaScript + XML."

How Ajax Works

The core of Ajax is the JavaScript object XMLHttpRequest. This object was first introduced in Internet Explorer 5, which is a technology that supports asynchronous requests. In short, XMLHttpRequest allows you to use JavaScript to make requests to the server and process the response without blocking the user.

When you create a Web site, performing a screen update on the client provides a lot of flexibility for the user. Here are the features you can do with Ajax:

• Dynamically update the total number of items in a shopping cart without requiring the user to click Update and wait for the server to resend the entire page.
• Improves the performance of the site by reducing the amount of data downloaded from the server. For example, on Amazon's shopping cart page, when the number of items in the basket is updated, the entire page is loaded, which must download 32K of data. If you use Ajax to calculate the new total, the server will only return the new total, so the required bandwidth is only 1%.
• Eliminates page refreshes each time the user enters. For example, in Ajax, if a user clicks Next on a paging list, the server data refreshes the list instead of the entire page.
• Edit the table data directly instead of requiring the user to navigate to the new page to edit the data. For Ajax, when a user clicks Edit, the static table can be refreshed to a table that is editable by the content. After the user clicks Done, an AJAX request can be made to update the server and refresh the table so that it contains static, read-only data.

Everything is possible! Hopefully it will inspire you to start developing your own AJAX based sites. Before we begin, however, let's introduce an existing Web site that follows the traditional submission/wait/re-display paradigm, and we'll discuss how Ajax can improve the user experience.

What are the scenarios that Ajax can be used for? --An example: MSN Money page

A few days ago, while browsing the MSN Money page, there was an article about real estate investment that aroused my curiosity. I decided to use the site's "Rate This article" (Evaluate this article) feature to encourage other users to spend a little time reading this article. After I clicked the vote button and waited a little while, the entire page was refreshed, and a beautiful picture of thanks appeared in the original voting question.

Ajax, in turn, can make the user's experience more enjoyable by providing a more responsive UI and eliminating the flicker of page refreshes. Currently, because you want to refresh the entire page, you need to send a large amount of data because you have to resend the entire page. If you use AJAX, the server can return a 500-byte message that contains a thank-you message instead of sending 26,813-byte messages to refresh the entire page. Even with the high-speed Internet, the difference between 26K and 1/2k is very large. It is also important to refresh only the section related to the vote, rather than refreshing the entire screen.

Let's use Ajax to implement our basic voting system.

[1] [2] [3] Next page