Sometimes it is often difficult to distinguish between jQuery’s ajax handling events as it confuses many developers while writing down the code. The confusion is mainly because jQuery provides two variations of handling the ajax events.
- Global Ajax event handlers
- Local ajax event handlers
In this post i will try to explain the sequence in which these handlers are executed individually.
Global ajax events handlers – As the word says, these are global for all the ajax requests written in a page. Again there is a sequence in which these global event handlers are executed by the browser and remember that the local event handles always takes precedence over the global event handlers. The only exception in this case is ajaxStart() and ajaxStop() methods for which there are no local handlers provided.
First we will focus on the global handlers. In order to enable the global handlers we have to specify the global attribute as true in the settings of the ajax() method. If this attribute is set to false then you don’t have to worry about the global handlers. These global handlers are not required on a page with single ajax request because the local handlers are enough to get the job done. But when you have multiple ajax requests on a page and there is a dependency on one another then global handlers are very very useful. For e.g, If you have two ajax requests and on the successful completion of first ajax call you want to preform some business logic and make the second ajax call then in such scenarios, you can use the ajaxComplete() global handler.
Example – If you are having 2 ajax requests on a page and the global handlers were written then the sequence in which these are handled by the browser would be as follows:
As we can clearly see even though the name says global handlers, except for the ajaxStart() and ajaxStop(), rest all are executed for each request. The method ajaxStart() will fire once before any ajax call is going to be made. Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart() event. After that ajaxSend() will be called by the browser for each request. To differentiate between each of the send requests, we need to use the settings variable provided as an argument to this function. Something like below.
$(document).ajaxSend(function(event, xhr, settings){
if(settings.url == ‘first_page.xml’)
$(“#result”).append(“<p>1st ajax request is about to be sent – ajaxSend!!!</p>”);
else
$(“#result”).append(“<p>2nd ajax request is about to be sent – ajaxSend!!!</p>”);
});
Inside this function we can check for the condition “for which request the method is being invoked?”. If the ajax call is successful ajaxSuccess() will get invoked and if there is a failure then ajaxError() will get executed. Without any concern for the success / failure, ajaxComplete() will always get executed as a last one in the sequence. And finally whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxComplete().
So good so far. Now what if you have written the local ajax handlers – beforeSend, success, etc provided in the $.ajax() method? Well, as stated earlier the locals always will take precedence over the global ones. The below picture will give us a better explaination.
For better understanding of the usage of each of these functions, i would recommend the following links:
5 ways to make Ajax calls – net tuts
Hope this helps. Cheers!!!!
onegoodexample 