how to call a specific function on every ajax request

Question

I have a problem, that I have several pages in my project and I used a lot of ajax requests in my project, but now I think that whenever an ajax request is called a function will called and whenever that request ends another function will call. How can I do this globally I know I can put this in every ajax request but I need a solution which I do in one place and it works all over the project.

$(document).read(function(){
 // Suppose this document load function is written on layout page and every page is  inherited from this page
});

Answer 1

Use ajaxSetup, for example

$.ajaxSetup({
    beforeSend: function() {
        console.log('test');
    },
    complete: function() {
        console.log('completed');
    }
});

will setup beforeSend handler for every ajax request. Note that ajaxSetup can take any option that $.ajax can.

Answer 2

You should create a wrapper function for your ajax, then use that function. that way, you have "central" control over the ajax call. something like:

//fast and crude way to extend jQuery
$.fn.customAjax = function(params){

    //contains defaults and predefined functions
    var defaults = {
        complete : function(){...default complete hander...},
        beforeSend : function (){...default beforeSend handler}
        ...
    }

    //merge settings
    var finalParams = $.extend({},defaults,params);

    //call ajax and return the deferred
    return $.ajax(finalParams);
}

//use it like
$.customAjax({
   url : ...,
   method : ...,
   data: ...,
   complete : function(){...} //redefining in the call will override the defaults
});

Answer 3

.ajaxStart

Register a handler to be called when the first Ajax request begins.

.ajaxSucess

Attach a function to be executed whenever an Ajax request completes successfully.

for Detail doc: http://api.jquery.com/category/ajax/