对网上的错误代码进行修改
一、 jsp文件progressBarJsp.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
int counter = 1;
Object obj=session.getAttribute("counter");
if(obj!=null)counter=Integer.parseInt(obj.toString());
String task = request.getParameter("task");
String res ="";
if (task.equals("create")) {
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.flush();
session.setAttribute("counter",counter);
%>
二、发出Ajax请求的html文件JspprogressBar.html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>Insert title here</title>
<script type="text/javascript">
var xmlHttp;
var bar_color = 'blue';
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 = "progressBarJsp.jsp?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 = "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.style.value="background-color:blue;";
elem.innerHTML = clear;
elem.style.background = 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 = "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.backgroundColor = "white";
}
}
</script>
</head>
<body>
<h1>JSP+Ajax 进度条实例2</h1>
开始一个长时间运行的任务:
<input type="button" value="开始" id="go" onclick="go();" />
<p>
<table align="center">
<tbody>
<tr>
<td>
<div id="progressBar"
style="cpadding: 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>
分享到：
相关推荐
**JSP+Ajax 进度条** 在Web开发中，为用户提供实时的进度反馈是非常重要的，尤其是在执行耗时操作如文件上传、数据处理等场景。JSP（JavaServer Pages）和Ajax（Asynchronous JavaScript and XML）结合使用可以实现...
本项目"java,jsp,ajax进度条（jsp）"结合了这三种技术，旨在实现一个功能强大的进度条，用于监控大文件的上传或下载过程，提升用户体验。 首先，让我们深入理解这三个技术的基础概念： 1. **Java**：Java是一种跨...
汉化了一个国外的开源插件， myPagination+XML+PHP(JSP) 大家看看吧，喜欢的就下载，仅供交流，源代码用的是 LinApex 写的 myPaginationV4.0 他整理的比较乱，我重新完善了一下供大家下载。
- 在Ajax请求和JSP处理过程中，都需要考虑错误处理，例如文件过大、格式不正确、服务器存储空间不足等情况。 实现这种功能时，还需要关注跨域问题、文件大小限制、安全问题（如防止文件覆盖、XSS攻击等）。同时，...
现在让我们来讨论如何在JSP中集成AJAX实现进度条效果： 1. **HTML/JavaScript**：首先，在客户端，我们需要一个HTML元素作为进度条的容器，比如一个div。然后，用JavaScript（通常使用jQuery库来简化操作）监听用户...
《JSP+Dreamweaver CS4+CSS+Ajax动态网站开发典型案例》光盘 完整源代码 有3个完整的jsp网站 第1章 设计Web标准网页 1.1 设个人主页 1.2 设计CSS 1.3 设计新闻查看页面 1.4 设计博客网站首页 1.5 CSS设计页面布局 ...
"jsp中使用ajax实现web进度条"这个主题就是关于如何在Java Server Pages (JSP)中利用Asynchronous JavaScript and XML (AJAX)技术来创建一个动态显示文件上传进度的组件。下面将详细介绍这一过程中的关键知识点。 1...
【JSP+Ajax简单点播系统详解】 在Web开发领域，JSP（JavaServer Pages）与Ajax（Asynchronous JavaScript and XML）的结合被广泛应用于构建交互性强、用户体验良好的应用程序。本项目“jsp+ajax简单的点播系统”...
在JSP页面中，我们可以使用JavaScript或者jQuery来动态更新进度条的样式。当从服务器接收到新的进度数据时，JavaScript会修改进度条子`div`的宽度，从而实时反映进度。例如，可以使用`AJAX`异步请求获取服务器上的...
"Ajax+jsp实现上传进度条"是一个典型的提升用户体验的技术方案。Ajax（Asynchronous JavaScript and XML）和JSP（JavaServer Pages）结合使用，可以创建出无刷新、动态更新的网页，其中上传进度条功能就是一种常见且...
在本文中，我们将深入探讨如何使用JSP和jQuery实现一个简单的单选文件上传功能，并结合进度条显示上传进度。这是一个前端部分的实现，而后端部分需要根据实际项目需求自行完成。 首先，我们要明白JSP（JavaServer ...
在IT行业中，实现文件上传并显示进度条是常见的需求，特别是在Web应用中。这个主题“java+ajax上传文件带进度条”聚焦于使用Java后端和Ajax前端技术来完成这一功能。下面将详细介绍如何实现这一功能，以及涉及的关键...
### 使用SSH+Ajax实现上传进度条的技术解析 #### 一、技术背景介绍 在Web开发领域，用户上传大文件时的体验优化一直是重要的研究方向之一。传统的文件上传方式往往缺乏实时反馈机制，使得用户在上传过程中无法获知...
总之，结合Struts和Ajax实现的上传进度条，可以让用户在文件上传过程中得到实时反馈，提升用户体验。关键在于正确配置Struts的文件上传拦截器，以及在前端利用Ajax事件监听并更新进度条。通过DemoUpload提供的示例，...
在这个场景中，我们看到的"网页文件上传带文件上传信息(JSP+Ajax)"是指使用Java Server Pages (JSP)和Asynchronous JavaScript and XML (Ajax)技术来实现文件上传并实时反馈上传状态的过程。下面将详细介绍这一技术...
【标题】"ajax+jsp上传程序加进度条.zip"是一个基于AJAX技术与JSP（JavaServer Pages）的文件上传程序，它包含了实现文件上传功能的详细源代码。该程序的特点在于提供了一个友好的用户体验，即在上传过程中显示...
在JSP中实现进度条，我们可以利用AJAX（Asynchronous JavaScript and XML）进行异步通信，使得页面在不刷新的情况下与服务器交换数据。通常，我们会有一个后台服务或Servlet处理任务并更新进度，而JSP则负责显示这个...
在这个“Struts2+上传进度条完美运行”的主题中，我们将深入探讨如何在Struts2框架下实现文件上传功能，并结合进度条展示上传进度，提供用户友好的交互体验。 1. **Struts2文件上传**： Struts2通过`struts2-core`...
5. **后端JSP处理**：在服务器端，JSP页面接收到Ajax请求后，需要处理分块数据，通常会创建一个临时文件或内存中的缓冲区来存储分块。当所有分块都上传完毕后，再将它们合并成完整的文件。这里需要注意文件的命名、...
"JSP文件上传 支持进度条显示"这个项目是针对JSP环境设计的一个AJAX Web上传程序，它允许用户上传大文件（如单个文件100M），并具有文件上传进度条的可视化功能。以下将详细解析这个项目的知识点： 1. **JSP（Java...