当前位置：主页 > jquery教程 >

jQuery的ajax封装方法实例内容

  • 更新时间：2020-05-21 14:30:33
  • 编辑：高梦竹

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

相关教程

  • jQuery使用ajaxSubmit()提交表单方法步骤

    这篇文章主要介绍了jQuery使用ajaxSubmit()提交表单示例,使用延第三方插件jquery.form实现,需要的朋友可以参考下

    发布时间：2020-01-23

  • jquery Ajax解析XML数据代码实例

    本篇文章主要是对Jquery Ajax解析XML数据(同步及异步调用)的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

    发布时间：2020-01-01

  • jQuery Ajax 全局调用封装代码

    这篇文章主要介绍了jQuery Ajax 全局调用封装实例代码详解的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下

    发布时间：2020-04-26

  • 总结python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法

    下面小编就为大家带来一篇python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-02-09

  • 深入理解jquery Ajax 全局调用封装

    这篇文章主要介绍了jquery Ajax 全局调用封装实例详解的相关资料,需要的朋友可以参考下

    发布时间：2020-03-12

  • PHP与jQuery开发实例

    PHP与jQuery开发实例

    这书由浅入深地叙述了怎么使用PHP与jQuery搭建高宽比互动的Web运用。每一章聚焦点一个主题风格，探讨Web开发者常常必须处理的一类实际难题。书中以实际上范例及编码表述的方法得出了有目

    大小：9.8 MBPHP开发

  • JavaScript和jQuery实战手册

    JavaScript和jQuery实战手册

    JavaScript可以大大改进网页的动画、交互性和视觉效果，但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识，展示了如何使用jQuery（即预先写好的JavaScript代码库）来节省时间和精

    大小：103 MBJavaScript电子书

  • jQuery实战从入门到精通

    jQuery实战从入门到精通

    本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术，适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书

    大小：189.1 MBjQuery电子书

  • 疯狂前端开发讲义：jQuery+AngularJS+Bootstrap前端开发实战

    疯狂前端开发讲义：jQuery+AngularJS+Bootstrap前端开发实战

    大小：131.7 MB前端开发电子书

  • jQuery Mobile从入门到精通

    jQuery Mobile从入门到精通

    《jQuery Mobile从入门到精通》 一书以实例驱动的方式，用近百个实战案例讲述了jQuery Mobile及APP移动开发的相关知识，并通过5个项目案例展现开发流程。全书分为4部分，共19章：第1部分为移动开

    大小：168.7 MBjQuery

  • jQuery实战案例精粹

    jQuery实战案例精粹

    jQuery实战案例精粹 从Web开发的实际应用角度出发，结合当下热门的 jQuery插件技术，深入浅出地介绍了 jQuery高性能开发的技巧，是前端开发、设计人员的绝佳选择。 本书共 22章，介绍了 jQuer

    大小：272 MBjQuery电子书

  • jQuery EasyUI开发指南

    jQuery EasyUI开发指南

    使用Java开发软件的开发人员一定会接触到前端开发，而前端开发有一个流行趋势，那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

    大小：48.4 MBjQuery电子书

  • Bootstrap与jQuery UI框架设计

    Bootstrap与jQuery UI框架设计

    随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相

    大小：180 MBjQuery电子书

  • jQuery api 3.3.1中文手册

    jQuery api 3.3.1中文手册

    jQuery3.3.1中文手册 是一套jQuery API 3.3.1速查表，很实用的手册，在编写jQuery查看很实用，其内包含了jquery学习过程中的各类知识点，能够让你清楚地了解每一个函数的核心内容，属性以及css框架信息，从而更好的实现编程。需要的朋友可下载试试！ 使用说明 这是目前最新版的jQuery api中文文档3.3.1版本。先解压压缩包。在打开软件。如果出现空白情况。请确保IE版本在9.0以上，或者是鼠标右击文件，选择ldquo;属性rdquo;，点击ldquo;取消限制rdquo;即

    大小：1.58 MBjQuery

  • jQuery实战

    jQuery实战

    jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员，jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员，无论起点如何。本书深入介绍了整个jQuery框架，此外

    大小：99.0 MBjQuery电子书

用户留言

发布评论

最新更新

热门推荐