Flexible Use of Ajax beforesend to improve user experience

We know that there is a beforesend method in the open-source framework jquery API -- jquery. Ajax, which is used to add some processing functions before sending requests to the server. This is an Ajax event that is triggered before the Ajax request starts and usually allows the user to modify the XMLHTTPRequest object (for example, set the additional header information). For an explanation of Ajax events, see: http://docs.jquery.com/Ajax_Events

 

Here we will discuss how to improve the interactive experience of Web applications. Usually, when a browser sends a request to the server due to objective factors such as the network, the server does not respond immediately, and it takes several milliseconds or even several seconds. Many Internet users do not know this phenomenon. Some of them mistakenly believe that they have not succeeded in the operation (for example, the button has not been clicked) and will repeat the previous operations, if the front-end code of the web page is not processed properly, the same request is usually submitted multiple times. To avoid this, we usually add beforesend event processing in the Code. For example, after a user clicks a button, a request such as "sending, please wait.

 

We often see a situation where many websites provide the "loading data, please wait" prompt during content loading. The content is displayed after the content is loaded. Obviously, this requirement can also be met through beforesend event processing. However, I do not recommend this method. What are some optimization methods? Read down.

 

Assuming that the HTML tag of the content to be displayed is <p id = "content"> </P>, we can set the default text of the tag as the loading prompt. The sample code is as follows:

<P id = "content"> loading data, please wait </P>

When the content is loaded, we can use the ID selector to replace the text in the tag with the final content. To replace beforesend, the efficiency is higher.

 

To sum up, when to use beforesend and when to replace it with text depends on whether the DOM elements you display are consistent before and after the Ajax request. If the DOM elements you display already exist before the request, the above text replacement method is better. If you need to add other requirements, use beforesend.

 

Although the problem is very simple, the solution may be different if you can consider it in depth. I hope that you can analyze some small demands in depth, continue to optimize and improve your code.