jQuery AJAX Utility Helper Function

Key Takeaways

• The jQuery AJAX Utility Helper Function can be used to store data locally on a JavaScript object or run a JavaScript callback function dynamically on ajax success. This utility function reduces the need to write ajax functions in multiple files and keeps ajax definition call in one place.
• The AJAX Utility Helper Function is flexible and powerful, allowing developers to specify a wide range of settings for AJAX requests in a single function call. It can be used with other JavaScript libraries, but care should be taken to avoid potential conflicts.
• The AJAX Utility Helper Function can handle errors using the error callback option. It can also send data to the server, load JSON data, cancel an AJAX request, send a file to the server, and make synchronous AJAX requests, although the latter is not generally recommended due to potential browser blockage and decreased web application responsiveness.

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

Frequently Asked Questions (FAQs) about jQuery AJAX Utility Helper Function