Detailed analysis of global ajax parameters in jquery

The problems analyzed in this article are amazing. It may be unavailable in general projects. Therefore, you must first understand this application scenario. After analysis, I found that jquery's global $. ajax can be used like this!

1. Background

Asynchronous operations using ajax requests on pages are currently quite common. We will add a progress display at the beginning of ajax and hide it after complete. But if there are multiple ajax requests in the page, how can we handle this progress? Single processing will certainly be very troublesome. For example, if you don't know when ajax processing is complete for all pages, you need to write specific code.

Single ajax request:
 

The code is as follows:

Copy code

Function GetEditData (){ If (ID = null | ID = 0) {return ;} // Start progress bar $ ("# Btnnext" modify .html ("modify "); $. Ajax ({ Type: "post ", Url: ajaxUrl, Data :{ Activeid: ID, Operate: "view" }, Success: function (data, textStatus ){ If (data! = Null ){ $ ("# Txttitle"). val (data. title );                 } Else { Alert ("failed to load data:"); return;                 } }, Complete: function (XMLHttpRequest, textStatus ){ // Complete. Remove progress bar }, Error: function (e ){ Alert ("failed to load data. "); Return;             } });     }

Or, in this case, when all active ajax requests in the form are submitted fail and an error event is triggered. How do I stop all active ajax requests in jQuery without trigerring?

2. Analysis

The global variables of ajax are used here. For details, refer to [Jquery $. ajax request details and ajax global variable analysis]. The global variables we use are described here.

Jquery $. ajax has some global variables:

. AjaxComplete () registers the handler to be called when the Ajax request is complete. This is an Ajax event.
. AjaxError () registers the handler to be called when the Ajax request is complete and an error occurs. This is an Ajax event.
. AjaxSend () displays a message before the Ajax request is sent.
JQuery. ajaxSetup () sets the default values for future Ajax requests.
. AjaxStart () registers the handler to be called when the first Ajax request is completed. This is an Ajax event.
. AjaxStop () registers the handler to be called when all Ajax requests are completed. This is an Ajax event.
. AjaxSuccess () displays a message when the Ajax request is successful.
With these global variables, we can save each ajax request and clear the cache after each ajax request is processed.

First, we define an object to save the data of each ajax request:
 

The code is as follows:	Copy code
Function AjaxModel (id, status ){ This. id = id; This. status = status; Return this; }

Then add the logic to the ajax processing event:

The code is as follows:

Copy code

// Add ajax global event processing. $ (Document). ajaxStart (function (a, B, c ){    }). AjaxSend (function (e, jqXHR, options ){        Sendcount ++; JqXHR. id = sendcount; Var model = new AjaxModel (jqXHR, 0 ); If (xhrPool. length = 0 ){ // Timer = setInterval ("CheckIsAjaxLoadok ()", 10); // 1000 is 1 second $. Fn. jqLoading ({height: 100, width: 240, text: "Loading ...."});     }    XhrPool. push (model ); }). AjaxError (function (e, xhr, opts ){ }). AjaxSuccess (function (e, xhr, opts ){ }). AjaxComplete (function (e, jqXHR, options ){              $. Each (xhrPool, function (key, val ){           If (val. id. id = jqXHR. id ){ Val. status = 1;         } }); Var xhrPooltemp = $. grep (xhrPool, function (x) {return x. status = 0 }); If (xhrPooltemp. length = 0 ){ $. Fn. jqLoading ("destroy ");     } }). AjaxStop (function (){ });

The most important thing here is to save the ajax XMLHttpRequest object to our defined array. Note:

Each time the XMLHttpRequest object jquery is saved, it is destroyed after ajax is complete. So here we can determine whether each ajax is complete. The XMLHttpRequest object does not have the id attribute. We can add this attribute to it by ourselves.
 

The code is as follows:	Copy code
. AjaxSend (function (e, jqXHR, options ){        Sendcount ++; JqXHR. id = sendcount; Var model = new AjaxModel (jqXHR, 0 ); If (xhrPool. length = 0 ){ // Timer = setInterval ("CheckIsAjaxLoadok ()", 10); // 1000 is 1 second $. Fn. jqLoading ({height: 100, width: 240, text: "Loading ...."});     }    XhrPool. push (model ); })

JqXHR. id = sendcount; add an id to the XMLHttpRequest object and give it an id in the order of request initiation.

In the complete function, we find the XMLHttpRequest object corresponding to the id and complete the settings.

In this way, we can manage all the ajax requests on this page. There are a lot of things to do. You can determine whether each ajax request is completed, stop all ajax requests, and cancel the mask layer after all ajax requests are completed.