当我们的项目中引入Ajax技术的时候,由于不对浏览器进行刷新,所以当操作对界面元素修改比较少的情况下,用户很难发现自己的操作是否完成.
(当然我们可以使用鲜明颜色的字体,来完成我们的提示).但是这样的解决方案在有些时候,还是不能满足用户的需求,那我们应该怎么办呢?
于是我参考别人的代码,根据自己的需求写了下面这个”显示进度”的小Demo!

对以上代码进行几点说明:
1.Ajax.js文件,是我在以前文章提到的框架,地址:http://hjh1982.cnblogs.com/archive/2006/07/19/454630.html.
2.代码中还有几个js函数,分别是:


//根据对象的ID返回对象本身
function getId(objId){
    return document.getElementById(objId);
}

//设置对象过时时间
function setTime(obj){
    setTimeout(obj,1000);
}

//改变指定对象的显示模式
//objId是对象的id值
//state是对象更改后的状态
function changeDisplay(objId ,state){
    getId(objId).style.display = state; 
}
其实,我认为,当我说明了我的思路以后,大家就能把代码写出来,肯定还会比我写的好!

我在给出程序的代码之前,先说说我个人的思路.我们都知道XMLHttpRequst对象,在执行请求的时候,存在五种不同的状态:

readyState

对象状态(integer):

0 = 未初始化

1 = 读取中

2 = 已读取

3 = 交互中

4 = 完成

我就是根据这五种不同的状态,来达到显示进度的目的.在请求处于不同的状态的时候,来显示不同的文本,这样就会形成完整进度显示.

下面的是主程序的代码:


<html>
    <head>
        <title>显示进度</title>
        <style type="text/css"> #loadifo { position: absolute; top: 200px; width: 120px; background: #F69; padding: 10px; filter: Alpha(Opacity=90); text-align: center; color: #FFF; border: 1px dashed #909; left: 400px; }
    </style>
        <script language="javascript" src="http://localhost:87/js/Ajax.js"></script>
        <script language="javascript">
         function checkCode(){
                    changeDisplay("loadifo" ,"block");
                    var uri ="/Ajax/CallServer.aspx?timeStamp="+new Date().getTime();
                    var checks = new ajax.req(uri,toCheck ,null ,checkState);
                    close_object();
                }
            function toCheck(){
                    var data = this.xmlHttp.responsetext;
                    alert(data);
                    changeDisplay("loadifo" ,"none");
                }
            function checkState(){
                if(this.xmlHttp.readyState == 1){
                    getId("loadifo").innerHTML = "连接服务器";
                    }
                else if(this.xmlHttp.readyState == 2){
                    getId("loadifo").innerHTML = "开始加载数据";
                    }
                else if(this.xmlHttp.readyState == 3){;
                    getId("loadifo").innerHTML = "正在加载数据"
                    }
                else if(this.xmlHttp.readyState == 4){
                    if(this.xmlHttp.status == 200){
                    getId("loadifo").innerHTML = "加载完成";
                    setTimeout(loadifo)                
                    }
                    else{
                        getId("loadifo").innerHTML = "错误是:"+this.xmlHttp.status+"";
                    }
                }
            }
        </script>
    </head>
    <body>
        <input id="div" type="button" onclick="checkCode();" value="测试">
        <div id="loadifo" style="DISPLAY:none"></div>
    </body>
</html>