20151210 Jquery Learning Notes AJAX Advanced

A 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 ().

Request load prompt display and hide

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

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 a global event, you can set the Cancel

$.ajax ({global:false});

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 () using property hint error

$.ajax ({type: ' POST ', url: ' test1.php ', data:$ (' form '). Serialize (), Success:function (RESPONSE,STATUS,XHR) {$ (' #box ') . HTML (response); }, Error:function (XHR,) {alert (xhr.status+ ': ' +xhr.statustext);}});

$.post () Use concatenating. Error () method to prompt for errors, concatenating method will be replaced by. Fail ()

$.post (' test1.php '). Error (function (xhr,status,info) {alert (xhr.status+ ': ' +xhr.statustext); alert (status+ ': ' +info ); });

$.post () Use Global. Ajaxerror () event hint error

$ (document). Ajaxerror (function (event,xhr,settings,infoerror) {alert (xhr.status+ ': ' +xhr.statustext); alert ( settings+ ': ' +info); });

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 (), executed when the request was completed successfully.

. Ajaxcomplete (), corresponding to a local method:. Complete (), registering 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 a 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);});

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 some of the parameters of the global event methods, most of them are objects, which properties or methods can be called, which can be obtained through the traversal method.

Traversing the properties of a Settings object

$ (document). Ajaxsuccess (function (event,xhr,settings) {for (var i in Settings) {alert (i);}});

$.post () The local method that the request completed. 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) {$ (' #box '). HTML (response); }, Complete:function (xhr,status) {alert (' Finish ' + '-' +xhr.responsetext+ '-' +status '), Beforesend:function (xhr,settings {alert (' before ' request ' + '-' +xhr.readystate+ '-' +settings.url);}});

　　

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

20151210 Jquery Learning Notes AJAX Advanced