使用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是呼应的，需要注意。
好了，就到这里，全体代码请到“
”
--全文完--