這篇文章主要介紹了使用AJAX實(shí)現(xiàn)Web頁面進(jìn)度條的實(shí)例分享,利用AJAX的異步來顯示服務(wù)器端的處理進(jìn)度是當(dāng)下比較流行的做法,需要的朋友可以參考下
在應(yīng)用程序的安裝和下載過程中，進(jìn)度條的使用已經(jīng)是非常普遍了。進(jìn)度條可以用來表識項(xiàng)目的完成進(jìn)度，可以用百分比或數(shù)字表示，可以水平放置。利用Ajax技術(shù)創(chuàng)建進(jìn)度條，功能顯得更加強(qiáng)大的快捷。
現(xiàn)在創(chuàng)建一個(gè)實(shí)例，以演示使用Ajax技術(shù)實(shí)現(xiàn)進(jìn)度條。該實(shí)例同樣可以分為客戶端代碼和服務(wù)端代碼。
1，服務(wù)端代碼
服務(wù)端代碼主要實(shí)現(xiàn)一句客戶端的請求信息，返回相應(yīng)的百分比數(shù)字。打開記事本，輸入下列代碼：
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<%!
int counter = 1;//注意：多用戶將共享此變量，此進(jìn)度條只適合單用戶
%>
<%
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();
%>
將上述代碼保存，名稱為ProgressBar.jsp。在該文件中，聲明了一個(gè)變量counter，并賦值為1，該變量是進(jìn)度條返回百分比數(shù)字的依據(jù)。在下面使用request對象獲取客戶端傳送的變量task的值，如果該值為create，表示需要重新創(chuàng)建進(jìn)度條，并設(shè)定counter的值為1；如果task不是create，則會依據(jù)counter的值返回百分比數(shù)字，完成一次操作，counter值加1。
2，客戶端代碼
本實(shí)例的客戶端代碼主要實(shí)現(xiàn)依據(jù)返回百分比數(shù)字顯示進(jìn)度條的狀態(tài)。打開記事本，輸入下列代碼：
<html>
<head>
<title>JSP+Ajax 進(jìn)度條</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 = "網(wǎng)站已完成加載!";
}
}
}
}
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>網(wǎng)站正在加載中，請稍候</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函數(shù)createXMLHttpRequest()主要用來創(chuàng)建XMLHttpRequest對象，go()函數(shù)完成想服務(wù)器端發(fā)送異步請求，該函數(shù)在網(wǎng)頁加載時(shí)被調(diào)用，其主要作用就是通知服務(wù)器，并在客戶端開始運(yùn)行進(jìn)度條。GoCallback()函數(shù)主要用于處理服務(wù)端的響應(yīng)，并每隔2秒調(diào)用pollServer()函數(shù)也是用于向服務(wù)端發(fā)送異步請求，主要請求服務(wù)器端響應(yīng)的百分?jǐn)?shù)字。PollCallback()函數(shù)主要用于處理服務(wù)器端響應(yīng)，即依據(jù)服務(wù)器端的返回的數(shù)字，指定進(jìn)度條的顯示狀態(tài)。這里需要注意的是，goCallback()函數(shù)只執(zhí)行一次，而PollCallback()函數(shù)可以執(zhí)行多次，其余的三個(gè)函數(shù)都是實(shí)現(xiàn)進(jìn)度條的輔助函數(shù)。
3，運(yùn)行
將上述兩個(gè)Jsp文件復(fù)制到JSP目錄下。運(yùn)行效果圖如下：
公眾號
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試