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 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 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邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
详解JS数值Number类型
2018/02/07 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
小学教师听课制度
2014/02/01 职场文书
争论的故事教学反思
2014/02/06 职场文书
股东合作协议书
2014/04/14 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript