本篇文章给大家带来的内容是关于jquery ajax 方法封装的介绍（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
简要说明
前面我写了一篇《jquery ajax 方法封装及 api 文件设计》文档，主要用来说明我们在项目中通常会对 jquery 的 ajax 方法进行进一步的封装处理，便于我们在业务代码中使用。从那篇文档中我们可以了解到如何封装ajax方法、如何设计 api 文件，以及如何在业务代码中调用 api 接口。
这篇文档我们主要对封装的 ajax 方法进行一个简要说明。这里的封装主要是将 $.ajax() 返回的 jqxhr 对象，通过调用 jquery.deferred() 方法创建成一个可链式调用的工具对象（其实 jqxhr 本身就是 deferred 对象，本来就可以进行链式调用，后面会对此进行说明）。这样我们就可以使用下面这种形式进行链式调用：
// 链式调用absservice.getabslistdata(conditionobj) .done(function (result) { var data = ts.handledata(result); ts.render(data, columnchange); }) .fail(function (err, jqxhr) { util.hideloading('#abs-all-container'); });
同时，通过一些处理，也允许调用者使用如下形式进行调用：
// 传入成功回调、失败回调absservice.getabslistdata(conditionobj, function (result) { var data = ts.handledata(result); ts.render(data, columnchange); }, function (err, jqxhr) { util.hideloading('#abs-all-container'); });
实际上，从 jquery 1.5 开始，$.ajax() 返回的 jqxhr 对象就已经实现了 promise 接口, 使它拥有了 promise 的所有属性，方法和行为。也就是说 $.ajax() 返回的 jqxhr 对象本身就可以使用如下形式的调用：
$.ajax(options) .done(function (result, textstatus, jqxhr) { if (requestid === requestidentifier[servicename]) { 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); } });
既然已经可以使用这种方式使用 jqxhr对象，那为什么不直接将 jqxhr对象返回，然后在业务代码中直接使用 jqxhr.done() 和 jqxhr.fail() 方法呢？为什么还要进一步将其包装成一个新的 deferred 对象呢？
答：是为了在成功和失败回调调用之前做一些统一的处理，比如对接口返回的数据进行判断、对返回的 json 字符串进行解析、在请求失败时输出方法名和错误信息等，我们把这些每次接口调用都会进行的操作进行统一处理，实现代码复用，这样业务代码中就只需要关注拿到数据后的处理逻辑即可。
这些统一进行的操作，我们放在 $.ajax().done() 和 $.ajax().fail() 方法中去执行，然后将 $.ajax() 返回的 jqxhr对象包装成新的 deferred 对象，这样就可以在业务代码中通过链式调用做进一步的处理，比如刷新表格内容、更新页面动态等等。
代码解读
/** * 封装 jquery ajax * 例如: * ajaxrequest.ajax.triggerservice( * 'apicommand', [命令数据] ) * .then(successcallback, failurecallback); * ); */var json2 = require('libsdir/json2');var url = '../ajaxhandler.aspx?r=';// 用来记录每次请求的唯一标识, 键值对形式, 形如:// var requestidentifier = {// searchabslist: 'b80a3876-9bca-40d1-b2cd-0daa799591e7',// setabsusercolumns: 'cafe3f01-2ee2-41f0-aeca-d630429f89f4',// };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; /** * 触发请求, 返回包装成 deferred 对象的 jqxhr * @param {object} useroptions 参数对象(包含方法名、参数对象、成功回调、失败回调) * @param {string} servicename 方法名 * @param {string} requestid 请求的唯一标识 * @returns object */ ajaxrequest.ajax = function (useroptions, servicename, requestid) { useroptions = useroptions || {}; // 将参数对象与ajax的默认项组成一个新的对象, 作为 jquery ajax 方法的配置项 var options = $.extend({}, ajaxrequest.ajax.defaultopts, useroptions); // 将 jquery ajax 方法默认的 success 回调和 error 回调置为 undefined // .done()方法取代了的过时的jqxhr.success()方法 // .fail()方法取代了的过时的.error()方法 options.success = undefined; options.error = undefined; // 将 jqxhr 包装成新的 deferred 对象返回 // jquery.deferred([beforestart]) 一个工厂函数, 这个函数返回一个链式实用对象 // beforestart - 一个构造函数返回之前调用的函数 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' }, // 在业务代码的回调执行之前, 做一些统一处理, 实现代码复用 // $dfd.resolve() 和 $dfd.reject() 的执行, 会使得使用 .then()/.done() 中的回调方法得到执行 // useroptions.success() 和 useroptions.error() 是调用用户以参数形式传入的成功回调函数和失败回调函数 // 一般来说, 上述两种方式只会有一个真正起到作用, 这取决于用户调用的方式: // 如果是使用 $.ajax().done().fail() 这种方式调用, 那么 $dfd.resolve()/$dfd.reject() 会起到作用 // 此时 useroptions.success/useroptions.error 都是 undefined, 自然不会得到执行, 反之亦然 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() 执行之后, 业务代码中的回调会执行, 即.then()/.done()方法会得到执行 $dfd.resolve(resultdata); // 如果是使用传统的传入成功回调函数的形式进行调用的, 那么在此处调用用户设定的成功回调 useroptions.success && useroptions.success(resultdata); } else { $dfd.resolve(); useroptions.success && useroptions.success(); } }, /** * 构建请求参数对象 * @param {string} servicename 方法名 * @param {object} input 传入的参数对象 * @param {function} usersuccess 成功回调 * @param {function} usererror 失败回调 * @param {object} ajaxparams 其他参数 * @returns object */ 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;
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注的javascript视频教程栏目！
以上就是jquery ajax方法封装的介绍（附示例）的详细内容。