脚本宝典收集整理的这篇文章主要介绍了js實例教程-jQuery 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="https://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 );
}
);

代碼如下:

$( '#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 );
})
});

代碼如下:

// 輸出錯誤日誌
$( '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>' );
});

覺得可用，就經常來吧！Javascript技巧 腳本寶典 歡迎評論哦！&nbsp;js技巧，巧奪天工，精雕玉琢。小寶典獻醜了！

脚本宝典总结

以上是脚本宝典为你收集整理的js實例教程-jQuery Ajax請求狀態管理器打包全部内容，希望文章能够帮你解决js實例教程-jQuery Ajax請求狀態管理器打包所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。