之前重点学习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="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="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实现进度条的例子。
谢谢！