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 相关文章推荐
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
学习从实践开始之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图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
smarty中post用法实例
2014/11/28 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
使用python画社交网络图实例代码
2019/07/10 Python
python模块导入的方法
2019/10/24 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技