That’s one of the reasons why I wrote (and use almost daily) my custom AJAX wrapper for jQuery.

The idea.
Centralize one $.ajax() method, and have methods external to jQuery control the data and callback methods before firing.

This allows for a global wrapper on all before and callback methods in case you need to do things like: show loading animations, run site statistics, setup error handling, etc.

The code.
I like to use namespaces in my projects, so I will be giving you a basic outline of a namespace setup, and then how an external function can interact with the global AJAX method.

I will base the example loosely on a CRUD schema.

// Create our namespace
var Website = {};

/**
 * Outline our webservices
 * @param {String} action - AJAX action to perform
 * @param {Object} payload - Javascript object containing AJAX method properties
 */
Website.Webservice = function (action, payload) {

    switch (action){

    case 'create':
        payload.type = 'POST';
        payload.url = '/ajax/create_data.php';
        break;

    case 'read':
        payload.type = 'GET';
        payload.url = '/ajax/get_data.php';
        break;

    case 'update':
        payload.type = 'POST';
        payload.url = '/ajax/update_data.php';
        break;

    case 'delete':
        payload.type = 'POST';
        payload.url = '/ajax/delete_data.php';
        break;
    }

    // Call the global AJAX method
    Website.AJAX(payload);

}

/**
 * Fires off the AJAX object with user defined payload information.
 * @param {Object} payload	- AJAX data options to bind to the jQuery object
 */
Website.WebService.AJAX = function (payload) {

    // If dataType wasn't specified in the payload, default to 'html'
    var dataType = (payload.dataType !== undefined) ? payload.dataType : 'html';

    // jQuery AJAX object
    $.ajax({

        // Normal properties
        type: payload.type,
        url: payload.url,
        data: payload.data,
        dataType: dataType,

        // Global beforeSend wrapper with user defined function
        beforeSend: function () {

            // Do global here
            if (typeof payload.beforeSend === 'function'){
                payload.beforeSend();
            }

        },

        // Global success wrapper with user defined function
        success: function (data) {

            // Do global here
            if (typeof payload.success === 'function') {
                payload.success(data);
            }

        }
    });

};

Now that I have set up our basic framework, I can fire off any AJAX request with minimal code, and abstract any intense data mining functions and other methods from our AJAX process. This allows for clean and controllable code.

/**
 * Some function or event that fires off AJAX
 * @param {Object} data - Javascript object containing user data
 */
var updateUserData = function (data) {

    // Create the AJAX property object
    var bundle = {

        data: {
            'user_id': data.user_id,
            'user_email': data.user_email,
            'user_firstname': data.user_firstname,
            'user_lastname': data.user_lastname
        },

        beforeSend: showSpinningLoader,

        // Success callback function
        success: onRefreshSuccess

    };

    // Fire the bundle off
    Website.WebService('update', bundle);

};

And there you have it. Simple and easy to use. Now you can trigger AJAX from anywhere in your application with all processes centralized.

See you on the other side.