本篇文章给大家带来的内容是关于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视频教程栏目！
