AJAX 全稱 Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。它并非一種新的技術(shù)，而是以下幾種原有技術(shù)的結(jié)合體。接下來(lái)通過(guò)本文給大家介紹jQuery Ajax 異步加載顯示等待效果，需要的朋友一起學(xué)習(xí)吧

AJAX 全稱 Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。它并非一種新的技術(shù)，而是以下幾種原有技術(shù)的結(jié)合體。

1) 使用CSS和XHTML來(lái)表示。

2) 使用DOM模型來(lái)交互和動(dòng)態(tài)顯示。

3) 使用XMLHttpRequest來(lái)和服務(wù)器進(jìn)行異步通信。

4) 使用javascript來(lái)綁定和調(diào)用。

通過(guò)AJAX異步技術(shù)，可以在客戶端腳本與web服務(wù)器交互數(shù)據(jù)的過(guò)程中使用XMLHttpRequest對(duì)象來(lái)完成HTTP請(qǐng)求(Request)/應(yīng)答(Response)模型：

1) 不需要用戶等待服務(wù)端響應(yīng)。在異步派發(fā)XMLHttpRequest請(qǐng)求后控制權(quán)馬上就被返回到瀏覽器。界面不會(huì)出現(xiàn)白板，在得到服務(wù)器響應(yīng)之前還可以友好的給出一個(gè)加載提示。

2) 不需要重新加載整個(gè)頁(yè)面。為XMLHttpRequest注冊(cè)一個(gè)回調(diào)函數(shù)，待服務(wù)器響應(yīng)到達(dá)時(shí)，觸發(fā)回調(diào)函數(shù)，并且傳遞所需的少量數(shù)據(jù)?！鞍葱枞?shù)據(jù)”也降低了服務(wù)器的壓力。

3) 不需要使用隱藏或內(nèi)嵌的框架。在XHR對(duì)象之前，模擬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="${path}/map/image/2012032811155512.gif" alt=""/>正在加載數(shù)據(jù),請(qǐng)稍候...</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();
}

圖片效果圖如下所示：