之前重點學習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實現進度條的例子。
謝謝！