截圖效果：
視訊效果：
在進度條中，每一個格子都是一個對象，通過控制每個對象的背景色來模拟任務完成的進度。通過定期向伺服器端發送請求來獲得一個改變值的參數，其實也許可以在用戶端進行這樣一個工作，有待嘗試。
靜态頁面：progressBar.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ajax進度條執行個體</title> <script type="text/javascript"> var xmlHttp; var key; var bar_color="green";//設定進度條顔色 var span_id="block"; var clear=" " function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); } } function go(){ createXMLHttpRequest(); checkDiv(); var url="servlet/ProgressBarServlet?task=create"; var button=document.getElementById("go"); button.disabled=true; xmlHttp.open("GET",url,true); xmlHttp.onreadystatechange=goCallback; xmlHttp.send(null); } function goCallback(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ setTimeout("pollServer()",1000); } } } function pollServer(){ createXMLHttpRequest(); var url="servlet/ProgressBarServlet?task=poll&key="+key; xmlHttp.open("GET",url,true); xmlHttp.onreadystatechange=pollCallback; xmlHttp.send(null); } function pollCallback(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ var percent_complete=xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data; var index=processResult(percent_complete); for(var i=1;i<=index;i++){ var elem=document.getElementById("block"+i); elem.innerHTML=clear; elem.style.backgroundColor=bar_color; var next_cell=i+1; if(next_cell>index&&next_cell<=9){ document.getElementById("block"+next_cell).innerHTML =percent_complete+"%"; } } if(index<9){ setTimeout("pollServer()",1000); }else{ document.getElementById("complete").innerHTML="加載完成!"; document.getElementById("go").disabled=false; } } } } function processResult(percent_complete){ var ind; if(percent_complete.length==1){ ind=1; }else if(percent_complete.length==2){ ind=percent_complete.substring(0,1); }else{ ind=9; } return ind; } function checkDiv(){ var progress_bar=document.getElementById("progressBar"); if(progress_bar.style.visibility=="visible"){ clearBar(); document.getElementById("complete").innerHTML=""; }else{ progress_bar.style.visibility="visible"; } } function clearBar(){ for(var i=1;i<10;i++){ var elem=document.getElementById("block"+i); elem.innerHTML=clear;//clear的初始值為三個空格 elem.style.backgroundColor="#CCFFFF"; } } </script> </head> <body bgcolor="#CCFFFF"> <h1>Ajax 進度條示例</h1> 加載進度條: <input type="button" value="開始加載" id="go" οnclick="go();"/> <p/> <table align="center"> <tbody> <tr><td> <div id="progressBar" style="padding:2px;border:solid black 2px;visibility:hidden"> <span id="block1"> </span> <span id="block2"> </span> <span id="block3"> </span> <span id="block4"> </span> <span id="block5"> </span> <span id="block6"> </span> <span id="block7"> </span> <span id="block8"> </span> <span id="block9"> </span> </div> </td></tr> <tr><td align="center" id="complete"></td></tr> </tbody> </table> </body> </html>
伺服器端Servlet：ProgressBarServlet.java
package servlet;
import java.io.*; import javax.servlet.*; import javax.servlet.http.*;
public class ProgressBarServlet extends HttpServlet {
private int counter=1; public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { String task=req.getParameter("task"); String res1=""; if(task.equals("create")){ res1="<key>1</key>"; counter=1; }else{ String percent=""; switch(counter){ case 1: percent="10";break; case 2: percent="23";break; case 3: percent="35";break; case 4: percent="51";break; case 5: percent="64";break; case 6: percent="73";break; case 7: percent="89";break; case 8: percent="100";break; } counter++; res1="<percent>"+percent+"</percent>"; } PrintWriter out = res.getWriter(); res.setContentType("text/xml"); res.setHeader("Cache-Control", "no-cache"); out.println("<response>"); out.println(res1); out.println("</response>"); out.close(); }
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response); }
}
![為JSON 資料加入斜杠 \[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)