Custom AJAX Wrapper for jQuery
Friday, October 16th, 2009I write a lot of my Javascript with the help of jQuery, and one of it’s finest features is it’s extensibility and powerful internal functions. For larger sites, especially portals, AJAX can become messy if it’s not controlled, and when things get out of hand, it’s often hard to trawl through your scripts to make changes.
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.
