對於AJAX，異步傳輸數據，那肯定是要等待服務器的數據返回，對於客戶來說，等待數據會讓他們失去耐心，一種加載動畫的方式，可以讓客戶知道，這是需要一點時間的，客戶體驗比較友好，下面就來實現這個功能吧。
1、設計思路，
統計交易量，點擊提交按鈕，將日期時間段，用AJAX傳給服務器，同時，加載一個等待動畫比如（gif動畫），當服務器傳回數據到客戶端的時候，輸出數據，並去掉這個動畫。
2、編程語言及技術
JavaScript，JQuery，Java，Jsp，CSS
3、圖文示例
JQuery、AJAX加載數據時候的loading加載動畫實現步驟
圖一，初始狀態，點擊Get按鈕，向服務器把日期時間段傳過去，然後獲取數據在文本框裏顯示
JQuery、AJAX加載數據時候的loading加載動畫實現步驟
圖二，點擊Get按鈕之後，旁邊顯示一個動畫，表示正在獲取數據
JQuery、AJAX加載數據時候的loading加載動畫實現步驟
圖三，數據獲取完成之後，動畫同時消失
JQuery、AJAX加載數據時候的loading加載動畫實現步驟
圖四，動畫的img代碼是用JQuery的html函數插入到span標籤裏面，來實現，數據獲取成功之後，再插入一段空的html代碼就可以了。
4、代碼片段
JQuery部分
$("button").click
(
function()
{
var cate = $(this).attr("id");
var inputID = "#" + cate.replace("bt_","text_");
var spanID = "#" + cate.replace("bt_","span_");
//點擊button時候，加載動畫loading
$(spanID).html("JQuery、AJAX加載數據時候的loading加載動畫實現步驟");
//先清空文本框中的值
$(inputID).val("");
$.post
(
"res.jsp",
{
textFrom:$.getFromDate(),
textTo:$.getToDate(),
textCate:cate
},
function(data,status)
{
//取得返回的數據後，去掉加載動畫loading
$(spanID).html("");
$(inputID).val(data);
}
);
}
);如上，在post執行之前開始加載動畫，在post方法裏面data部分的函數開始處，移除動畫代碼。
Html部分：
總交易量（含手工出票）：
<input type="button" value="Get">
<input type="text">
<input type="button" value="Copy">jsp部分：
就是返回一些數據，用jsp輸出，注意，直接輸出文本，比如out.print來輸出就行。