Detailed introduction to events in jQuery Ajax_jquery

Ajax triggers many events.
There are two kinds of events, one is local event and the other is global event:
Local events: called and allocated through $.ajax.

Copy code The code is as follows:

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

Global events can be bound using bind and unbind can be used to unbind. This is similar to click/mousedown/keyup and other events. But it can be passed to every DOM element.

Copy code The code is as follows:

$("#loading").bind("ajaxSend", function(){ //Use bind
$(this).show();
}).ajaxComplete(function(){ //Use ajaxComplete directly
$(this).hide();
});

Of course, if you don’t want a global event to be generated for a certain Ajax request, you can set global:false

Copy code The code is as follows:

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

The sequence of events is as follows:

ajaxStart global event
Starts a new Ajax request and no other Ajax requests are in progress at this time.
beforeSend local event
Fired when an Ajax request starts. You can set the XHR object here if needed.
ajaxSend global event
Global event triggered before request starts
success local event
Triggered when the request is successful. That is, the server does not return an error, and the returned data has no errors.
ajaxSuccess global event
Global request successful
error local event
Only triggered when an error occurs. You cannot execute both success and error callback functions at the same time.
ajaxError global event
Globally triggered when an error occurs
complete local event
Regardless of whether your request succeeds or fails, even if it is a synchronous request, you can trigger this event when the request is completed.
ajaxComplete global event
Triggered when the global request is completed
ajaxStop global event
Fires when no Ajax is in progress.

The parameters of local event callbacks are clearly written in the documentation, so I won’t go into details here.

In the global event, except ajaxStart and ajaxStop, other events have 3 parameters
event, XMLHttpRequest, ajaxOptions
The first is an event, the second is an XHR object, and the third parameter is the most useful, it is the parameter when calling this ajax.
For ajaxError, there is a fourth parameter, thrownError, which will only be passed when an exception occurs.
We can use ajaxOptions to write a global ajax event.
For example

Copy code The code is as follows:

$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("Requesting" o.url);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.url "Request successful");
}).ajaxError(function(e,xhr,o) {
$(this).html(o.url "Request failed");
});

For this example,
In this way, we can easily display the current ajax status somewhere globally.
Of course, as mentioned before, the third parameter is actually the parameter passed to ajax. Methods such as get/post/load/getScript/getJSON essentially call ajax methods, so the ajaxOptions.url attribute is always valid.

There are many more examples.
If you call with ajax, you can also pass custom parameters. In the following example, I customized a msg parameter for the ajax call

Copy code The code is as follows:

//Custom parameter msg
$.ajax({url:"test1.html",type:"get",msg:"page one"});
$.ajax({url:"test2.html",type:"get",msg:"Page 2"});
$.ajax({url:"test3.html",type:"get",msg:"page three"});
$.ajax({url:"test4.html",type:"get",msg:"Page 4"});

//Here you can get the custom parameter msg.
//This can be used to treat different ajax requests differently.
$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("Requesting" o.msg);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.msg "Request successful");
}).ajaxError(function(e,xhr,o) {
$(this).html(o.msg "Request failed");
});

Finally, there is something to say about the load method.

Other simple ajax methods, such as get, post, getJSON, etc., their callback functions are all set with success callbacks.

And only the load setting is actually the complete callback.

So, the callback function set in load should have 2 parameters.

XMLHttpRequest and textStatus
But that's not actually the case.
The load callback has three parameters
XMLHttpRequest.responseText, textStatus, XMLHttpRequest
So, you can
in the callback of load Use textStatus=="success" or textStatus=="error" to determine whether the call is successful.
Or use the XMLHttpRequest.status attribute to determine whether it is 200 or 404 or something else.

In this regard, I think it is more advanced than ordinary get/post methods. It is impossible to set the error of each get in odd numbers. But setting a global ajaxError is actually a good choice.