Статьи

JQuery AJAX Utility Helper Функция

Доброе утро, поклонники jQuery, сегодня я делюсь с вами небольшой вспомогательной функцией ajax, которую я кодировал, которая может принимать некоторые базовые настройки ajax и либо сохранять данные локально в объекте JavaScript, либо динамически запускать функцию обратного вызова JavaScript при успешном выполнении ajax. Использование служебной функции ajax избавит вас от необходимости писать функции ajax в нескольких файлах . Он также хранит ваш вызов определения ajax в одном месте, если вам нужны особые требования для ajax, такие как добавление загрузочного образа или определенных обработчиков ошибок.

Похожие сообщения:

Вспомогательная функция AJAX

Это вспомогательная функция ajax, которая может быть включена в ваш служебный объект JavaScript.

/**
 *  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);

Как использовать служебную функцию AJAX

Вот как вы можете использовать утилиту ajax для:

1) Получите данные с помощью ajax и сохраните их на своем объекте JS
2) Получить данные с помощью ajax и запустить функцию обратного вызова, которая передает данные

 /**
 *  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);

Эта функция ajax полностью работает, но она работает, я настраиваю ее здесь и там, поэтому я постараюсь обновлять код.