Flexible use of Ajax methods Beforesend improve user experience

We know that there is a method beforesend in the open source framework jquery Api--jquery.ajax to add some handler functions before sending a request to the server. This is an AJAX event that is triggered before the AJAX request starts, usually allowing the user to modify the XMLHttpRequest object (for example, setting additional header information), and an explanation of the Ajax event can be referenced in the documentation: Http://docs.jquery.com/Ajax_Events

Here we discuss how to improve the Web application interaction experience. Often, because of objective factors such as the network, when the browser sends a request to the server, the server does not respond immediately and waits several milliseconds or even a few seconds. And many Internet users do not know that this phenomenon, some of them mistakenly believe that they did not operate successfully (such as the button did not click on), which will repeat the previous action several times, if not the Web page front-end code to do the corresponding processing, usually causes the same request repeatedly submitted. To avoid this, we typically increase the processing of beforesend events in our code, for example, immediately after the user clicks the button and gives a prompt, such as "Please wait while the request is sent".

Often we also see a situation, many Web sites in the process of loading content in the "Data loading, please wait," the prompt, when the content is loaded after the display content. Obviously such requirements can also be met by Beforesend event processing, but I do not recommend this approach, so a little optimization of the method is what. Please look down.

Suppose we want to display the HTML tag of the content as <p id= "content" ></p>, we can set the default text of the label to the prompt in the load. The sample code is as follows:

<p id= "Content" > Data loading, please wait </p>

When the content is loaded, we can replace the text in the label with the final content through the ID selector. In order to replace the 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 show are consistent before and after the AJAX request, and if the DOM element you are presenting is already there before the request, then it would be better to do so by replacing it with the text. If you need to add other needs, then use Beforesend to deal with it.

The problem is simple, but if you think about it in depth, the solution may be different. The author aims to make a research, hope that some small needs can also be in-depth analysis, continuous optimization, improve your code.