基于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 相关文章推荐
jQuery对象的length属性用法实例
Dec 27 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
Node.js Domain 模块实例详解
Mar 18 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
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
element中的$confirm的使用
2020/04/26 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python实现简单的语音识别系统
2017/12/13 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
关于Python错误重试方法总结
2021/01/03 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
晚宴邀请函范文
2014/01/15 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
授权委托书协议书
2014/10/16 职场文书
新学期开学标语2015
2015/07/16 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
浅谈Python响应式类库RxPy
2021/06/14 Python
关于python类SortedList详解
2021/09/04 Python
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
PO模式在selenium自动化测试框架的优势
2022/03/20 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL