Events related to ajax in jquery, jqueryajax

Events related to ajax in jquery, jqueryajax
Jquery ajax event classification (1) local events

Local events: Events bound to a single Ajax request object. Each Ajax request object can bind its own local events as needed. A local event is only triggered by the Ajax object bound to the event. It is a private (partial) event of a single Ajax object. Such events include beforeSend, complete, success, and error.

$.ajax({   beforeSend: function(){ // Handle the beforeSend event   },   complete: function(){ // Handle the complete event   }  // ...... });

(2) global events

Global events: In addition to the local events mentioned above, there is also a class of Ajax-related jquery events-global events, such as ajaxSend/ajaxComplete/ajaxError/ajaxSuccess/ajaxStart/ajaxStop. It is not difficult to find out the differences between global events and local events. The names of global events start with ajax.

Global events, as the name implies, "global" means all the events that are public to Ajax request objects in the entire html document. These events are not private to a single Ajax request, therefore, the processing functions of such events cannot be defined in an Ajax request. So where are these global event processing functions bound? -- Bind it to the document Object.

$(document).bind("ajaxSend", function(){   $("#loading").show(); }).bind("ajaxComplete", function(){   $("#loading").hide(); });

(1) detailed classification of global events

There are two different types of global events:
1. The trigger conditions of ajaxStart/ajaxStop are jointly affected by all Ajax objects in the document.

AjaxStart trigger time: the official jquery website explains that "an Ajax request has been started (started) in this document, and there are no other running Ajax requests ";
This means:
If another Ajax request is started before the first Ajax request is completed, the ajaxStart event is triggered only once when the first Ajax request starts;
If the first Ajax request has ended and another Ajax request has been started, the ajaxStart event will be triggered at the beginning of the first request and at the beginning of the second request;

AjaxStop trigger time: "All currently running Ajax requests have ended ";
This means that no Ajax request is running in the document when this event is triggered; this event may be triggered multiple times;

2. The trigger conditions of ajaxSend/ajaxComplete/ajaxError/ajaxSuccess do not need to be affected by all Ajax requests in the document. Their trigger conditions are simple: Each ajax request in the document triggers these events.

(2) How can a single Ajax object shield global events?

Since the triggering of global events is affected by all Ajax request objects in the document, what should we do if we want an Ajax request not to trigger a global event? -- You only need to set the global parameter of this Ajax object to false.

$.ajax({   url: "test.html",   global: false,   // ... });

Jquery ajax event trigger sequence and conditions

The order below is the order in which ajax events are triggered (first come, then)
1. ajaxStart (Global Event)

This event is triggered if an Ajax request is started and no other Ajax requests are currently running.

2. beforeSend (Local Event)

This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be .) (// The Ajax object has been generated (started), but no network request has been initiated. This event is often used to modify the request header of an Ajax object. When this event callback function return false, the ajax request will be canceled)

3. ajaxSend (Global Event)

This global event is also triggered before the request is run.

4. success (Local Event)

This event is only called if the request was successful (no errors from the server, no errors with the data ). (// triggered when textStatus = 'success/notmodified/nocontent' is successful. The data in the callback function is the data processed by jquery Based on dataFilter and dataType. The success value is generally a function, but it can also be a function Array. All functions in the array are called in order)

5. ajaxSuccess (Global Event)

This event is also only called if the request was successful.

6. error (Local Event)

This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request ). (// textStatus = 'error/timeout/abort/parseerror'. The error value is generally a function, but it can also be a function array, all functions in the array will be called in order)

7. ajaxError (Global Event)

This global event behaves the same as the local error event.

8. complete (Local Event)

This event is called regardless of if the request was successful, or not. you will always receive a complete callback, even for synchronous requests. (// This event is triggered no matter whether the request is success or error or whether the request is synchronous or asynchronous. The textStatus parameter in this event processing function may be set to "success", "notmodified", "nocontent", "error", "timeout", "abort", or "parsererror ". The complete value is generally a function, but it can also be a function Array. All functions in the array are called in order)

9. ajaxComplete (Global Event)

This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.

10. ajaxStop (Global Event)

This global event is triggered if there are no more Ajax requests being processed.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.