文件一览
- progressBar.html
- ProgressBarServlet.java
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 Progress Bar</title>
<script type="text/javascript">
var xmlHttp;
var key;
var bar_color = 'gray';
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 = "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()",2000);
}
}
}
function pollServer() {
createXMLHttpRequest();
var url = "ProgressBarServlet?task=poll&key="+key;
var button = document.getElementById("go");
button.disabled = true;
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="Complete!";
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;
elem.style.background = "white";
}
}
</script>
</head>
<body>
<h1>Ajax Progress Bar Example</h1>
Launch long-running process:
<input type="button" value="Launch" id="go" onclick="go();" />
<br/>
<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>
ProgressBarServlet.java
package ajaxbook.chap4;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ProgressBarServlet extends HttpServlet {
private int counter = 1;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String task = req.getParameter("task");
String res = "";
if (task.equals("create")) {
res = "<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++;
res = "<percent>"+percent+"</percent>";
}
PrintWriter out = resp.getWriter();
resp.setContentType("text/xml");
resp.setHeader("Cache-Control", "no-cache");
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();
}
}
运行效果如下图
- 大小: 33.3 KB
分享到:
相关推荐
该示例使用简单,完成插入指定数量的数据,ajax写入数据库,并显示精准进度,实时返回运行过程。对于大量插入数据库的操作,可以做到无刷,不超时; 目录结构: Css/style.css -------------进度条样式 Js/...
用Ajax实现文件上传功能,上传过程可以显示进度条。。
asp.net2.0+ajax开发的文件上传并显示进度条
实现上传文件时显示进度条的功能。当上传文件时,客户端同时显示文件上传的进度,从而及时了解文件传送情况。 源码结构说明 1.FileUpload文件夹下为源文件 2.FileUpload.war为部署文件 已经试过运行正常
spring+velocity+ajax带进度条上传文件,上传显示文件的状态。
Ajax实现文件上传进度条,Ajax实现文件上传进度条Ajax实现文件上传进度条Ajax实现文件上传进度条Ajax实现文件上传进度条。
使用Ext进度条界面,vs2005+Ajax异步轮询,真正显示服务器的进度。
jsp中使用ajax实现web进度条
在asp.net下显示进度条,在查询数据等操作时,自动加载进度条,提高用户体验.zip
在进行Ajax调用过程中一般都具有这样的做法:显示一个GIF图片动画表明后台正在工作,同时阻止用户操作本页面(比如Ajax请求通过某个按钮触发,用户不能频繁点击该按钮产生多个并发Ajax请求);调用完成后,图片消失...
网页中载入文件并显示进度条代码,运用了JavaScript技术和Flash技术相结合,在获取文件的时候显示进度条,并非上传文件的进度条。
AJAX 图片上传 进度条 无刷新 AJAX上传图片,并显示上传进度条
java使用ajax多文件上传,并显示上传进度条和上传速度
用ajax实现的文件上传并显示进度条 解压后,直接可以运行
Ajax + Servlet 实现上传文件进度条显示
当用户由页面请求服务器太久时,如果任由页面显示为空白,显得不够人性化, 而且在执行改请求的过程中,应该给予提示,防止用户执行其他操作
异步上传文件,同时显示进度条。。界面的话,在fireFox 下面没有问题
jsp|ajax+fileupload多文件上传逐一显示进度条 演示视频
jquery+ajax实现异步上传文件显示进度条
ajax + asp无刷新文件异步上传程序,并有进度条实时显示上传进度!ajax + asp无刷新文件异步上传程序,并有进度条实时显示上传进度!ajax + asp无刷新文件异步上传程序,并有进度条实时显示上传进度!ajax + asp无...