The events in jQuery Ajax are described in detail

  • 2020-05-30 19:20:22
  • OfStack

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


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

Global events can be bound with bind and unbound with unbind. This is similar to click/mousedown/keyup and so on. But it can be passed to every DOM element.

$("#loading").bind("ajaxSend", function(){ // use bind
    $(this).show();
}).ajaxComplete(function(){  // Direct use of ajaxComplete
    $(this).hide();
});

Of course, if one of your Ajax requests does not want to generate a global event, you can set global:false

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

The sequence of events is as follows:

ajaxStart global events
A new Ajax request is started, and no other ajax request is in progress at this time.
beforeSend local incident
Triggered when an Ajax request starts. You can set the XHR object here if you want.
ajaxSend global events
A global event that is triggered before the request starts
success local events
Triggered when the request succeeds. That is, the server did not return an error, and the returned data did not return an error.
ajaxSuccess global events
The global request was successful
error local events
Triggered only when an error occurs. You cannot execute both success and error callbacks at the same time.
ajaxError global events
Triggered when a global error occurs
complete local event
Whether your request succeeds or fails, even if it is a synchronous request, you can trigger the event when the request is completed.
ajaxComplete global events
Global request completion is triggered
ajaxStop global events
Triggered when no Ajax is in progress.

The parameters of the local event callback are clearly documented and will not be covered here.

In a global event, all events except ajaxStart and ajaxStop have three parameters
event, XMLHttpRequest, ajaxOptions
The first is the event, the second is the XHR object, and the third parameter is the most useful when the ajax is called.
For ajaxError, there is also a fourth parameter, thrownError, which is passed only when an exception occurs.
We can use ajaxOptions to write a global ajax event.
Such as


$("#msg").beforeSend(function(e,xhr,o) {
    $(this).html(" Is requesting "+o.url);
}).ajaxSuccess(function(e,xhr,o) {
    $(this).html(o.url+" The request is successful ");
}).ajaxError(function(e,xhr,o) {
    $(this).html(o.url+" The request failed ");
});

For this example,
This makes it easy to globally display the current ajax state somewhere.
Of course, as I said earlier, the third parameter is actually the parameter passed to ajax. get post/load getScript/getJSON methods are essentially ajax calling, so ajaxOptions url properties are always effective.

There are richer examples.
If you call it with ajax, you can also pass custom arguments. In the following example, I defined an msg parameter and gave it to the ajax call


// Custom parameter msg
$.ajax({url:"test1.html",type:"get",msg:" page 1"});
$.ajax({url:"test2.html",type:"get",msg:" page 2"});
$.ajax({url:"test3.html",type:"get",msg:" page 3"});
$.ajax({url:"test4.html",type:"get",msg:" page 4"});
 
// This is where you get your custom parameters msg .
// This can be used to discriminate between different ones ajax The request.
$("#msg").beforeSend(function(e,xhr,o) {
    $(this).html(" Is requesting "+o.msg);
}).ajaxSuccess(function(e,xhr,o) {
    $(this).html(o.msg+" The request is successful ");
}).ajaxError(function(e,xhr,o) {
    $(this).html(o.msg+" The request failed ");
});

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

Other simple ajax methods, such as get,post,getJSON, etc., have their callback functions set to success callback.

Only load actually sets an complete callback.

Therefore, the callback function set in load should have two arguments.

XMLHttpRequest and textStatus
But that's not really the case.
The callback for load takes three parameters
XMLHttpRequest.responseText, textStatus, XMLHttpRequest
So, you can do that in load callbacks
Determine whether the call was successful by textStatus== "success" or textStatus== "error".
Or use the XMLHttpRequest.status property to determine whether it is 200 or 404 or something else.

In this regard, I think it is more advanced than the normal get/post methods. It is not possible to set error per get in the singular. But setting up a global ajaxError is actually a good choice.


Related articles: