JavaScript

jQuery AJAX Utility Helper Function

Sam Deering
Share

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:

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&param2=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.