AJAX 全稱 Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。它并非一種新的技術,而是以下幾種原有技術的結合體。
1) 使用CSS和XHTML來表示。
2) 使用DOM模型來交互和動態顯示。
3) 使用XMLHttpRequest來和服務器進行異步通信。
4) 使用javascript來綁定和調用。
通過AJAX異步技術,可以在客戶端腳本與web服務器交互數據的過程中使用XMLHttpRequest對象來完成HTTP請求(Request)/應答(Response)模型:
1) 不需要用戶等待服務端響應。在異步派發XMLHttpRequest請求后控制權馬上就被返回到瀏覽器。界面不會出現白板,在得到服務器響應之前還可以友好的給出一個加載提示。
2) 不需要重新加載整個頁面。為XMLHttpRequest注冊一個回調函數,待服務器響應到達時,觸發回調函數,并且傳遞所需的少量數據?!鞍葱枞祿币步档土朔掌鞯膲毫Α?br />
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=""/>正在加載數據,請稍候...</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);}});//顯示加載數據function ShowDiv() {$("#loading").show();}//隱藏加載數據function HiddenDiv() {$("#loading").hide();}
圖片效果圖如下所示:
以上所述是小編給大家介紹的jQuery Ajax 異步加載顯示等待效果代碼分享,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答