基于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 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
DIV始终居中的js代码
Feb 17 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
二招解决php乱码问题
2012/03/25 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
为你总结一些php信息函数
2015/10/21 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
插件:检测javascript的内存泄漏
2007/03/04 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
js a标签点击事件
2017/03/30 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python实现excel读写数据
2021/03/02 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
中专生自荐信
2013/10/12 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
销售实习自我鉴定
2013/12/07 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年环保局工作总结
2015/05/22 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS