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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

之前重点学习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;  //返回给客户端的值

       }

?>

这是一个简单的Ajax+PHP实现进度条的例子。

谢谢！