逍遥游

一直在想,怎样路好走一点,一直想,一直在崎岖中徘徊。
  首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

代码如下:

 

//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>

 

 

 

 

 

 

 

 

 

////////////////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////

//精简回调函数版

 

function Ajax(){
var XmlHttp = null;
var CallBackFunc = null;//回调函数
this.Create = function(){
     try{
      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, func){
     try{
      CallBackFunc = func;
        XmlHttp.open("GET", url, true);    
        XmlHttp.onreadystatechange = this.StateChange;
      XmlHttp.send(null);
      return true;
     }catch(e){
      XmlHttp = null;
      return false;
     }
}
this.StateChange = function(){
    try{
       if(XmlHttp.readyState == 4) {
      CallBackFunc(XmlHttp.responseText, true);
      XmlHttp = null;
       }
    }catch(e){
     CallBackFunc(null, false);
     XmlHttp = null;
    }
}
}

 

//用法

<script language="javascript" src="js/ajax.js"></script>
<script language="javascript">
<!--
function get_html(params){
var ajax1 = new Ajax();
if(ajax1.Create()){
     ajax1.Send("ajax.php?"+params, cb);
}
}
function cb(html, success){
var div = document.createElement("DIV");
div.style.width = 100;
div.style.height = 100;
div.style.top = 100;
div.style.left = 100;
div.style.position = "absolute";
document.body.appendChild(div);
div.innerHTML = html;
}
//-->
</script>