jqueryajax方法封装及api文件设计的代码示例

封装 jquery ajax 文件

/**
 * 封装 jquery ajax 
 * 例如:
 * ajaxRequest.ajax.triggerService(
 *   &＃39;apiCommand&＃39;, [命令数据] )
 *   .then(successCallback, failureCallback);
 * );
 */
var JSON2 = require(&＃39;LibsDir/json2&＃39;);
var URL = &＃39;../AjaxHandler.aspx?r=&＃39;;

// 用来记录每次请求的唯一标识
var requestIdentifier = {};

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

// 模块主体
var ajaxRequest = ajaxRequest || {};
(function ($) {
  if (!$) {
    throw &＃39;jquery获取失败!&＃39;;
  }

  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: &＃39;../AjaxSecureHandler.aspx,
      dataType: &＃39;json&＃39;,
      type: &＃39;POST&＃39;,
      contentType: &＃39;application/x-www-form-urlencoded; charset=UTF-8&＃39;
    },

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

      // 服务器已经错误
      if (result.ErrorCode != &＃39;200&＃39;) {
        $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, &＃39;$1"$2"$3&＃39;);
        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 方法进行编码
        // &＃39;data=&＃39; 是根据项目约定增加的，与 contentType 相对应
        data: &＃39;data=&＃39; + escape(ajaxRequest.json.stringify(requestData)),
        success: userSuccess,
        error: function (jqXHR, textStatus, errorThrown) {
          // 这里是在请求出错的时候做一个统一处理, 输出方法名和错误对象
          console.log(serviceName, jqXHR);
          if (userError && (typeof userError === &＃39;function&＃39;)) {
            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(&＃39;../common/ajax-request&＃39;); // ajax 封装
var JSON2 = require(&＃39;LibsDir/json2&＃39;);

// 请求数据方法
var apiService = (function () {
  var request = {};
  // 产品列表 (参数需要进一步处理的情况)
  request.getProductListData = function (conditionObj) {
    return ajaxRequest.ajax.triggerService(&＃39;SearchProductList&＃39;, [JSON2.stringify(conditionObj)]);
  };

  // 搜索热词 (参数为空的情况)
  request.getHotWords = function () {
    return ajaxRequest.ajax.triggerService(&＃39;GetSearchHotKeys&＃39;, []);
  };

  // 获取用户配置
  request.getUserCOnfig= function () {
    return ajaxRequest.ajax.triggerService(&＃39;GetUserConfig&＃39;, []);
  };

  // 设置用户配置
  request.setUserCOnfig= function (params) {
    return ajaxRequest.ajax.triggerService(&＃39;SetUserConfig&＃39;, [params]);
  };

  return request;
})();

module.exports = apiService;

业务代码中调用 api 接口

// 综合搜索热词查询
apiService.getHotWords()
  .then(function (result) {
    if (result.length > 0) {
      // 成功回调
      // handleResult(result);
    }
  })
  .fail(function (err) {
    console.log(&＃39;GetSearchHotKeys: &＃39;, err);
    // 失败回调
    handleResult();
  });

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的Javascript视频教程栏目！

以上就是jquery ajax方法封装及api文件设计的代码示例的详细内容，更多请关注 第一PHP社区 其它相关文章！