Ajax+PHP实现的进度条--实例

浏览数：25 / 时间：2015年06月09日

之前重点学习PHP，所以javascript、Ajax都比较弱一点。现在也开始补课了，今天实现了一个进度条的例子，感觉Ajax实现动态页面真的很厉害，并没有想象中的那么难理解。

进度条作为反应实时传输数据进度的状态，能够灵活运用还是很重要的。

在进度条实现中，我们只需要实时修改进度条style中的width属性就可以反应传输数据的情况。当然width的值直接与 proportion=已传输的数据量/总数据量挂钩。而proportion就是服务器返回给客户端的一个比例值，计算过程可以在服务器端完成。

下面我们来看代码，

客户端 progress.html：

<html>
  <head>
    <meta charset="gb2312">
    <title>进度条测试</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen">
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
    <script src="js/bootstrap.js"></script> 
    <script src="js/bootstrap.min.js"></script>
   
    <script type="text/javascript" language="javaScript">
     var t;
     var xmlHttp = false; //全局变量，用于记录XMLHttpRequest对象
     //创建XMLHttpRequest对象的方法,支持多浏览器
     function createXMLHttpRequest() { 
       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();
      xmlHttp.onreadystatechange = aginCallBack;
      document.getElementById("run").disabled=true; //设置按钮不可用
      var url = "http://localhost:8033/test1/progress/progress.php";
      xmlHttp.open("GET",url,true);
      xmlHttp.send(null);      
     }
     
     //进度条执行函数
     function aginCallBack() {
      if(xmlHttp.readyState == 4){
          if(xmlHttp.status == 200) { //status状态正常时              
              var response = xmlHttp.responseText;      //将服务器返回的值赋予response
              //alert("xmlHttp.responseText="+response);
              document.getElementById("progress-bar").style.width = response+‘%‘;    //将得到的值+‘%’号，然后赋值与进度条style的width属性
              if(response <=100){   //应为进度条的最大值也就是100%,所以返回值不能大于10,如果大于100则不再请求,当然服务端返回的值最大也为100
                  t = setTimeout("startRun()",1000);   //每隔一秒钟就调用一次startRun()函数
              }else{
                  document.getElementById("txt").style.visibility = "visible";
                  document.getElementById("txt").value = "100%完成更新";
              }
          }
      }           
     }
    </script>

    </head>
<body>
  <div id="jdt" style="width:400px;heigh:50px;margin:auto;margin-top:100px;">
    <input type="button" id="run" value="更新" onclick="startRun();"></input>
    <!--  <input type="text" id="txt" value="无值"></input> -->
    <div class="progress">
      <div id="progress-bar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
      </div>
    </div>
    <input type="text" id="txt" value="" style="visibility:hidden;"></input>
  </div>
</body>
</html>

服务器端我只是使用时间变化来完成返回数据的增加，使进度条能够动态走动。

服务器端 progress.php

<?php 
        //text.txt文件只用于我记录初始时间
       $txt = file_get_contents("text.txt");
       $timeone = date("i:s",time());
       $timenow = getdate();  
    
       if ($txt == "") {  //如果text.txt文件空，则将当前时间记录下
           file_put_contents("text.txt", $timeone);
           echo 0;    //并向客户端返回0，也就是进度条为0%
           
       }else{
           
           $arrtxt = explode(":", $txt);           
           
           $value1 = $arrtxt[0]*60+$arrtxt[1];    
           $value2 = $timenow["minutes"]*60+$timenow["seconds"];
           $proportion = $value2-$value1;   //得到时间差，相当于已完成传输多少数据
           
           if ($proportion >100){     //如果时间差大于100，则清空text.txt文档。防止返回给客户端的值大于100
               file_put_contents("text.txt","");
           }
           echo $proportion;  //返回给客户端的值
       }
?>