基于jQuery的ajax方法封装

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

赞 (0)

相关推荐

  • 关于Ajax的原理以及代码封装详解

    前言 其实AJAX内部实现并不麻烦,主要通过一个叫XMLHttpRequest的对象,而这个对象在现有的浏览器均被支持. 可以说,它是整个AJAX实现的基础,是浏览器用于后台与服务器交换数据的对象,有了它,才有了AJAX,也便有了部分页面刷新的艺术! 本文主要给大家介绍了关于Ajax原理以及代码封装的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 示例代码 var xmlhttp; if (window.XMLHttpRequest) { // code for IE

  • js原生Ajax的封装和原理详解

    原理及概念 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数据库随时修改数据的网页. 静态网页,随着html代码的生成,页面的内容和显示效果就基本上不会发生变化了--除非你修改页面代码. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. A

  • 自己动手封装的 ajax

    以前开发用了很多AJAX的技术比如EXT,prototype,jQuery等等,但都是开源封装好的AJAX框架.从没真正用过纯正的AJAX,故参照prototyp面向对象思想自己封装了一个AJAX框架.希望能给读者参考.帮助.评价. 复制代码 代码如下: /* * 自己封装的ajax * * * @author 姜松 * @version 1.00 $date:2009-07-02 * * history: * */ Object.extend = function(destination, s

  • 原生Javascript封装的一个AJAX函数分享

    最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的--但他又是基于jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有jquery了,那么他的ajax就不用白不用了.我缺少的是一个能在没有jquery的情况下使用的ajax方法. 所以我也花一天时间写了一个,参数与调用方法类似于jquery的ajax.就叫xhr吧,因为xhr=XMLHttpRequ

  • 一个封装的Ajax类

    用法:  new Ajax().Request(url,cmd,async,method,postString,title)  参数:  url: 请求页面URL(必填)  cmd: 返回值处理函数(必填)  async: 是否异步 ,(ture|false), 默认true  method: 请求方式,(post|get), 默认get  postString: 请求方式为post时,请求内容  title: 请求内容标题  复制代码 代码如下: // Ajax 封装 2007-3-13 fu

  • 封装了jQuery的Ajax请求全局配置

    摘要: jQuery已经成为项目中最常见的js库,也是前端开发最喜欢使用的库.下面是在项目中封装了jQuery的Ajax,分享给大家. 代码: 复制代码 代码如下: // ajax 请求参数 var ajaxSettings = function(opt) {     var url = opt.url;     var href = location.href;     // 判断是否跨域请求     var requestType = 'jsonp';     if (url.indexOf

  • ajax的工作原理以及异步请求的封装介绍

    Ajax原理: 客户端通过浏览器的内置对象XMLHttpRequest来发送异步请求,当服务器返回响应时,会调用先前注册的回调函数,在回调函数中可以使用javascript操作DOM来更新页面,异步请求不会阻塞客户端的操作,达到页面无法刷新就可以更新数据的效果. 异步请求的封装: 复制代码 代码如下: var xhr=false; //step1:创建一个兼容浏览器各个版本的XMLHttpRequest对象 if (window.XMLHttpRequest) { //IE7+, Firefox

  • 基于jQuery的ajax方法封装

    ajax (ajax开发)简介 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 在实际的项目里,ajax的应用频率很高

  • 基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

    基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

    情景 目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件 代码片段 $.ajax({ type: "POST", url: root + "/xxx, data: requestData, dataType: "json", success: function(data){ // 清空列表 $("#formOpinion #

  • 基于JQuery的Ajax方法使用详解

    如下所示: $.ajax的主要参数: url: '_请求的地址', type: 请求类型 get & post data: '请求的参数, success:回调函数 $.ajax({ url: '_api/01.check.php', type: 'get', data: 'name=' + $('inputName').val(), success: function (data) { console.log(data); } } }) jQuery的一些属性: $('xx').find('x

  • php基于jquery的ajax技术传递json数据简单实例

    本文实例讲述了php基于jquery的ajax技术传递json数据简单实现方法.分享给大家供大家参考,具体如下: html页面: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.2.mi

  • 使用jQuery的ajax方法向服务器发出get和post请求的方法

    使用jQuery的ajax方法向服务器发出get和post请求的方法

    打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个form表单里用来实现form提交,第二个输入框是单独的.没有包含在form里,下面就用这两个输入框来学习下jQuery的ajax. 1,前端的html和javascript代码 页面html <main style="text-align: center; margin: 200px aut

  • 【经典源码收藏】基于jQuery的项目常见函数封装集合

    本文实例汇总了基于jQuery的项目常见函数封装.分享给大家供大家参考,具体如下: /// <reference path="jquery-1.8.0.min.js" /> /* * DIV或元素居中 * @return */ jQuery.fn.mCenterDiv = function () { this.css("position", "absolute"); this.css("border", "

  • 基于jQuery的$.getScript方法去加载javaScript文档解析

    1.两个文件的代码如下: <script> function Ajax(){ //将9-4.html中的Ajax()函数进行修改 $.getScript('9-8.js',function(data){ var html ="<table border='1' cellpadding='2'>"; $.each(comments, function(Index, comment) { html += '<tr><td>' + commen

  • 基于jQuery中ajax的相关方法汇总(必看篇)

    前提条件 话说是jquery中的ajax方法,那么前提条件当然是引入jquery啦. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 具体方法 ①load() 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[call

  • Jquery使用AJAX方法请求数据

    一.AJAX请求 1.jQuery.ajax(url,[settings]): 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数. Example: 保存数据到服务器,成功时显示信息. $.ajax({ type: "POST", url: "some.php", data: { name:

  • 基于jQuery的AJAX和JSON实现纯html数据模板

    基于jQuery的AJAX和JSON实现纯html数据模板

    通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板: <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"> <tr> <th> 订单ID</th> &

随机推荐