在使用Ajax功能時，一般規劃大都會是清空原本資料區域，顯示Loading畫面，取得資料及處理，然後把Loading移除後顯示回傳的資料，而以下這個範例會再多二個效果，在清空原本資料區域前先做淡出效果，而在取回資料顯示之前，做淡入的效果。
所以效果顯示的順序會是：
而在資料傳遞方面則使用格式json，在取回json格式的資料後，依json Array使用for迴圈一個個附加append到資料區域裡。
//可以透過.length得知其中的物件數
var NumOfJData = Jdata.length;
//把取得的json加上html tag顯示於容器裡
for (var i = 0; i < NumOfJData; i++) {
jQuery("#ajax").append("<div class=\"ajaxRoll\"><img src=\"images/icon/"+
Jdata[i]["id"]+".jpg\" /><div class=\"title\">"+Jdata[i]["title"]+
"</div><div class=\"desc\">"+Jdata[i]["title"]+"</div></div>");
}
為了使分頁資訊按鈕顯示在資料區域的右下角，所以在分頁資訊按鈕外層設定css，寬高均為必要元素。
.ajaxagent {
width: 616px;
height: 550px;
position: relative;
}
而裡面一層的Div則使用以下css來使其浮動停靠在所設定的位置，寬高及位置元素都是必要的
.ajaxagent ul.playerControl {
position: absolute;
bottom: 5px;
height: 20px;
right: 5px;
}