软件开发培训班 >> 编程开发 >> JavaScript


jQuery Ajax请求状态管理器打包

　　本文标签：Ajax,请求状态

然而，无论有多么接近，通过客户端与服务端的一来一回，必定会有等待加载数据的时间 。所以，大多数网站都通过一个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请求状态管理器 。