jQuery Ajax 異步加載顯示等待效果代碼分享
AJAX 全稱 Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。它并非一種新的技術,而是以下幾種原有技術的結合體。
1) 使用CSS和XHTML來表示。
2) 使用DOM模型來交互和動態(tài)顯示。
3) 使用XMLHttpRequest來和服務器進行異步通信。
4) 使用javascript來綁定和調用。
通過AJAX異步技術,可以在客戶端腳本與web服務器交互數(shù)據(jù)的過程中使用XMLHttpRequest對象來完成HTTP請求(Request)/應答(Response)模型:
1) 不需要用戶等待服務端響應。在異步派發(fā)XMLHttpRequest請求后控制權馬上就被返回到瀏覽器。界面不會出現(xiàn)白板,在得到服務器響應之前還可以友好的給出一個加載提示。
2) 不需要重新加載整個頁面。為XMLHttpRequest注冊一個回調函數(shù),待服務器響應到達時,觸發(fā)回調函數(shù),并且傳遞所需的少量數(shù)據(jù)?!鞍葱枞?shù)據(jù)”也降低了服務器的壓力。
3) 不需要使用隱藏或內嵌的框架。在XHR對象之前,模擬Ajax通信通常使用hack手段,如使用隱藏的或內嵌的框架(<iframe>標簽)。
css:
#loading {
width:170px;
height:25px;
border:3px solid #C3DAF9;
position:absolute;
top:300px;
left:600px;
z-index:10000;
background-color:#F7F9FC;
line-height:25px;
vertical-align:middle;
font-size:11pt;
display:none;
}
html:
<div id="loading"><img src="${path}/map/image/2012032811155512.gif" alt=""/>正在加載數(shù)據(jù),請稍候...</div>
js:
$.ajax({
async: true,
beforeSend: function () {
ShowDiv();
},
complete: function () {
HiddenDiv();
},
type : 'POST' ,
url : '',
data : {
},
success: function (data) {
//var obj = JSON.parse(data);
//var str = JSON.stringify(obj);
}
});
//顯示加載數(shù)據(jù)
function ShowDiv() {
$("#loading").show();
}
//隱藏加載數(shù)據(jù)
function HiddenDiv() {
$("#loading").hide();
}
圖片效果圖如下所示:

以上所述是小編給大家介紹的jQuery Ajax 異步加載顯示等待效果代碼分享,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
jquery.uploadView 實現(xiàn)圖片預覽上傳功能
圖片上傳,網上有好多版本,今天小編給大家分享jquery.uploadView 實現(xiàn)圖片預覽上傳功能,感興趣的的朋友一起看看吧2017-08-08
利用jQuery實現(xiàn)WordPress中@的ID懸浮顯示評論內容
這篇文章主要介紹了使用JavaScript實現(xiàn)WordPress中ID懸浮顯示評論的功能,就是在樓中樓式的評論中顯示被評論的主體內容,需要的朋友可以參考下2015-12-12
jQuery插件HighCharts繪制2D帶有Legend的餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D帶有Legend的餅圖效果,結合實例形式分析了jQuery使用HighCharts繪制帶明細顯示的餅狀圖效果實現(xiàn)技巧,并附帶了demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03

