現(xiàn)在的網(wǎng)站，在一個(gè)網(wǎng)頁(yè)中有異步請(qǐng)求甚至許多個(gè)異步請(qǐng)求已經(jīng)不足為奇。Ajax已經(jīng)成為了現(xiàn)在網(wǎng)站必須的基本功能，使網(wǎng)頁(yè)應(yīng)用更接近于桌面應(yīng)用。

然而，無(wú)論有多么接近，通過(guò)客戶端與服務(wù)端的一來(lái)一回，必定會(huì)有等待加載數(shù)據(jù)的時(shí)間。所以，大多數(shù)網(wǎng)站都通過(guò)一個(gè)Gif動(dòng)態(tài)圖標(biāo)或‘Loading...’等字樣來(lái)告知用戶數(shù)據(jù)還在加載中。但有時(shí)候這個(gè)問(wèn)題會(huì)非常繁瑣和麻煩，要么將這個(gè)‘Loading’顯示在ajax請(qǐng)求之前，然后在ajax成功后隱藏它，或者將它寫(xiě)在jquery的ajax的全局事件jQuery.ajaxStart()和jQuery.ajaxStop()中來(lái)控制整個(gè)頁(yè)面的ajax狀態(tài)。前者方法使用起來(lái)太瑣碎，每個(gè)請(qǐng)求都要寫(xiě)一遍這個(gè)‘Loading’，而且無(wú)論請(qǐng)求成功或失敗都需要隱藏它。后者是全局的，也就是整個(gè)頁(yè)面的請(qǐng)求狀態(tài)，有時(shí)候無(wú)法滿足在局部顯示加載狀態(tài)的要求。

為了解決這些問(wèn)題，我開(kāi)發(fā)了jQuery的插件，名為：Ajax請(qǐng)求狀態(tài)管理器。使用這個(gè)插件可以讓loading不再那么麻煩了。你可以在觸發(fā)ajax請(qǐng)求前，用該插件事先添加寫(xiě)好所有請(qǐng)求，你要做的只是在用戶交互的事件中執(zhí)行下.request()方法。你可以將一個(gè)頁(yè)面上所有請(qǐng)求設(shè)置為獨(dú)立顯示loading，也可以設(shè)置為全局顯示（只顯示一個(gè)loading）。下面是插件的具體使用方法：

自定義loading的css樣式：

  
 
 

   
  
  
.state-loading { background: #fff url(images/icon-ajax-loader.gif) ... }  
  
 
 

引用jquery***版本文件：

注意：該插件只在jquery1.4.4及之后的版本中測(cè)試通過(guò)。

引用Ajax請(qǐng)求狀態(tài)管理器插件文件：

在jquery的ready事件中執(zhí)行.install()方法:

  
 
 

   
  
  
$.loader.install( className, isGlobal );  
  
 
 

參數(shù)說(shuō)明：

className：string，表示你自定義的loading的class名稱，比如上面css定義的state-loading。

isGlobal：boolean，定義是否是全局顯示還是獨(dú)立顯示loading，默認(rèn)值是true，該參數(shù)可以省略。

添加所需的ajax請(qǐng)求參數(shù)和成功后的回調(diào)方法：

  
 
 

   
  
  
$.loader( key ).add( modules, settings , callback );  
  
 
 

參數(shù)說(shuō)明：

key：string，通過(guò)這個(gè)key來(lái)創(chuàng)建或獲取指定模塊的加載器。當(dāng)然，同一個(gè)key可以執(zhí)行多次add()方法來(lái)添加不同的module，但是settings和callback是對(duì)于這個(gè)key是共享的，所以之后添加的settings和callback會(huì)覆蓋之前的。

modules：jquery object，一個(gè)頁(yè)面中同一個(gè)請(qǐng)求可以處理多個(gè)模塊的數(shù)據(jù)，所以，如果之前install()方法是設(shè)置為false的，在執(zhí)行ajax請(qǐng)求時(shí)，添加到這個(gè)loader的所有module都會(huì)顯示loading狀態(tài)。

settings：map，jquery的ajax settings參數(shù)，但不要設(shè)置ajax事件，這樣會(huì)覆蓋插件中的回調(diào)方法，默認(rèn)請(qǐng)求類型為GET。

callback：function，成功后的回調(diào)函數(shù)，它有一個(gè)參數(shù)data，默認(rèn)是json類型返回的對(duì)象。

add()方法返回一個(gè)由'module'前綴的字符串?dāng)?shù)組，比如你添加了3個(gè)元素，那結(jié)果為['module1', 'module2', 'module3']。你可以通過(guò)返回的數(shù)組來(lái)刪除指定的其中一個(gè)模塊的loading，也可以不指定，也就是全部刪除，當(dāng)然如果你需要這樣做的話。

remove()方法刪除指定的模塊：

  
 
 

   
  
  
$.loader( key ).remove( moduleId ); 
  
 
 

參數(shù)說(shuō)明：

moduleId：string或者array，指定為string的話會(huì)刪除其中一個(gè)module，指定為數(shù)組會(huì)批量刪除模塊，如果未指定參數(shù)，會(huì)將模塊全部刪除。

示例

添加2個(gè)模塊到名為userinfo的加載器中：

  
 
 

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

再添加一個(gè)模塊到userinfo的加載器中：

  
 
 

   
  
  
var id2 = $.loader( 'userinfo' ).add( $('#footer-userinfo') );  
   
  
  
var idList = id1.concat( id2 );  
   
  
  
// result: [ 'module1', 'module2', 'module3' ] 
  
 
 

刪除第2個(gè)模塊的loading，也就是‘#top-userinfo’:

  
 
 

   
  
  
var ret = $.loader( 'userinfo' ).remove( idList[1] );  
   
  
  
// result: true, modules: [ 'module1', 'module3' ] 
  
 
 

在交互事件中執(zhí)行.request()方法：$.loader( key ).request();

當(dāng)然，你也可以拋棄之前add的ajax settings和callback，在交互事件中自己寫(xiě)$.ajax或$.get等。然后在請(qǐng)求前調(diào)用$.loader( key ).show()，在回調(diào)函數(shù)內(nèi)調(diào)用$.loader( key ).hide()。這樣也可以靈活控制loading的狀態(tài)。

示例

  
 
 

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

你也可以從新重新寫(xiě)請(qǐng)求：

  
 
 

   
  
  
$( '#getUserInfo' ).bind( 'click', function() {  
   
  
  
    $.loader( 'userinfo' ).show();  
   
  
  
    $.get( 'server/userinfo.php', function( data ) {  
   
  
  
        $.loader( 'userinfo' ).hide();  
   
  
  
        updateContent( $( '#userinfo, #topsection, #footer-userinfo' ), data );  
   
  
  
    })  
   
  
  
}); 
  
 
 

注意：一個(gè)請(qǐng)求反復(fù)觸發(fā)時(shí)，管理器會(huì)執(zhí)行abor()來(lái)阻止之前未完成的請(qǐng)求，重新發(fā)布新的請(qǐng)求，然而如果你在頁(yè)面中通過(guò)jquery的ajaxError事件輸出錯(cuò)誤信息，會(huì)把該信息一并認(rèn)為是錯(cuò)誤的，所以如果有必要的話，需要你自行過(guò)濾。

示例

  
 
 

   
  
  
// 輸出錯(cuò)誤日志  
   
  
  
$( 'body' ).bind( 'ajaxError', function( event, xhr, setting, thrownError ) {  
   
  
  
    // 過(guò)濾掉 abort 的錯(cuò)誤信息  
   
  
  
    if ( xhr.status === 0 || xhr.readyState === 0 || xhr.statusText === 'abort' ) {  
   
  
  
        return;  
   
  
  
    }  
   
  
  
    $( '#log' ).append( '
' + thrownError + '
' );  
   
  
  
}); 
  
 
 

打包下載：Ajax請(qǐng)求狀態(tài)管理器。

新聞標(biāo)題：jQueryAjax請(qǐng)求狀態(tài)管理器
標(biāo)題鏈接：http://uogjgqi.cn/article/djcepij.html