Jquery's Ajax global events and Ajax requests are displayed as "loading"

Instance

When an Ajax request is in progress, the "loading" indicator is displayed:

 
$ ("# TXT "). ajaxstart (function () {$ ("# Wait" ).css ("display", "Block") ;}); $ ("# TXT "). ajaxcomplete (function () {$ ("# Wait" ).css ("display", "NONE ");});
 

Jquery's Ajax global event details-about jquery (original address: http://www.36ria.com/2882)

Jquery is very powerful and convenient in Ajax. The following is a method template for jquery Ajax requests:

1. $. Ajax ({
2. Type: "Get ",
3. URL :"",
4. Data :{},
5. Beforesend: function (){
7. },
8. Success: function (data ){
10. },
11. Complete: function (){
13. }
14. });

I did not write this article about the use of the $. Ajax () method.ArticleToday, minghe mainly explains the complete event process when making Ajax requests.

All global events of jquery's Ajax method:

• Ajaxstart: Before the Ajax request starts
• Ajaxsend: Ajax request time
• Ajaxsuccess: After Ajax obtains data
• Ajaxcomplete: When the Ajax request is complete
• Ajaxerror: After an Ajax request error occurs
• Ajaxstop: After the Ajax request is stopped

When you use jquery's Ajax method, whether it is $. ajax (), $. get (), $. load (), $. getjson () and so on will trigger global events by default, but usually do not bind global events, but in fact these global events are very useful.

Use of global events of Ajax Methods

Ajax global events have a typical application scenario:

Your page has multiple or even a large number of Ajax requests, but these Ajax requests have the same message mechanism. A prompt box is displayed before the Ajax request starts, prompting "reading data"; when the Ajax request is successful, the prompt box displays "data obtained successfully"; after the Ajax request ends, the prompt box is hidden.

Global events are not used:

Add the beforesend, success, and complete callback functions to $. Ajax () and add a processing prompt box to the callback function.

Global events are used as follows:

1. $ (Document). ajaxstart (onstart)
2. . Ajaxcomplete (oncomplete)
3. . Ajaxsuccess (onsuccess );
5. Function onstart (event ){
6. //.....
7. }
8. Function oncomplete (event, xhr, settings ){
9. //.....
10. }
11. Function onsuccess (event, xhr, settings ){
12. //.....
13. }

Ajax method complete event stream

For more intuitive description, minghe uses axure to draw two flowcharts. Sorry for the poor picture. O (cost _ blank) O

Ajax method complete event stream demonstration

In order to make it easier for friends to understand the entire event stream, minghe made the following demo.

• Click here to download

Ming River co-shadows