A-A+

基于讲述jQuery Ajax请求状态管理器

2016年01月13日 web前端设计 暂无评论 阅读 4 views 次

基于讲述jQuery Ajax请求状态管理器是一篇对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最新版本文件:

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>  

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

引用Ajax请求状态管理器插件文件:

  1. <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的加载器中,代码如下:

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

再添加一个模块到userinfo的加载器中,代码如下:

  1. var id2 = $.loader( 'userinfo' ).add( $('#footer-userinfo') );  
  2. var idList = id1.concat( id2 );  
  3. // 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的状态。

示例代码如下:

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

你也可以从新重新写请求,代码如下:

  1. $( '#getUserInfo' ).bind( 'click', function() {  
  2.     $.loader( 'userinfo' ).show();  
  3.     $.get( 'server/userinfo.php', function( data ) {  
  4.         $.loader( 'userinfo' ).hide();  
  5.         updateContent( $( '#userinfo, #topsection, #footer-userinfo' ), data );  
  6.     })  
  7. });  

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

示例代码如下:

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

给我留言