jQuery Ajax请求状态管理器打包


Posted in Javascript onMay 03, 2012

然而,无论有多么接近,通过客户端与服务端的一来一回,必定会有等待加载数据的时间。所以,大多数网站都通过一个Gif动态图标或‘Loading...'等字样来告知用户数据还在加载中。但有时候这个问题会非常繁琐和麻烦,要么将这个‘Loading'显示在ajax请求之前,然后在ajax成功后隐藏它,或者将它写在jquery的ajax的全局事件jQuery.ajaxStart()和jQuery.ajaxStop()中来控制整个页面的ajax状态。前者方法使用起来太琐碎,每个请求都要写一遍这个‘Loading',而且无论请求成功或失败都需要隐藏它。后者是全局的,也就是整个页面的请求状态,有时候无法满足在局部显示加载状态的要求。

为了解决这些问题,我开发了jQuery的插件,名为:Ajax请求状态管理器。使用这个插件可以让loading不再那么麻烦了。你可以在触发ajax请求前,用该插件事先添加写好所有请求,你要做的只是在用户交互的事件中执行下.request()方法。你可以将一个页面上所有请求设置为独立显示loading,也可以设置为全局显示(只显示一个loading)。下面是插件的具体使用方法:

自定义loading的css样式:
.state-loading { background: #fff url(images/icon-ajax-loader.gif) ... }

引用jquery最新版本文件:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

注意:该插件只在jquery1.4.4及之后的版本中测试通过。

引用Ajax请求状态管理器插件文件:
<script src="js/jquery-ajaxloader.js"></script>

在jquery的ready事件中执行.install()方法:
$.loader.install( className, isGlobal );

参数说明:
className:string,表示你自定义的loading的class名称,比如上面css定义的state-loading。

isGlobal:boolean,定义是否是全局显示还是独立显示loading,默认值是true,该参数可以省略。

添加所需的ajax请求参数和成功后的回调方法:
$.loader( key ).add( modules, settings , callback );

参数说明:
key:string,通过这个key来创建或获取指定模块的加载器。当然,同一个key可以执行多次add()方法来添加不同的module,但是settings和callback是对于这个key是共享的,所以之后添加的settings和callback会覆盖之前的。

modules:jquery object,一个页面中同一个请求可以处理多个模块的数据,所以,如果之前install()方法是设置为false的,在执行ajax请求时,添加到这个loader的所有module都会显示loading状态。

settings:map,jquery的ajax settings参数,但不要设置ajax事件,这样会覆盖插件中的回调方法,默认请求类型为GET。

callback:function,成功后的回调函数,它有一个参数data,默认是json类型返回的对象。

add()方法返回一个由'module'前缀的字符串数组,比如你添加了3个元素,那结果为['module1', 'module2', 'module3']。你可以通过返回的数组来删除指定的其中一个模块的loading,也可以不指定,也就是全部删除,当然如果你需要这样做的话。

remove()方法删除指定的模块:
$.loader( key ).remove( moduleId );

参数说明:
moduleId:string或者array,指定为string的话会删除其中一个module,指定为数组会批量删除模块,如果未指定参数,会将模块全部删除。

示例
添加2个模块到名为userinfo的加载器中:

var id1 = $.loader( 'userinfo' ).add( 
$( '#userinfo, #top-userinfo' ), 
{ url: 'server/userinfo.php' }, 
function( data ) { 
updateContent( $( '#userinfo, #topsection, #footer-userinfo' ), data ); 
} 
);

再添加一个模块到userinfo的加载器中:

var id2 = $.loader( 'userinfo' ).add( $('#footer-userinfo') );
var idList = id1.concat( id2 );
// result: [ 'module1', 'module2', 'module3' ]
删除第2个模块的loading,也就是‘#top-userinfo':
var ret = $.loader( 'userinfo' ).remove( idList[1] );
// result: true, modules: [ 'module1', 'module3' ]
在交互事件中执行.request()方法:
$.loader( key ).request();
]
当然,你也可以抛弃之前add的ajax settings和callback,在交互事件中自己写$.ajax或$.get等。然后在请求前调用$.loader( key ).show(),在回调函数内调用$.loader( key ).hide()。这样也可以灵活控制loading的状态。

示例

$( '#getUserInfo' ).bind( 'click', function() { 
$.loader( 'userinfo' ).request(); 
});

你也可以从新重新写请求:
$( '#getUserInfo' ).bind( 'click', function() { 
$.loader( 'userinfo' ).show(); 
$.get( 'server/userinfo.php', function( data ) { 
$.loader( 'userinfo' ).hide(); 
updateContent( $( '#userinfo, #topsection, #footer-userinfo' ), data ); 
}) 
});

注意:一个请求反复触发时,管理器会执行abor()来阻止之前未完成的请求,重新发布新的请求,然而如果你在页面中通过jquery的ajaxError事件输出错误信息,会把该信息一并认为是错误的,所以如果有必要的话,需要你自行过滤。

示例

// 输出错误日志 
$( 'body' ).bind( 'ajaxError', function( event, xhr, setting, thrownError ) { 
// 过滤掉 abort 的错误信息 
if ( xhr.status === 0 || xhr.readyState === 0 || xhr.statusText === 'abort' ) { 
return; 
} 
$( '#log' ).append( '<p>' + thrownError + '</p>' ); 
});

该插件简单易用,代码逻辑也不是很复杂,但本人能力和技术水平有限,如遇到使用问题或任何bug请通过邮件方式告诉我:nicolas-zhao@hotmail.com。谢谢捧场!

打包下载:Ajax请求状态管理器。

Javascript 相关文章推荐
Javascript面向对象之四 继承
Feb 08 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 #Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 #Javascript
统计jQuery中各字符串出现次数的工具
May 03 #Javascript
JQuery插件Style定制化方法的分析与比较
May 03 #Javascript
拉动滚动条加载数据的jquery代码
May 03 #Javascript
基于jquery的固定表头和列头的代码
May 03 #Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 #Javascript
You might like
ajax缓存问题解决途径
2006/12/06 PHP
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
工作求职信
2014/07/04 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
停电放假通知
2015/04/14 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python
Java实现带图形界面的聊天程序
2022/06/10 Java/Android