在應用程序的安裝和下載過程中,進度條的使用已經是非常普遍了。進度條可以用來表識項目的完成進度,可以用百分比或數字表示,可以水平放置。利用Ajax技術創建進度條,功能顯得更加強大的快捷。
現在創建一個實例,以演示使用Ajax技術實現進度條。該實例同樣可以分為客戶端代碼和服務端代碼。
1,服務端代碼
服務端代碼主要實現一句客戶端的請求信息,返回相應的百分比數字。打開記事本,輸入下列代碼:
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> <%! int counter = 1;//注意:多用戶將共享此變量,此進度條只適合單用戶 %> <% String task = request.getParameter("task"); String res = ""; if (task.equals("create")) { res = "1"; 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++; res = "<percent>" + percent + "</percent>"; } // PrintWriter out = response.getWriter(); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); out.println("<response>"); out.println(res); out.println("</response>"); out.close(); %>
<html> <head> <title>JSP+Ajax 進度條</title> <script type="text/javascript"> var xmlHttp; var bar_color = 'blue'; var span_id = "yellow"; 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 = "ProgressBarJsp.jsp?task=create"; xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = goCallback; xmlHttp.send(null); } function goCallback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { setTimeout("pollServer()", 2000); } } } function pollServer() { createXMLHttpRequest(); var url = "ProgressBarJsp.jsp?task=poll"; 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()", 2000); } else { document.getElementById("complete").innerHTML = "網站已完成加載!"; } } } } 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; elem.style.backgroundColor = "white"; } } </script> </head> <body onload="go();"> <h1 align=center>網站正在加載中,請稍候</h1> <p> <table align="center"> <tbody> <tr><td> <div id="progressBar" style="padding:2px;border:solid yellow 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>
將上述代碼保存,名稱為JspprogressBar.html。在該文件中,JavaScript函數createXMLHttpRequest()主要用來創建XMLHttpRequest對象,go()函數完成想服務器端發送異步請求,該函數在網頁加載時被調用,其主要作用就是通知服務器,並在客戶端開始運行進度條。GoCallback()函數主要用於處理服務端的響應,並每隔2秒調用pollServer()函數也是用於向服務端發送異步請求,主要請求服務器端響應的百分數字。PollCallback()函數主要用於處理服務器端響應,即依據服務器端的返回的數字,指定進度條的顯示狀態。這裡需要注意的是,goCallback()函數只執行一次,而PollCallback()函數可以執行多次,其余的三個函數都是實現進度條的輔助函數。
3,運行
將上述兩個Jsp文件復制到JSP目錄下。運行效果圖如下: