建站
咨詢
售后
建站咨詢
新聞中心
現(xiàn)在的網(wǎng)站，在一個網(wǎng)頁中有異步請求甚至許多個異步請求已經不足為奇。Ajax已經成為了現(xiàn)在網(wǎng)站必須的基本功能，使網(wǎng)頁應用更接近于桌面應用。
然而，無論有多么接近，通過客戶端與服務端的一來一回，必定會有等待加載數(shù)據(jù)的時間。所以，大多數(shù)網(wǎng)站都通過一個Gif動態(tài)圖標或‘Loading...’等字樣來告知用戶數(shù)據(jù)還在加載中。但有時候這個問題會非常繁瑣和麻煩，要么將這個‘Loading’顯示在ajax請求之前，然后在ajax成功后隱藏它，或者將它寫在jquery的ajax的全局事件jQuery.ajaxStart()和jQuery.ajaxStop()中來控制整個頁面的ajax狀態(tài)。前者方法使用起來太瑣碎，每個請求都要寫一遍這個‘Loading’，而且無論請求成功或失敗都需要隱藏它。后者是全局的，也就是整個頁面的請求狀態(tài)，有時候無法滿足在局部顯示加載狀態(tài)的要求。
為了解決這些問題，我開發(fā)了jQuery的插件，名為：Ajax請求狀態(tài)管理器。使用這個插件可以讓loading不再那么麻煩了。你可以在觸發(fā)ajax請求前，用該插件事先添加寫好所有請求，你要做的只是在用戶交互的事件中執(zhí)行下.request()方法。你可以將一個頁面上所有請求設置為獨立顯示loading，也可以設置為全局顯示（只顯示一個loading）。下面是插件的具體使用方法：
自定義loading的css樣式：
- .state-loading { background: #fff url(images/icon-ajax-loader.gif) ... }
引用jquery***版本文件：
注意：該插件只在jquery1.4.4及之后的版本中測試通過。
引用Ajax請求狀態(tài)管理器插件文件：
在jquery的ready事件中執(zhí)行.install()方法:
- $.loader.install( className, isGlobal );
參數(shù)說明：
className：string，表示你自定義的loading的class名稱，比如上面css定義的state-loading。
isGlobal：boolean，定義是否是全局顯示還是獨立顯示loading，默認值是true，該參數(shù)可以省略。
添加所需的ajax請求參數(shù)和成功后的回調方法：
- $.loader( key ).add( modules, settings , callback );
參數(shù)說明：
key：string，通過這個key來創(chuàng)建或獲取指定模塊的加載器。當然，同一個key可以執(zhí)行多次add()方法來添加不同的module，但是settings和callback是對于這個key是共享的，所以之后添加的settings和callback會覆蓋之前的。
modules：jquery object，一個頁面中同一個請求可以處理多個模塊的數(shù)據(jù)，所以，如果之前install()方法是設置為false的，在執(zhí)行ajax請求時，添加到這個loader的所有module都會顯示loading狀態(tài)。
settings：map，jquery的ajax settings參數(shù)，但不要設置ajax事件，這樣會覆蓋插件中的回調方法，默認請求類型為GET。
callback：function，成功后的回調函數(shù)，它有一個參數(shù)data，默認是json類型返回的對象。
add()方法返回一個由'module'前綴的字符串數(shù)組，比如你添加了3個元素，那結果為['module1', 'module2', 'module3']。你可以通過返回的數(shù)組來刪除指定的其中一個模塊的loading，也可以不指定，也就是全部刪除，當然如果你需要這樣做的話。
remove()方法刪除指定的模塊：
- $.loader( key ).remove( moduleId );
參數(shù)說明：
moduleId：string或者array，指定為string的話會刪除其中一個module，指定為數(shù)組會批量刪除模塊，如果未指定參數(shù)，會將模塊全部刪除。
示例
添加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' ]
在交互事件中執(zhí)行.request()方法：$.loader( key ).request();
當然，你也可以拋棄之前add的ajax settings和callback，在交互事件中自己寫$.ajax或$.get等。然后在請求前調用$.loader( key ).show()，在回調函數(shù)內調用$.loader( key ).hide()。這樣也可以靈活控制loading的狀態(tài)。
示例
- $( '#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 );
- })
- });
注意：一個請求反復觸發(fā)時，管理器會執(zhí)行abor()來阻止之前未完成的請求，重新發(fā)布新的請求，然而如果你在頁面中通過jquery的ajaxError事件輸出錯誤信息，會把該信息一并認為是錯誤的，所以如果有必要的話，需要你自行過濾。
示例
- // 輸出錯誤日志
- $( 'body' ).bind( 'ajaxError', function( event, xhr, setting, thrownError ) {
- // 過濾掉 abort 的錯誤信息
- if ( xhr.status === 0 || xhr.readyState === 0 || xhr.statusText === 'abort' ) {
- return;
- }
- $( '#log' ).append( '
' + thrownError + '
' );- });
打包下載：Ajax請求狀態(tài)管理器。
網(wǎng)站題目：jQueryAjax請求狀態(tài)管理器
瀏覽地址：http://www.5511xx.com/article/djcepij.html
