Ajax cannot be used in disorder. Select a practical scenario.

Ajax is not omnipotent. Ajax can be used to give full play to its strengths, improve system performance and user experience, and cannot be abused for technical purposes, the result of abuse is to make yourself tired and hard. Ajax is characterized by Asynchronous interaction and dynamic updating of web pages. Therefore, it is applicable to Web applications that have many interactions and frequently read data. Now let's take a look at several Ajax application examples. Readers can learn how to use Ajax technology to improve the existing web application system.

Scenario 1. Data Verification

When entering the form content, you must ensure the uniqueness of the data (such as the username entered by the new user registration). Therefore, you must perform data verification on the content entered by the user. There are usually two ways to verify data: one is to directly fill in and then submit the form, this method needs to submit this page to the server for verification, the entire process not only takes a long time but also causes unnecessary server burden. The second method is to improve the verification process. You can click the corresponding verification button to open a new window to view the verification result, however, a new browser window or dialog box is required, and a page for verification is also required, which consumes system resources. With Ajax technology, the XMLHTTPRequest object can send a verification request and determine whether the verification is successful Based on the returned HTTP response. A new window does not need to be popped up or the entire page is submitted to the server, fast without increasing the server load.

Scenario 2. Retrieve data as needed

The classification tree or tree structure is widely used in Web application systems. For example, the Department structure and document scoring class structure are usually presented in a tree space. In the past, every operation on the category tree would cause page overloading. In order to avoid this situation, we generally do not use the background method every time we call it, instead, the data in the classification results is read at one time and written into the array. Then, based on the user's operations, JavaScript is used to control the node rendering. This solves the operation response speed, do not load pages repeatedly and avoid frequent requests to the server. However, if you do not perform operations on a category or only perform operations on a portion of the data in the category tree (this is common ), therefore, the read data will have a considerable amount of redundancy, which wastes user resources. Especially when the classification structure is complex and the data size is large, this disadvantage is even more obvious.

Now, Ajax is used to improve the implementation mechanism of the classification tree. On the initialization page, only the data of the first level of sub-category is obtained and displayed. When a user clicks the first point of the first level of classification, the page uses ajax to request all data of the second-level subcategory to which the current category belongs. If you request a node of the second-level subcategory that has already been presented, request all data of the third-level subcategory to the server again, and so on. The page will request the data required by the server based on the user's operations, so that there will be no data redundancy, reducing the total amount of data downloads. At the same time, you do not need to reload all the content when updating the page. You only need to update the part of the content that needs to be updated. Compared with the background processing and reload method, this greatly shortens the waiting time of users.

Scenario 3. automatically update the page

There is a lot of rapid data changes in Web applications, such as the latest hot news, weather forecasts, and chat room content. Before Ajax appears, you must refresh the page to check whether any new content changes, even if you know the corresponding content, or the page itself implements the timed refresh function (this is what most chat room pages do ). This may happen. For some time, the content of the webpage has not changed, but the user does not know it and continues to refresh the page; or the user has lost patience and gave up refreshing the page, but it is very likely that there will be new messages here, thus missing the opportunity to get the message as soon as possible.

The Application of AJAX can improve this situation. After a page is loaded, the Ajax engine performs regular round robin in the background to send requests to the server to check whether there are any latest messages. If yes, download new data (rather than all data) and dynamically update the data on the page to notify users in a certain way (implementing such a function is exactly the strength of JavaScript ). This avoids the inconvenience of manual page refresh and does not waste resources because of repeated page refresh.

Therefore, I am writing this article to warn myself That Ajax is mainly used to improve efficiency and use Ajax for local data, which can greatly improve website performance and user experience. If it is abused, it will be exhausting myself, it cannot be used to display or show Ajax, so we have to not try it. Remember!