使用Ajax從后臺取得反饋信息后總要在前臺顯示給客戶看，顯示方式從簡單到復雜一般有三種：1.使用alert顯示文字，這種方式簡便易用，但容易中斷用戶操作，效果也太死板；2.改變頁面某一區域的文字或是圖片，這種使用起來也比較方便，實現也不復雜；3.使用新窗口顯示，這種效果最好，但實現復雜些。本例中采用第二種方式。
Ajax提示信息出現的位置在于次級菜單欄的下方，邊欄和內容欄的上方，由兩部分組成：圖標和文字。
消息欄的HTML代碼如下：
<div id="msgDiv">
<span id="iconSpan">
<img src="web/img/icon/ok.gif" width="24px" height="24px"/>
</span>
<span id="msgSpan">
fdsfdsfsdfsdfsdfsdfsdfsdfsdfsd
</span>
</div>
定義它們的CSS如下：
#msgDiv{
display:none;
}
#iconSpan{
vertical-align:middle;
}
#msgSpan{
height:100%;
font-size:16px;
color:#404040;
}
在沒有Ajax消息前，它們整體是不表現的，通過display:none進行限制；有消息發生后，再使用JavaScript改變msgDiv,iconSpan,msgSpan的狀態和內容即可，基本原理很簡單，但我們不希望把代碼弄亂，因此需要用類整合一下。
其中iconSpan中將顯示的圖標共有四種：加載圖標，用于在從服務器取回響應前；完成圖標，用于從服務器取得正確信息后；警告圖標，用于從服務器取得錯誤信息后；錯誤圖標，用于無法取得來自服務器的響應時。這樣，用戶在仔細查看文字前，就能大致了解發生的情況，為了使用上的方便，我特地把Ajax消息顯示器組合成了一個Msger類。如下所示：
/*************************
*
* Class:Msger
* 2009-9-9
**************************/
//-- Contructor
function Msger(){
this.msgDiv=$("msgDiv");
this.iconSpan=$("iconSpan");
this.msgSpan=$("msgSpan");
// 這里是四種圖標
this.icons=new Array;
this.icons[0]="<img src='web/img/icon/error.gif' width='24px' height='24px'/>";
this.icons[1]="<img src='web/img/icon/loading.gif' width='24px' height='24px'/>";
this.icons[2]="<img src='web/img/icon/ok.gif' width='24px' height='24px'/>";
this.icons[3]="<img src='web/img/icon/warning.gif' width='24px' height='24px'/>";
this.timer=new Object;
}
// 顯示錯誤信息,出現后不消失
Msger.prototype.showErrorMsg=function(msg){
this.msgDiv.style.display="block";
this.iconSpan.innerHTML=this.icons[0];
this.msgSpan.innerHTML=msg;
this.msgSpan.style.color="#ff0000";
}
// 顯示載入信息，出現后不消失，因為很快會被其他信息替代
Msger.prototype.showLoadingMsg=function(msg){
this.msgDiv.style.display="block";
this.iconSpan.innerHTML=this.icons[1];
this.msgSpan.innerHTML=msg;
this.msgSpan.style.color="#404040";
}
// 顯示正確消息，使用后漸漸消失
Msger.prototype.showOkMsg=function(msg){
this.msgDiv.style.display="block";
this.iconSpan.innerHTML=this.icons[2];
this.msgSpan.innerHTML=msg;
this.msgSpan.style.color="#404040";
this.timer=setTimeout("msger.fadeout()",2000);
}
// 顯示警告消息，出現一段時間后消失
Msger.prototype.showWarningMsg=function(msg){
this.msgDiv.style.display="block";
this.iconSpan.innerHTML=this.icons[3];
this.msgSpan.innerHTML=msg;
this.msgSpan.style.color="#f5692e";
this.timer=setTimeout("msger.hide()",5000);
}
// 隱藏
Msger.prototype.hide=function(){
this.msgDiv.style.display="none";
clearTimeout(this.timer);
}
// 漸漸消失
Msger.prototype.fadeout=function(){
var colorRGB=this.msgSpan.style.color;
var color=parseInt(colorRGB.slice(1,3),16)+3;
if(color<256){
var v1=(Math.floor(color/16)).toString(16);
var v2=(Math.floor(color%16)).toString(16);
var colorStr="#"+v1+""+v2+v1+""+v2+v1+""+v2;
this.msgSpan.style.color=colorStr;
this.timer=setTimeout("msger.fadeout()",120);
}
else{
this.hide();
}
}
上面這些函數都好理解，fadeout函數還需要贅述一下，讓文字漸漸消失是通過修改文字的顏色實現的，使它不斷向純白色靠攏就行，另外使用setTimeout調用自身的寫法“
msger.fadeout()”要值得注意。以上函數大家務必要理解。
使用上就比以前簡化了，以下是用戶列表頁面的例子：
<script language="javascript">
<!--
//-- 消息顯示器
var msger;
/*****************************************************
* 窗口載入時調用的啟動函數
*****************************************************/
window.onload=function(){
.
// 初始化消息顯示器
msger=new Msger;
.
}
/*****************************************************
* 選擇成員加入Session
*****************************************************/
function selectMember(id){
msger.showLoadingMsg("將選擇的用戶id'"+id+"'加入項目備選用戶名單中");
new Ajax.Request(prjName+'SelectUsersIntoSession.do?id='+id,
{
method:'get',
onSuccess: function(ajaxObj){
var status=ajaxObj.responseXML.getElementsByTagName("status")[0].firstChild.data;
// alert(ajaxObj.responseText);
if(status=="ok"){
var text=ajaxObj.responseXML.getElementsByTagName("text")[0].firstChild.data;
msger.showOkMsg(text);
}
else{
// 返回錯誤信息
var text=ajaxObj.responseXML.getElementsByTagName("text")[0].firstChild.data;
msger.showWarningMsg(text);
}
},
onFailure: function(){
msger.showErrorMsg("無法取得服務器的響應");
}
}
);
}
//-->
</script>
其中，類實例msger與前面的
“this.timer=setTimeout("msger.fadeout()",120);”中的msger是呼應的，需要注意。
好了，就到這里，全體代碼請到“
”
--全文完--