Ajax technical solution 2

The term Ajax is used to describe a group of technologies that allow browsers to provide users with a more natural browsing experience. Before Ajax, the Web site forces the user to enter the submit/Wait/re-display example, and the user's actions are always synchronized with the "thinking time" of the server. Ajax provides the ability to communicate asynchronously with the server, freeing users from the loop of requests/responses. With Ajax, you can use JavaScript and DHTML to immediately update the UI when you click a button, and send an asynchronous request to the server for updating or querying the database. When a request is returned, you can use JavaScript and CSS to update the UI, instead of refreshing the entire page. Most importantly, users do not even know that the browser is communicating with the server: The Web site seems to be responding instantly.

Although the infrastructure required by Ajax has been around for a while, the real power of asynchronous requests has not been exploited until recently. It is really exciting to have a very responsive web site, it eventually allows developers and designers to use standard HTML, CSS, and JavaScript stacks to create "desktop-like" availability.

Comparison with traditional Web Applications

Traditional Web applications allow users to enter forms and send a request to the Web server when a form is submitted. The server receives and processes the form and then returns a new webpage. This method wastes a lot of bandwidth, because most of the HTML code on the first and second pages is usually the same. Because each application interaction requires sending a request to the server, the response time of the application depends on the response time of the server. This causes the user interface to respond much slower than the local application.

In contrast, an Ajax application can only send and retrieve necessary data to the server. It uses soap or some other XML-based Web service interfaces and uses JavaScript on the client to process responses from the server. Because the amount of data exchanged between the server and the browser is greatly reduced, we can see applications with faster response. At the same time, a lot of processing work can be done on the client machine that sends the request, so the processing time of the Web server is also reduced.

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 allows you to use JavaScript to request and process responses to the server without blocking users.

When creating a web site, executing screen updates on the client gives you great flexibility. The following functions can be completed using Ajax:

• Dynamically update the total number of items in the shopping cart. You do not need to click Update and wait for the server to resend the entire page.
• This improves site performance by reducing the amount of data downloaded from the server. For example, on the Amazon shopping cart page, when updating the number of items in the basket, the entire page is reloaded, which must download 32 K data. If Ajax is used to calculate the new total, the server returns only the new total value, so the required bandwidth is only 1% of the original total.
• This eliminates the page refresh for each user input. For example, in Ajax, if you click Next on the page list, the server data will only refresh the list rather than the whole page.
• Directly edit table data, rather than requiring users to navigate to a new page to edit data. For Ajax, When you click Edit, You can refresh the static table as an editable table. After you Click Done, you can send an Ajax request to update the server and refresh the table so that it contains static and read-only data.

 

Ajax advantages

1. reduce the burden on the server. Because the fundamental idea of AJAX is to "retrieve data on demand", it is possible to minimize the burden on servers caused by redundant requests and sound shadows;

2. The page is refreshed to reduce the user's actual and psychological waiting time;

First, the "retrieve data on demand" mode reduces the actual amount of data read, if the method of overloading is to return from one end point to the origin point and then to another end point, Ajax means to reach another end point based on one end point;

Figure 5-1

Figure 5-2

Second, even if you want to read large data, you do not need to use a white screen like Reload. Because Ajax uses XMLHTTP to send a request to obtain the server response data, when the entire page is not re-loaded, JavaScript is used to operate the Dom to finally update the page. Therefore, when reading data, the user is not facing a white screen, but the original page status (or you can add a loading prompt box to let the user know the status of Data Reading). The content of the corresponding part is updated only after receiving all the data, this kind of update is also instantaneous, and users can hardly feel it. In short, users are very sensitive. They can feel that you are considerate to them. Although they are unlikely to have immediate results, they will accumulate their dependence on the website by 1.1 in the hearts of users.

 

3. Better User Experience;
4. Some previous server workload can also be transferred to the client, which facilitates the idle processing capability of the client, reduces the server and bandwidth burden, and saves space and bandwidth rental costs;
5. Ajax can call external data;
6. It is based on standardized and widely supported technologies, and does not require plug-ins or downloading applets;
7. Ajax separates the web interface from the application (or data and presentation separation );
8. This is a double profit for users and ISPs.

Ajax Problems

1. Some handheld devices (such as mobile phones and PDAs) cannot support Ajax yet;
2. Javascript-based Ajax engines, JavaScript compatibility and debugging are a headache;

3. Ajax does not refresh any new loads, because the page changes are not as obvious as refreshing or reloading, it is easy to cause problems to users-users are not sure whether the current data is new or updated. The existing solutions include: the relevant location prompts, data update areas are designed to be obvious, and user prompts are given after the data is updated;

4. The support for streaming media is not as good as flash and Java Applet;