基于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 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
vue实现公共方法抽离
Jul 31 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
由浅入深剖析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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
php 表单数据的获取代码
2009/03/10 PHP
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
php单链表实现代码分享
2016/07/04 PHP
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
python如何获取apk的packagename和activity
2020/01/10 Python
Python运行DLL文件的方法
2020/01/17 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
企业统计员岗位职责
2013/12/13 职场文书
党员个人思想汇报
2013/12/28 职场文书
鲜花方阵解说词
2014/02/13 职场文书
不错的求职信范文
2014/07/20 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
赔偿协议书
2015/01/27 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python