AJAX进度条

用Ajax+php打造进度条，其实很简单。 
readyState == 状态(0,1,2,3,4) 
0:请求未初始化，还没调用open 
1:请求已经建立，但还没有发送，还没调用send 
2：请求已发送，并且正在处理 
3：请求正在处理，通常响应中已有部分数据可调用 
4：完毕 

根据readystate来计算的，不是虚拟的进度，不过速度快的话可能看不到效果。

        代码如下：

//lael 赢动ajax简易版1.0
//时间: 2006-12-19
//http://www.gzyd.net
function Ajax(){
var XmlHttp = null;
var DataObject = null;//数据接收对象
var LoadingBar = null;//状态显示对象
var LoadingMax = 100;//进度条最大值
var LoadingWidth = null;//保存宽度,还原初始属性
var LoadingTimer = 10;//刷新时间
var LoadingTimerID = null;//时间ID
var FinishTimer = 10;//完成停留时间,等候进度条完成
var FinishTimerID = null;//时间ID
var HttpState = 0;
var CanFree = false;//释放
this.Create = function(free){
     try{
      if(free)CanFree = true;
      if(navigator.appName.indexOf("Netscape")==-1){
       try{
              XmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
       }catch(e){
        XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");   
       }
          }else{
             XmlHttp=new XMLHttpRequest();
          }
       return true;
     }catch(e2){
      return false;
     }
}
this.Send = function(url, obj1, obj2){
     try{
      DataObject = obj1;
      LoadingBar = obj2;
      if(LoadingBar){
       LoadingMax = LoadingBar.offsetWidth;//保存可见宽度
       LoadingWidth = LoadingBar.style.width;//可能会没有设置宽度,这时数据为空
       LoadingBar.style.width = "0px";
       LoadingBar.innerHTML = "0%";
       LoadingBar.style.display = "";
       DataObject.style.display = "none";
       HttpState = 0;
       if(LoadingTimerID)clearInterval(LoadingTimerID);//清空时钟
       LoadingTimerID = setInterval(this.StatusBar, LoadingTimer);
      }
        XmlHttp.open("GET", url, true);    
        XmlHttp.onreadystatechange = this.StateChange;
      XmlHttp.send(null);
      return true;
     }catch(e){
      return false;
     }
}
this.StateChange = function(){
     try{
      if(XmlHttp.readyState)HttpState = XmlHttp.readyState;


        if (XmlHttp.readyState == 4) {
       if(LoadingTimerID)clearInterval(LoadingTimerID);//清空时钟
       if(LoadingBar){
        LoadingBar.style.width = LoadingWidth;
        LoadingBar.innerHTML = "100%";
        if(FinishTimerID)clearInterval(FinishTimerID);//清空时钟
        FinishTimerID = setInterval(this.Finish, FinishTimer);
       }else{
        DataObject.innerHTML = XmlHttp.responseText;
        if(CanFree)this.Destroy();
       }
        }
  
      this.Finish = function(){//放到外面访问不了
       if(FinishTimerID)clearInterval(FinishTimerID);//清空时钟
       LoadingBar.style.display = "none";
       DataObject.style.display = "";
       DataObject.innerHTML = XmlHttp.responseText;
       if(CanFree)this.Destroy();
      }
   
      this.Destroy = function(){
       if(LoadingTimerID)clearInterval(LoadingTimerID);//清空时钟
       if(FinishTimerID)clearInterval(FinishTimerID);//清空时钟
       XmlHttp = null;
      }
   
     }catch(e){}
}
this.StatusBar = function(){
     try{
      if(LoadingBar.offsetWidth >= LoadingMax){
       LoadingBar.innerHTML = "100%";
       LoadingBar.style.width = LoadingWidth;
       return;//返回
      }
   
      if(LoadingBar.offsetWidth < (HttpState + 1) * Math.floor(LoadingMax / 4)){
       var loading = LoadingBar.offsetWidth + Math.floor(LoadingMax / 40);//十分之一
       LoadingBar.style.width = loading + "px";
       var percen = Math.floor(loading / LoadingMax * 100);
       LoadingBar.innerHTML = (percen>100?100:percen) + "%";
      }else{
       LoadingBar.style.width = (HttpState + 1) * Math.floor(LoadingMax / 4) + "px";
       LoadingBar.innerHTML = Math.floor(100 / (4 - HttpState)) + "%";
      }
     }catch(e){}
}
this.Destroy = function(){
     if(LoadingTimerID)clearInterval(LoadingTimerID);//清空时钟
     if(FinishTimerID)clearInterval(FinishTimerID);//清空时钟
     XmlHttp = null;
}
}

使用一例：

<script language="jscript.encode" src="js/ajax.js"></script>
<div style="background:#b7d2ec url(http://www.gzyd.net/lael/loading.gif) center no-repeat; height:10px; text-align:center; color:#fff; " id="status">
</div>
<div id="data"></div>
<script language="javascript">
<!--
var obj = new Ajax();
if(obj.Create(true)){
obj.Send('http://www.gzyd.net', document.getElementById('data'), document.getElementById('status'));
}
//-->
</script>

转自： http://www.cn-java.com/www1/?action-viewnews-itemid-8298