AJAX 全稱 Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。它并非一種新的技術(shù),而是以下幾種原有技術(shù)的結(jié)合體。
1) 使用CSS和XHTML來表示。
2) 使用DOM模型來交互和動(dòng)態(tài)顯示。
3) 使用XMLHttpRequest來和服務(wù)器進(jìn)行異步通信。
4) 使用javascript來綁定和調(diào)用。
通過AJAX異步技術(shù),可以在客戶端腳本與web服務(wù)器交互數(shù)據(jù)的過程中使用XMLHttpRequest對象來完成HTTP請求(Request)/應(yīng)答(Response)模型:
1) 不需要用戶等待服務(wù)端響應(yīng)。在異步派發(fā)XMLHttpRequest請求后控制權(quán)馬上就被返回到瀏覽器。界面不會(huì)出現(xiàn)白板,在得到服務(wù)器響應(yīng)之前還可以友好的給出一個(gè)加載提示。
2) 不需要重新加載整個(gè)頁面。為XMLHttpRequest注冊一個(gè)回調(diào)函數(shù),待服務(wù)器響應(yīng)到達(dá)時(shí),觸發(fā)回調(diào)函數(shù),并且傳遞所需的少量數(shù)據(jù)。“按需取數(shù)據(jù)”也降低了服務(wù)器的壓力。
3) 不需要使用隱藏或內(nèi)嵌的框架。在XHR對象之前,模擬Ajax通信通常使用hack手段,如使用隱藏的或內(nèi)嵌的框架(<iframe>標(biāo)簽)。
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="http://www.gimoo.net/t/1901/${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 異步加載顯示等待效果代碼分享,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對綠夏網(wǎng)網(wǎng)站的支持!