实现进度条（JSP代码

最新推荐文章于 2024-04-22 14:06:39 发布

Love_9

最新推荐文章于 2024-04-22 14:06:39 发布

阅读量1.3k

点赞数

分类专栏：进度条文章标签： jsp xmlhttprequest 服务器 function string url

进度条专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现进度条

在应用程序的安装或下载过程中，进度条的使用已是非常普遍了。进度条可以用来标识项目的完成进度，可以用百分比或数字表示，可以水平放置也可以垂直放置。利用Ajax技术创建进度条，功能显得的更加强大和快捷。

现在创建一个案例，演示使用Ajax技术实现进度条。该案例同样可以分为客户端代码和服务器端代码。

1．服务器端代码

服务器端代码主要实现依据客户端的请求信息，返回相应百分比数字。打开记事本，输入下列代码：

案例10-5

<%@ 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>";
}
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();     
%>

将上述代码保存，名称为ProgressBarJsp.jsp。在该文件中，声明了一个变量counter，并赋值为1，该变量是进度条返回百分比数字的依据。在下面使用request对象获取客户端传送的变量task的值，如果该值为“create”，表示需要重新创建进度条，并设定counter的值为1。如果task不是create，则会依据counter的值返回百分比数字，完成一次操作，counter值加1。

2．客户端代码

本案例的客户端代码主要实现依据返回百分比数字显示进度条的状态。打开记事本，输入下列代码：

案例10-5

<html>
<head>
<title>JSP+Ajax 进度条</title>
<script type="text/javascript">
var xmlHttp;
var bar_color = 'blue';
var span_id = "yellow";
var clear = "&nbsp;&nbsp;&nbsp;"
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 οnlοad="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">&nbsp;&nbsp;&nbsp;</span>
<span id="block2">&nbsp;&nbsp;&nbsp;</span>
<span id="block3">&nbsp;&nbsp;&nbsp;</span>
<span id="block4">&nbsp;&nbsp;&nbsp;</span>
<span id="block5">&nbsp;&nbsp;&nbsp;</span>
<span id="block6">&nbsp;&nbsp;&nbsp;</span>
<span id="block7">&nbsp;&nbsp;&nbsp;</span>
<span id="block8">&nbsp;&nbsp;&nbsp;</span>
<span id="block9">&nbsp;&nbsp;&nbsp;</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()函数。pollServer()函数也是向服务器端发送异步请求，主要请求服务器端响应的百分比数字。pollCallback()函数主要处理服务器端响应，即依据服务器端的返回数字，指定进度条的显示状态。这里需要注意的是，goCallback()函数只执行一次，而pollCallback()函数可以执行多次。其余的三个函数都是实现进度条的辅助函数。

3．运行

将上述两个JSP文件复制到JSP目录下。打开IE浏览器，在地址栏中输入http://localhost:8080/JSP/JspprogressBar.html，单击【转到】，会显示如图10-7所示窗口。程序执行完毕后，会显示如图10-8所示窗口：

图10-7 进度条执行显示

图10-8 进度条执行完毕显示窗口

Love_9

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现进度条（JSP代码

实现进度条在应用程序的安装或下载过程中，进度条的使用已是非常普遍了。进度条可以用来标识项目的完成进度，可以用百分比或数字表示，可以水平放置也可以垂直放置。利用Ajax技术创建进度条，功能显得的更加强大和快捷。现在创建一个案例，演示使用Ajax技术实现进度条。该案例同样可以分为客户端代码和服务器端代码。1．服务器端代码服务器端代码主要实现依据客户端的请求信息，返回相应百分比数字。打开
复制链接

扫一扫