Javascript学习--进度条

 随着Ajax技术的广泛，Javascript的研究也越来越受到重视，以前招聘网站开发人员只要求HTML，CSS，然后是服务端脚本技术。Javascript是不会提及的，Ajax中要大量使用Javascript，也使得Javascript不在是以前单纯的那种客户端的脚本，也不限于表单的验证。版本更新周期也越来越短，加入了大量的成熟的面向对象技术，使得Javascript已成为最优雅的程序语言之一。
Ajax是以客户端和服务端的异步模式取代创统的页面刷新模式，所以在这个后台过程中，对用户作出提示是很有必要的。对这个后台过程的有两种基本的模式：静态的和动态的。静态是指用静态的图片和文字在醒目的位子对用户给予提示。动态的就是用脚本写的具有动态效果的类似程序启动时的进度条。

Javascript写动态效果是不能少window.setTimeout(fn,delay)这个方法的。

HTML：

<div id="rep">
<div id="bg">
<div class="info">正在处理数据，请稍后...</div>
<div id="bgbord" align="left">
<div id="processBar"></div>
</div>
</div><!-- /End Bg -->

 

CSS：

form td{font-size:13px;}
#ftab{border:1px solid gray;width:500;padding:2;}
.caption{background-color:#606960;color:#FFF;padding:6 4 4 2;font-weight:bold;}
.btn{width:53;height:24;font-weight:bold;color:#FFF;font-size:13px;border:1 outside #CCC;background-color:gray;
/* url(../images/button.gif) no-repeat center middle;*/}

JAVASCRIPT：

var xmlHttp;
var bar=document.getElementById("processBar");
bar.style.width=1+"px";
var TID;
var BAR_LEN=200;
var MaxCurLen=BAR_LEN/2-5;
function createXMLHttp()
...{
      if(window.ActiveXObject)...{ 
            try...{
                xmlHttp=new ActiveXObject("MSXML2.XMLHTTP");
               } catch(e) ...{
               xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
              }
       } else if(window.XMLHTTPRequest)...{
                   xmlHttp=new XMLHTTPRequest();
        }
}

function doClick()
...{
      if(!checkfrm())return;
      var str='str=hello,world';
       process();
       createXMLHttp();
       xmlHttp.open("POST","deal.php",true);
       xmlHttp.onreadystatechange=handle;
       xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       xmlHttp.send(str);
}

function process()
...{
      var temp=parseInt(bar.style.width);
       if(temp<=MaxCurLen)...{
             bar.style.width=temp+5+"px";
       }
     TID=window.setTimeout("process()",100);
}

function clear()
...{
 window.clearTimeout(TID);
}

function handle()
...{
     var status=xmlHttp.readyState;
     var temp=BAR_LEN/4;
     if(status>2)...{
           bar.style.width=temp*(status-1)+"px";
           MaxCurLen=temp*status;
      }
    if(status==4)...{
        if(xmlHttp.status==200)...{
             bar.style.width=BAR_LEN+"px";
            deal(xmlHttp.ResponseText);
            alert("数据提交成功！非常感谢您的关注！");
           clear();
        }
    }
}

function deal(str)
...{
    alert(str);
}