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();  });

登录后复制

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

以上就是jquery ajax方法封装及api文件设计的代码示例的详细内容，更多请关注【创想鸟】其它相关文章！