Ajax制作Web进度条

最新推荐文章于 2022-08-09 13:21:16 发布
你尽不知
最新推荐文章于 2022-08-09 13:21:16 发布
阅读量376
点赞数
分类专栏： js
js 专栏收录该内容
7 篇文章 0 订阅
订阅专栏
转自：http://www.cnblogs.com/lihuiy
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript" language="javaScript">
      var bgcolor = '#7FFF00'; //全局变量，用于设置进度条的背景色
      var number; //全局变量，用于记录当前span序号
      var clear = "   "; //全局变量，记录清空时的内容
      var xmlHttp = false; //全局变量，用于记录XMLHttpRequest对象
      function createXMLHttpRequest() { //创建XMLHttpRequest对象的方法
        if(window.ActiveXObject) { //Inetrnet Explorer时，创建XMLHttpRequest对象的方法
          try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
          } catch(e) {
            try {
              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
               //旧版本的Inetrnet Explorer，创建XMLHttpRequest对象
            } catch(e) {
              window.alert("创建XMLHttpRequest对象错误"+e);
            } 
          }
        } else if(window.XMLHttpRequest) { //mozilla时，创建XMLHttpRequest对象的方法
          xmlHttp = new XMLHttpRequest();
        } 
        if(!(xmlHttp)) { //未成功创建XMLHttpRequest对象
            window.alert("创建XMLHttpRequest对象异常！");
        }  
      }

      //启动进度条的方法
      function startRun() {
        createXMLHttpRequest(); //创建XMLHttpRequest对象
        clearBar(); //执行请求前先清除进度条
        xmlHttp.onreadystatechange = callBack;
        //指定onreadystatechange属性值，用于指定状态正常时的处理函数
        xmlHttp.open("GET", "/ProgressTest/servlet/ProcessServlet?flag=start", true);
        xmlHttp.send(null);
      }
      
      //开始进行进度条显示的处理函数
      function callBack() {
          //window.alert("callBack()");
        if(xmlHttp.readyState == 4) {
           if(xmlHttp.status == 200) { //status状态正常时
             setTimeout("aginRun()",1000);
            //每隔1000毫秒（1秒）执行一次“aginRun()”函数
           }
        }
      }

      //清除用于显示进度条的span的内容
      function clearBar() {
        for (var i=0;i<10;i++) { //根据span元素的id，分别清楚其显示内容
          var sp = document.getElementById("sp" + i);
          sp.innerHTML = clear; //首先清空span元素的内容
          sp.style.backgroundColor = "white"; //设置span元素的背景色
        }
      }
      //设置用于显示进度条的span元素的显示内容
      function aginRun() {
        createXMLHttpRequest(); //创建XMLHttpRequest对象
        xmlHttp.onreadystatechange = aginCallBack;
        //指定状态正常时的处理函数为“aginCallBack”
        document.getElementById("run").disabled=true; //设置按钮不可用
        xmlHttp.open("GET", "/ProgressTest/servlet/ProcessServlet?flag=run", true);
        //window.alert(" " + number);
        xmlHttp.send(null);
      }

      //进度条执行时的函数
      function aginCallBack() {
        if(xmlHttp.readyState==4) {
          if(xmlHttp.status==200) {
            var percent = 
            xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
           //记录当前完成比例
            var index = parseResult(percent); //解析结果集
            var nextCell = 1;
            for (var i=0; i<index; i++) { //遍历span元素集合，设置其内容（颜色与文字）
              var sp = document.getElementById("sp"+i);
            //根据每个span元素的id获取span对象
              sp.innerHTML= clear; //清空span元素内容
              sp.style.backgroundColor = bgcolor; //设置span元素的内容
              nextCell = i+1;
              if(nextCell>=index && nextCell<10) { //显示当前处理进度的百分比
                document.getElementById("sp"+nextCell).innerHTML=percent+"%";
              }
            }
            if(index<10) { //索引小于10，设置setTimeout方法
               setTimeout("aginRun()",1000);
            } else { //索引大于10，设置进度条成功完成的页面效果
               document.getElementById("result").innerHTML = "OK!";
               document.getElementById("run").disabled = false;
            }
          }
        }
      }

      //解析结果集
      function parseResult(result) {
        if(result.length<1) {
          return 1;
        } else if(result.length==2) {
          return result.substring(0,1);
        } else {
          return 10;
        }
      }
    </script>
    <title>Ajax进度条</title>
  </head>
  <body>
   <table align="center">
            <tr>
              <td>Ajax进度条示例   <input type="button" value="开始" id="run" οnclick="startRun();"/></td>
            </tr>
            <tr>
              <td>
              <div id="processBar" style="padding:1px;border:solid black 1px;">
               <span id="sp0">   </span>
               <span id="sp1">   </span>
               <span id="sp2">   </span>
               <span id="sp3">   </span>
               <span id="sp4">   </span>
               <span id="sp5">   </span>
               <span id="sp6">   </span>
               <span id="sp7">   </span>
               <span id="sp8">   </span>
               <span id="sp9">   </span>
              </div>
              </td>
            </tr>
            <tr><td align="center" id="result"></td> </tr>
    </table>
  </body>
</html>
y/archive/2012/05/24/2516627.html