jqueryajax方法封装及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) {
 // 这里是在请求出错的时候做一个统一处理, 

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视频教程栏目！