[jquery Knowledge]jquery knowledge 14-ajax Advanced

Preface

1. Load Request
2. Error handling
3. Request Global Events

In the Ajax lesson, we learned about the most basic asynchronous processing methods. In this chapter, we'll look at some of the global request events, cross-domain processing, and other issues with Ajax. one. Load Request

When Ajax asynchronously sends a request, it encounters a slow speed, and the request takes longer. When a request exceeds a certain time, the user becomes impatient and closes the page. And if the user can be prompted during the request, for example: trying to load ..., then the same request time will make the user experience better.

JQuery provides two global events,. Ajaxstart () and. Ajaxstop (). Both global events, as long as the user triggers Ajax, is activated when the request starts (not completing other requests). Ajaxstart (), the request ends (all requests are ended). Ajaxstop ().

Requests the load prompt to display and hide 
$ ('. Loading '). Ajaxstart (function () {
$ (this). Show ();}). Ajaxstop (function () {
 $ (this). Hide ();
});

1 2 3 4 5 1 2 3 4 5

Note: The above code is not valid in jQuery1.8 and later versions and needs to be jquery-migrate backwards compatible to run. In the new version, you must bind to the document element.

$ (document). Ajaxstart (function () { 
$ ('. Loading '). Show ();
}). Ajaxstop (function () { 
$ ('. Loading '). Hide ();
});


If the request time is too long, you can set the timeout 
$.ajax ({
timeout:500});


If an AJAX does not want to trigger global events, you can set the Cancel 
$.ajax ({
global:false});

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 two. Error handling

When Ajax commits asynchronously, it is not possible for all cases to be completed successfully, as well as because of code async file errors and network errors that cause the submission to fail. At this point, we should report the error, reminding the user to resubmit or prompt the developer to fix it.
In the previous high-level package there was no callback error handling, such as. get (),. Post (), and. Load (). Therefore, the earlier method returns an error message by using the Global. Ajaxerror () event method. After jQuery1.5, you can use the Local. Error () method through concatenating processing. For the $.ajax () method, you can not only use these two methods, but also your own property method Error:function () {}.

$.ajax () uses the property hint error 
$.ajax ({
type: ' POST ',
URL: ' test1.php ',
data: $ (' form '). Serialize (),
Success:function (response, status, XHR) {
$ (' #box '). HTML (response);},
error:function (XHR, ErrorText, ErrorS tatus) {alert (xhr.status + ': ' + xhr.statustext);
}});

$.post () uses the concatenating. Error () method to tip the error, the Concatenating method will be replaced by. Fail () $.post (' test1.php '). Error (Function (XHR, status, info) {
alert ( Xhr.status + ': ' +xhr.statustext);
Alert (status + ': ' + info); });
$.post () uses the global. Ajaxerror () event hint error $ (document). Ajaxerror (function (event, XHR, Settings, infoerror) {
alert ( Xhr.status + ': ' +xhr.statustext);
Alert (settings+ ': ' + info); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 three. Request Global Events

JQuery provides many global event methods for AJAX operations, such as the. Ajaxstart (),. Ajaxstop (),. Ajaxerror (), and other event methods. They all belong to global events that are triggered at the time of the request, in addition to these, there are other global events:
. ajaxsuccess (), corresponding to a local method:. Success (), execution when the request completes successfully: Ajaxcomplete (), corresponding to a local method, complete (), register a callback function after the request is completed.
. Ajaxsend (), there is no corresponding local method, only the property beforesend, the function to bind before the request is sent.

$.post () uses the local method. Success ()
$.post (' test.php ', $ (' form '). Serialize (), function (response, status, XHR) {
$ (' # Box '). HTML (response); }). Success (function (response, status, XHR) {
alert (response);});


$.post () uses the global event method. Ajaxsuccess () $ (document). Ajaxsuccess (function (event, XHR, settings) {
alert ( Xhr.responsetext); });

1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10

Note: The global event method is triggered by all Ajax requests and can only be bound to the document. While the local method is for an Ajax.  
for the parameters of some global event methods, most of which are objects, which properties or methods can be called, can be obtained through the traversal method.

Traverse the properties of the Settings object $ (document). Ajaxsuccess (function (event, XHR, Settings) {for (var i in Settings) {alert (i);}}); $.post () The local method for completing the request. Complete () $.post (' test.php ', $ (' form '). Serialize (), function (response, status, XHR) {alert (' success ') );

}). Complete (function (xhr,status) {alert (' Done ');});


$.post () The global method that the request completed. Ajaxcomplete () $ (document). Ajaxcomplete (function (event, XHR, settings) {alert (' Done ');});



$.post () The global method before the request is sent. Ajaxsend () $ (document). Ajaxsend (function (event, XHR, settings) {alert (' before sending request ');}); 
The $.ajax () method can be set directly through the property. $.ajax ({type: ' POST ', url: ' test.php ', Data: $ (' form '). Serialize (), success:function (response, status, XHR) {$ (' #bo X '). HTML (response); }, Complete:function (XHR, status) {alert (' Finish ' + '-' + xhr.responsetext + '-' + status '), Beforesend:function (

 XHR, Settings) {alert (' before request ' + '-' + xhr.readystate + '-' + Settings.url);}});

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

Note: After the jQuery1.5 version, use the. Success (),. Error (), and. Complete () concatenating methods, which can be replaced with. Done (),. Fail (), and. Always ().