jQuery AJAX Utility Helper Function
Good morning jQuery fans, today I am sharing with you a little ajax helper function I coded which can take in some basic ajax settings and either store the data locally on a JavaScript object or run a JavaScript callback function dynamically on ajax success. Using a ajax utility function will save you time from having to write ajax functions in mutiple files. It also keeps your ajax definition call in one place incase you need specific requirements for ajax such adding a loading image or specific error handlers.
Related Posts:
- 6 Live jQuery Ajax Examples
- jQuery AJAX Differences Between GET vs POST
AJAX Utility Helper Function
This is the ajax helper function which can be included in your JavaScript utility object.
/**
* JQUERY4U.COM
*
* Provides utility functions to other JavaScript Objects.
*
* @author Sam Deering
* @copyright Copyright (c) 2012 JQUERY4U
* @license http://jquery4u.com/license/
* @since Version 1.0
* @filesource js/jquery4u.util.js
*
*/
(function($,W,D)
{
W.JQUERY4U = W.JQUERY4U || {};
W.JQUERY4U.UTIL =
{
/**
* AJAX helper function which can be used dynamically to store data or run a function upon success.
* @param callback - 'store' to store data locally or 'run' to run a callback function.
* @param callbackAction - where to store the data.
* @param subnamespace - what namespace to store the data/run the function.
*/
ajax: function(type, url, query, async, returnType, data, callback, callbackAction, subnamespace)
{
$.ajax(
{
type: type,
url: url + query,
async: async,
dataType: returnType,
data: data,
success: function(data)
{
switch(callback)
{
case 'store':
JQUERY4U[subnamespace]["data"][callbackAction] = data; //store data
break;
case 'run':
JQUERY4U[subnamespace][callbackAction](data); //run function with data
break;
default:
return true;
}
},
error: function(xhr, textStatus, errorThrown)
{
alert('ajax loading error...');
return false;
}
});
}
}
})(jQuery,window,document);
How to use the AJAX Utility Function
This is how you might go about using the ajax utility function to:
1) Get data using ajax and store it on your JS Object
2) Get data using ajax and run a callback function which is passed the data
/**
* JQUERY4U.COM
*
* Example JavsScript object to make use of the AJAX utility function.
*
* @author Sam Deering
* @copyright Copyright (c) 2012 JQUERY4U
* @license http://jquery4u.com/license/
* @since Version 1.0
* @filesource js/jquery4u.module.js
*
*/
(function($,W,D)
{
W.JQUERY4U = W.JQUERY4U || {};
W.JQUERY4U.MODULE =
{
data:
{
ajaxData: '' //used to store ajax data
},
init: function()
{
this.getData(); //store data test
this.runFunc(); //run function test
},
//example function to call ajax and then save data after ajax success
getData: function()
{
JQUERY4U.UTIL.ajax('GET', 'jquery4u.com/data.php', '?param=value¶m2=value2', false, 'HTML', '', 'store', 'ajaxData', 'MODULE');
//data from ajax is stored in JQUERY4U.MODULE.data.ajaxData after ajax success
},
//example function to call ajax and then run a function after ajax success
runFunc: function()
{
var data = ['some data passed', 'to server side script'];
JQUERY4U.UTIL.ajax('POST', 'jquery4u.com/data.php', '', true, 'HTML', data, 'run', 'ajaxCallbackFunction', 'MODULE');
//JQUERY4U.MODULE.ajaxCallbackFunction is called after ajax success
},
//function that is called after ajax success
ajaxCallbackFunction: function(data)
{
//do something with returned data
}
}
$(D).ready(function() {
JQUERY4U.MODULE.init();
});
})(jQuery,window,document);
This ajax function fully works but it work in progress, i’m tweaking it here and there so i’ll try keep the code updated.