Global/local event examples of Ajax in jquery

(i) Local events

Local event: An event that is bound in a single Ajax request object, and each Ajax request object can bind its own local events as needed. A local event is only triggered by the Ajax object that binds the event, and is a private (or partial) event that belongs to 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
}
// ......
});
(ii) Global events

Global events: In addition to the local events mentioned above, there is a class of events--global events, such as Ajaxsend/ajaxcomplete/ajaxerror/ajaxsuccess/ajaxstart/ajaxstop--for Ajax-related jquery events. It is not difficult to find the naming differences between global events and local events, with the names of global events beginning with Ajax.

Global events, as the name suggests, "global" means the event that all Ajax request objects in the entire HTML document are public, not a single AJAX request-private event, so the handler function for such an event cannot be defined in an AJAX request. So where are the handler functions for these global events bound? --Tied to the document object.

$ (document). Bind ("Ajaxsend", function () {
$ ("#loading"). Show ();
}. Bind ("Ajaxcomplete", function () {
$ ("#loading"). Hide ();
});
(1) Global event refinement classification

Global events are divided into 2 different types of events:
1. The trigger condition of the ajaxstart/ajaxstop is affected by all the Ajax objects in the document.

Ajaxstart Trigger moment: The jquery website explains that "an AJAX request in the document has started (started) without any other AJAX requests that are running (running)";
This means:
If the first AJAX request has not finished running and another AJAX request is started, then the Ajaxstart event is triggered only once at the start of the first AJAX request;
If the first Ajax request is finished and then another AJAX request is started, the Ajaxstart event will fire once at the start of the first request, and then one at the beginning of the second request;

Ajaxstop Trigger Time: "Currently running Ajax requests are closed";
This means that there must be no Ajax request running in the document when the event is triggered, and this event may be triggered multiple times;

2. The trigger condition of the ajaxsend/ajaxcomplete/ajaxerror/ajaxsuccess does not require the common influence of all AJAX requests in the document, and their trigger condition is simple: each AJAX request in the document triggers these events.

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

Since the triggering of global events is affected by all the AJAX request objects in the document, what happens when we want an AJAX request not to trigger a global event? --just set the global parameter of this Ajax object to False.

$.ajax ({
URL: "Test.html",
Global:false,
// ...
});
Jquery Ajax Event Trigger sequence and trigger condition

The following order is the sequence of triggers for AJAX events (from to post)
1, Ajaxstart (Global Event)

This event is triggered if a AJAX request is started and no other AJAX requests are currently running.

2, Beforesend (local Event)

This event, which are triggered before an Ajax request is started, allows your to modify the XMLHttpRequest object (setting Additional headers, if need be.) (The//ajax object has been generated (started) but no network request has been actually initiated.) This event is commonly used to modify the request headers of an Ajax object. When this event callback function is return FALSE, the AJAX request is canceled.

3, Ajaxsend (Global Event)

This global event was 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). (//The success of the texts tatus= ' success/notmodified/nocontent ' when triggered. The data in the callback function is what jquery does with Datafilter and datatype. The success value is generally a function, but it can also be an array of function, and all function in the array will be called in order.

5, Ajaxsuccess (Global Event)

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

6. Error (Local Event)

This is the ' only called if ' occurred with the ' request (you can never have both an error and a success callback W ith a request). (called//textstatus= ' Error/timeout/abort/parseerror ', the error value is generally a function, but can also be an array of function, all in the array function will be called sequentially)

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'll always receive a complete callback, even for synchronous requests. (//Regardless of the request success or error, the event is triggered regardless of whether the request is synchronous or asynchronous.) The textstatus parameters in this event handler may be value: "Success", "Notmodified", "Nocontent", "Error", "Timeout", "Abort", or "ParserError". The complete value is generally a function, but it can also be an array of function, and all function in the array will be called in order.

9, Ajaxcomplete (Global Event)

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

10, Ajaxstop (Global Event)

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