What is Ajax? What is the working principle?

Ajax is used to describe a set of technologies that enable browsers to provide users with a more natural browsing experience. Before Ajax, Web sites forced users to enter the submit/wait/redisplay paradigm, and users' actions were always synchronized with the "thinking time" of the server. Ajax provides the ability to communicate asynchronously with the server, thus freeing users from the cycle of request/response. With the help of Ajax, you can use JavaScript and DHTML to update the UI immediately when the user clicks the button, and send an asynchronous request to the server to update or query the database. When the request returns, you can use JavaScript and CSS to update the UI accordingly, instead of refreshing the whole page. Most importantly, the user doesn't even know that the browser is communicating with the server: the Web site seems to be responsive immediately.

although the infrastructure required by Ajax has been around for some time, the real power of asynchronous requests has not been utilized until recently. Being able to have an extremely responsive Web site is really exciting because it ultimately allows developers and designers to create "desktop-like" usability using the standard HTML/CSS/JavaScript stack.

Generally, in J2EE, developers pay too much attention to the development of service and persistence layer, so that the usability of user interface has fallen behind. In a typical J2EE development cycle, we often hear such words as "We don't have time to invest in UI" or "It can't be implemented in HTML". However, the following Web sites prove that these reasons no longer hold water:

backpack

Google Suggest

Google Maps

Palm Sphere

All these Web sites tell us that Web applications don't have to rely entirely on reloading pages from the server to present changes to users. Everything seems to happen in an instant. In short, when it comes to the response sensitivity of the user interface, the benchmark is set higher.

define Ajax

Jesse James Garrett of Adaptive Path Company defines Ajax as follows:

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

representations based on XHTML and CSS standards;

use Document Object Model for dynamic display and interaction;

use XMLHttpRequest to communicate asynchronously with the server;

use JavaScript to bind everything.

that's great, but why name it Ajax? In fact, the term Ajax was invented by Jesse James Garrett, who said it was "short 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. It is a technology that supports asynchronous requests. In short, XmlHttpRequest enables you to use JavaScript to make requests to the server and process responses without blocking users.

when creating a Web site, performing screen updates on the client provides users with great flexibility. The following functions can be accomplished by Ajax:

dynamically Update the total number of items in the shopping cart, without the user clicking Update and waiting for the server to resend the whole page.

improve the performance of the site by reducing the amount of data downloaded from the server. For example, in Amazon's shopping cart page, when the quantity of an item in the basket is updated, the whole page will be reloaded, which requires downloading 32K data. If you use Ajax to calculate the new total, the server will only return the new total value, so the required bandwidth is only 1% of the original.

page refresh is eliminated every time the user inputs. For example, in Ajax, if a user clicks Next on a paginated list, the server data only refreshes the list, not the whole page.

edit table data directly instead of requiring users to navigate to a new page to edit data. For Ajax, when the user clicks Edit, the static table can be refreshed into a table with editable content. After the user clicks Done, he can send an Ajax request to update the server and refresh the table so that it contains static, read-only data.

anything is possible! I hope it can inspire you to start developing your own Ajax-based website. However, before we begin, let's introduce an existing Web site that follows the traditional submit/wait/redisplay paradigm, and we will also discuss how Ajax can improve the user experience.