jquery::ajaxStop() versus jquery::ajaxComplete()

Which is to be used at which time.

In the documentation on http://api.jquery.com/:

For ajaxStop() it says:

Description: Regis开发者_如何转开发ter a handler to be called when all Ajax requests have completed. This is an Ajax Event.

And for the ajaxComplete() it says:

Description: Register a handler to be called when Ajax requests complete. This is an Ajax Event.

From what I can see ajaxComplete() is more flexible due to:

All ajaxComplete handlers are invoked, regardless of what Ajax request was completed. If we must differentiate between the requests, we can use the parameters passed to the handler. Each time an ajaxComplete handler is executed, it is passed the event object, the XMLHttpRequest object, and the settings object that was used in the creation of the request.

Can someone explain what each is for and the appropriate usage for each. In an application I built recently I relied on ajaxStop() to fire when my ajax calls were finished. I would then parse the returned data for result of server side operation. Now I am starting to wonder if I should have used ajaxComplete() instead or a combination of both for various situations.

Thoughts are appreciated.

Well, the short version is they serve different purposes, so the answer would be the "a combination of both for various situations" option. The basic rules are:

• .ajaxComplete() - runs for every request that completes, use this when you want to do something with each request/result. Note that this doesn't replace the success handler, since the parsed data is not one of the arguments (and it runs even when there's an error) - you may want .ajaxSuccess() in some per-request situations instead.
• .ajaxStop() - runs when every batch of requests completes, usually you'd use this in combination with .ajaxStart() for things like showing/hiding a "Loading..." indicator of some sort - or to do something else once a batch of AJAX requests finishes, like a master last step.

If you're using this to parse your data, there's probably a better way, in this case $.ajaxSetup(), where you can specify a success handler that gets the already-parsed data (e.g. JSON responses will be objects), like this:

$.ajaxSetup({
  success: function(data) { 
    //do something with data, for JSON it's already an object, etc.
  }
});

ajaxComplete is called whenever an ajax request finishes, either successfully or with an error.

ajaxStop is called when all ajax requests complete. So unlike ajaxComplete, it won't be called if there is still a request in progress.

You should use the first if the operation you want to perform should be done for every ajax request.

In general, you want to use ajaxComplete. This is because ajaxStop will only be triggered when there are no more ajax requests still waiting to come back. This may not seem different when you're sending one ajax request at a time, but imagine that the network happened to slow down after you send request A and, when request B is sent 5 seconds later it comes back earlier than request A... then ajaxStop will only be triggered once after request A returns while ajaxComplete will fire both times.

The situation where you'd use ajaxStop is when you send multiple ajax requests in one go... e.g. to submit a series of 3 forms... and want to be notified when all 3 complete successfully. Of course, you can achieve the same functionality with a counter within ajaxComplete

However, from the sounds of your question... you'd like to parse data from each ajax response... typically this would be done in the ajax success callback, e.g.

$.ajax({
   url: "blah",
   data: "blah",
   success: function (data) { /* Code in here */ }
});