基于jQuery的ajax方法封装
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了基于jQuery的ajax方法封装，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3176字，纯文字阅读大概需要5分钟。
内容图文
ajax （ajax开发）简介
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
在实际的项目里，ajax的应用频率很高，所以尽管jquery或者其他的一些类似的js库做了非常不错的封装，仍然有进一步封装简化的空间和必要
举一个例子，很久很久以前，我的ajax是这么写的：
$.ajax({
url: 'www.baidu.com/getInfo',
type: 'POST',
data: {
name: 'jack',
age: 18
},
dataType: 'json',
success: function(resp){
// callback
},
error: function(err){
// error code
}
});
乍一看挺好没啥问题，但是其实success回调里的逻辑可能很复杂，甚至可能会出现ajax回调里再放一个ajax的情况，那这种写法就很糟糕了，全都杂糅在一起
可以进行一个简单的封装，这在之前Deferred对象的随笔里已经有提到
function ajax(url, param, type) {
// 利用了jquery延迟对象回调的方式对ajax封装，使用done()，fail()，always()等方法进行链式回调操作
// 如果需要的参数更多，比如有跨域dataType需要设置为'jsonp'等等，可以考虑参数设置为对象
return $.ajax({
url: url,
data: param || {},
type: type || 'GET'
});
}
// 链式回调
ajax('www.baidu.com/getInfo').done(function(resp) {
// 成功回调
}).fail(function(err) {
// 失败回调
});
但是虽然做到这一步了，问题还是会来，比如我司，成功的回调里还有一层逻辑判断，像这样:
// 我司ajax返回的json数据格式
// 当result为false时，msg中往往有错误信息
{
result: true,
data: {
name: 'jack'
},
msg: null
}
ajax('www.baidu.com/getInfo').done(function(resp) {
// 成功回调
if(resp.result){
// 当resp中result为true时的操作
// 往往这个时候要操作处理resp中的data对象信息
}
else{
// 当result为false时的操作，这时往往会根据resp中的另一属性msg来判断具体处理
}
}).fail(function(err) {
// 失败回调
});
问题有二：
第一，我每个ajax中都需要写一个同样的相对固定的逻辑判断（每个公司或者项目组可能会有不同，但是就项目本身而言，或者放大了到公司来说必然是固定的），我觉得很烦。
第二，如果我只想专注处理数据，比如在成功回调里，我直接拿到要处理要渲染的数据，在失败的回调里我直接拿到错误的代码，有没有这样的可能做进一步的封装。
其实这俩问题是一个，总结一句话，就是不想写那么多if，else。有一句话我觉得说得很好，逻辑是守恒的，但如果是可预见的逻辑，是有精简的可能的，我们这种显然属于可预见的逻辑。
二次封装利用了延迟对象的then方法，具体看代码：
function handleAjax(url, param, type) {
return ajax(url, param, type).then(function(resp){
// 成功回调
if(resp.result){
return resp.data; // 直接返回要处理的数据，作为默认参数传入之后done()方法的回调
}
else{
return $.Deferred().reject(resp.msg); // 返回一个失败状态的deferred对象，把错误代码作为默认参数传入之后fail()方法的回调
}
}, function(err){
// 失败回调
console.log(err.status); // 打印状态码
});
}
handleAjax('www.baidu.com/getInfo').done(function(resp){
// 当result为true的回调
}).fail(function(err){
// 当result为false的回调
});
这就把之前很杂揉的代码进一步的的简化，也方便了维护，比如某一天跟你说result不再是布尔值了，直接改成状态码这样的东西了，如果按以前一个ajax写一个判断，简直要疯。
以上所述是小编给大家介绍的基于jQuery的ajax方法封装，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
内容总结
以上是互联网集市为您收集整理的基于jQuery的ajax方法封装全部内容，希望文章能够帮你解决基于jQuery的ajax方法封装所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。