基于jQuery的ajax方法封装


Posted in Javascript onJuly 14, 2016

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方法封装,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
由浅入深剖析Angular表单验证
Jul 14 #Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 #Javascript
js css+html实现简单的日历
Jul 14 #Javascript
javascript运算符——位运算符全面介绍
Jul 14 #Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 #Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 #Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 #Javascript
You might like
Apache设置虚拟WEB
2006/10/09 PHP
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
PHP学习笔记之一
2011/01/17 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
js闭包实例汇总
2014/11/09 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
Vue中fragment.js使用方法小结
2020/02/17 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
java直接调用python脚本的例子
2014/02/16 Python
python实现的文件夹清理程序分享
2014/11/22 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
python基础之入门必看操作
2017/07/26 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
最美护士演讲稿
2014/08/27 职场文书
医院科室评语
2015/01/04 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书