基于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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
Javascript document.referrer判断访客来源网址
May 15 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
Python转换时间的图文方法
2019/07/01 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
Python如何测试stdout输出
2020/08/10 Python
简述 Python 的类和对象
2020/08/21 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
How to spawning asynchronous work in J2EE
2016/08/29 面试题
优秀的自荐信要注意哪些
2014/01/03 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
2014年维稳工作总结
2014/11/18 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
政协常委会议主持词
2015/07/03 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android