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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 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
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php继承的一个应用
2011/09/06 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
window.location和document.location的区别分析
2008/12/23 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
Vue实现简单的跑马灯
2020/05/25 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
上课迟到检讨书
2014/02/19 职场文书
保险公司开门红口号
2014/06/21 职场文书
起诉状范本
2015/05/20 职场文书
宾馆客房管理制度
2015/08/06 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
python Tkinter模块使用方法详解
2022/04/07 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python