如何使用jquery ajax方法封裝及api文件

這篇文章將為大家詳細講解有關如何使用jquery ajax方法封裝及api文件，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

封裝 jquery ajax 文件

/**
 * 封裝 jquery ajax 
 * 例如:
 * ajaxRequest.ajax.triggerService(
 *   'apiCommand', [命令數據] )
 *   .then(successCallback, failureCallback);
 * );
 */
var JSON2 = require('LibsDir/json2');
var URL = '../AjaxHandler.aspx?r=';

// 用來記錄每次請求的唯一標識
var requestIdentifier = {};

// 唯一標識生成方法
function generateGUID() {
  var d = new Date().getTime();
  if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
    d += performance.now();
  }
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = (d + Math.random() * 16) % 16 | 0;
    d = Math.floor(d / 16);
    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
}

// 模塊主體
var ajaxRequest = ajaxRequest || {};
(function ($) {
  if (!$) {
    throw 'jquery獲取失敗!';
  }

  ajaxRequest.json = JSON2;
  ajaxRequest.ajax = function (userOptions, serviceName, requestId) {
    userOptions = userOptions || {};
    var options = $.extend({}, ajaxRequest.ajax.defaultOpts, userOptions);
    options.success = undefined;
    options.error = undefined;
    return $.Deferred(function ($dfd) {
      $.ajax(options)
        .done(function (result, textStatus, jqXHR) {
          if (requestId === requestIdentifier[serviceName]) {
            // 比對請求id, 保證返回結果的正確性 (重復請求有可能會帶來返回結果不可靠的問題)
            ajaxRequest.ajax.handleResponse(result, $dfd, jqXHR, userOptions, serviceName, requestId);
          }
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
          if (requestId === requestIdentifier[serviceName]) {
            // jqXHR.status
            $dfd.reject.apply(this, arguments);
            userOptions.error.apply(this, arguments);
          }
        });
    });
  };

  $.extend(ajaxRequest.ajax, {
    // $.ajax() 的默認設置
    defaultOpts: {
      // url: '../AjaxSecureHandler.aspx,
      dataType: 'json',
      type: 'POST',
      contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
    },

    handleResponse: function (result, $dfd, jqXHR, userOptions, serviceName, requestId) {
      if (!result) {
        $dfd && $dfd.reject(jqXHR, 'error response format!');
        userOptions.error(jqXHR, 'error response format!');
        return;
      }

      // 服務器已經錯誤
      if (result.ErrorCode != '200') {
        $dfd && $dfd.reject(jqXHR, result.ErrorMessage);
        userOptions.error(jqXHR, result);
        return;
      }

      if (result.Data) {
        // 將大于2^53的數字(16位以上)包裹雙引號, 避免溢出
        var jsonStr = result.Data.replace(/(:\s*)(\d{16,})(\s*,|\s*})/g, '$1"$2"$3');
        var resultData = ajaxRequest.json.parse(jsonStr);
        $dfd.resolve(resultData);
        userOptions.success && userOptions.success(resultData);
      } else {
        $dfd.resolve();
        userOptions.success && userOptions.success();
      }
    },

    buildServiceRequest: function (serviceName, input, userSuccess, userError, ajaxParams) {
      // 這里是根據后臺要求構建的
      var requestData = {
        MethodAlias: serviceName, // 方法名
        Parameter: input // 傳遞的參數
      };

      var request = $.extend({}, ajaxParams, {
        // 這里要對傳遞的 JSON 字符串參數數據使用 escape 方法進行編碼
        // 'data=' 是根據項目約定增加的，與 contentType 相對應
        data: 'data=' + escape(ajaxRequest.json.stringify(requestData)),
        success: userSuccess,
        error: function (jqXHR, textStatus, errorThrown) {
          // 這里是在請求出錯的時候做一個統一處理, 輸出方法名和錯誤對象
          console.log(serviceName, jqXHR);
          if (userError && (typeof userError === 'function')) {
            userError(jqXHR, textStatus, errorThrown);
          }
        }
      });

      return request;
    },

    // 構建參數對象, 生成唯一標識, 觸發請求
    triggerService: function (serviceName, input, success, error, ajaxParams) {
      var request = ajaxRequest.ajax.buildServiceRequest(serviceName, input, success, error, ajaxParams);
      // 生成此次 ajax 請求唯一標識
      var requestId = requestIdentifier[serviceName] = generateGUID();
      request.url = URL + requestId;
      return ajaxRequest.ajax(request, serviceName, requestId);
    }
  });

})(jQuery);

module.exports = ajaxRequest;

api 文件示例

/**
 * api 接口定義
 * 這個示例中假設后臺服務要求接受數組形式的參數
 */
var ajaxRequest = require('../common/ajax-request'); // ajax 封裝
var JSON2 = require('LibsDir/json2');

// 請求數據方法
var apiService = (function () {
  var request = {};
  // 產品列表 (參數需要進一步處理的情況)
  request.getProductListData = function (conditionObj) {
    return ajaxRequest.ajax.triggerService('SearchProductList', [JSON2.stringify(conditionObj)]);
  };

  // 搜索熱詞 (參數為空的情況)
  request.getHotWords = function () {
    return ajaxRequest.ajax.triggerService('GetSearchHotKeys', []);
  };

  // 獲取用戶配置
  request.getUserConfig = function () {
    return ajaxRequest.ajax.triggerService('GetUserConfig', []);
  };

  // 設置用戶配置
  request.setUserConfig = function (params) {
    return ajaxRequest.ajax.triggerService('SetUserConfig', [params]);
  };

  return request;
})();

module.exports = apiService;

業務代碼中調用 api 接口

// 綜合搜索熱詞查詢
apiService.getHotWords()
  .then(function (result) {
    if (result.length > 0) {
      // 成功回調
      // handleResult(result);
    }
  })
  .fail(function (err) {
    console.log('GetSearchHotKeys: ', err);
    // 失敗回調
    handleResult();
  });

關于如何使用jquery ajax方法封裝及api文件就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。