分享用ajax实现带百分比进度条的实例教程
原创
 11:40:00
261
　　需求：当进行文件长传保存等操作时，能在页面显示一个带百分比的进度条，给用户一个好的交互体验实现步骤JSP页面1.添加table标签&table id=&load& width=&700& border=&0& align=&center& bgcolor=&#FAFAFA& cellpadding=&0& cellspacing=&0& bordercolor=&#000000& style=&border-collapse:display:none &&
&tr&&td&&br&&br&&table width=&100%& border=&1& cellspacing=&0& cellpadding=&0& bordercolor=&#287BCE& style=&border-collapse:collapse &&&tr bgcolor=&#F7F7F6&&
&td width=&20%& height=&100& valign=&middle&&
&table align='center' width='500'&
&td colspan='2' align='center' id=&progressPersent&&
&font size=&2&&正在进行保存，用时较长，请稍后...&/font&
&tr&&td id='tdOne' height='25' width=1 bgcolor=&blue&&&
&td id='tdTwo' height='25' width=500 bgColor='#;&&
&/tr&&/table&
&/td&&/tr&&/table&
&/tr&&/table&　　　这个table标签要隐藏，进度条执行的时候再显示。id为tdOne和tdTwo分别为进度条的蓝色和灰色区域。2.添加js代码/**添加带百分比的进度条*/var xmlH//创建ajax引擎function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject(&Msxml2.XMLHTTP&);
} catch (e1) {try {
xmlHttp = new ActiveXObject(&Microsoft.XMLHTTP&);
} catch (e2) {
function loading() {
createXMLHttpRequest();
clearLoad();var url = &elecCommonMsgAction_progressBar.do&;
xmlHttp.open(&GET&, url, true);
xmlHttp.onreadystatechange = createC
xmlHttp.send(null);
function createCallback() {if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {//每隔1秒钟执行一次percentServer()方法，直到当前访问结束setTimeout(&percentServer()&, 1000);
function percentServer() {
createXMLHttpRequest();var url = &elecCommonMsgAction_progressBar.do&;
xmlHttp.open(&GET&, url, true);
xmlHttp.onreadystatechange = updateC
xmlHttp.send(null);
function updateCallback() {if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {//获取XML数据中的percent存放的百分比的值var percent_complete = xmlHttp.responseXML.getElementsByTagName(&percent&)[0].firstChild.var tdOne = document.getElementById(&tdOne&);var progressPersent = document.getElementById(&progressPersent&);//改变蓝色区域的宽度tdOne.width = percent_complete + &%&;//将百分比的数值显示到页面上progressPersent.innerHTML = percent_complete + &%&;//如果计算获取的百分比的数值没有达到100，则继续调用方法，直到操作结束为止if (percent_complete & 100) {
setTimeout(&percentServer()&, 1000);
} function clearLoad() {
document.getElementById(&load&).style.display=&&;
document.getElementById(&opperate1&).style.display=&none&;
document.getElementById(&opperate2&).style.display=&none&;
}　　当点击保存时，执行loading()方法。 Action类progressBar()方法/**
* @throws Exception
* @Name: progressBar
* @Description: 在页面执行保存后，使用ajax，计算执行的百分比情况，将结果显示到页面上
* @Parameters: 无
* @Return: ajax如果不需要跳转页面，返回null或者NONE*/public String progressBar() throws Exception{//从session中获取操作方法中计算的百分比Double percent = (Double) request.getSession().getAttribute(&percent&);
String res = &&;//此时说明操作的业务方法仍然继续在执行if(percent!=null){//计算的小数，四舍五入取整int percentInt = (int) Math.rint(percent);
res = &&percent&& + percentInt + &&/percent&&;
}//此时说明操作的业务方法已经执行完毕，session中的值已经被清空else{//存放百分比res = &&percent&& + 100 + &&/percent&&;
}//定义ajax的返回结果是XML的形式PrintWriter out = response.getWriter();
response.setContentType(&text/xml&);
response.setHeader(&Cache-Control&, &no-cache&);//存放结果数据，例如：&response&&percent&88&/percent&&/response&out.println(&&response&&);
out.println(res);
out.println(&&/response&&);
out.close();
}save()方法/**
* @Name: save
* @Description: 保存表单数据到数据库
* @Parameters: 无
* @Return: String：重定向到system/actingIndex.jsp再查询*/public String save(){//模拟：循环保存150次，方便观察百分比变化for(int i=1;i&=150;i++){
elecCommonMsgService.saveCommonMsg(elecCommonMsg);//保存数据request.getSession().setAttribute(&percent&, (double)i/150*100);
}//线程结束，清空sessionrequest.getSession().removeAttribute(&percent&);return &save&;
}　　注意：可以在复杂的业务中将代码段分成点，一个点的进度是占百分之多少，然后存放到Session中，然后通过ajax调用服务从Session中获取值，返回进度并显示即可。 效果　　输入数据，点击【保存】时： 总结　　带百分比的进度条，实际上是用ajax在保存中开启多个线程实现的：一个线程，执行保存的操作:　　　　1.将百分比计算出来，放到session中；　　　　2.在线程结束的时候，将session清空。另一个线程，从session中获取百分比的内容:　　　　1.使用ajax将结果返回并显示在页面上以上就是分享用ajax实现带百分比进度条的实例教程的详细内容，更多请关注php中文网其它相关文章！
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
点击数(110163)
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
点击数(108017)
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
点击数(82945)
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
点击数(82189)
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
点击数(79349)
PHP开发工程师
文章总浏览数
相关视频章节404 Not Found
404 Not Found
nginx/1.14.0如何在JSP页面上显示进度条？？？
[问题点数：20分，结帖人CSDN]
本版专家分：50
结帖率 98.08%
CSDN今日推荐
本版专家分：8140
本版专家分：248
本版专家分：666
本版专家分：134
本版专家分：2686
本版专家分：4226
本版专家分：50
匿名用户不能发表回复！
其他相关推荐下次自动登录
现在的位置:
jsp+javascript进度条显示源码
游览器中打开status.jsp
文件start.jsp--------&% session.removeAttribute("task");%&//为了使每次开始都新建一个bean对象&jsp:useBean id = "task" scope = "session" class = "test.barBean.TaskBean"/&&%task.setRunning(true); %&&%new Thread(task).start();%&&jsp:forward page = "status.jsp"/&
文件stop.jsp---------&jsp:useBean id = "task" scope = "session" class = "test.barBean.TaskBean"/&&%task.setRunning(false);%&&jsp:forward page = "status.jsp"/&
文件status.jsp-----------&%@ page language="java" contentType = "text/charset = gb2312" import = "java.sql.*" errorPage = ""%&&jsp:useBean id = "task" scope = "session" class = "test.barBean.TaskBean"/&&html&
&title&JSP进度条&/title&
&%if(task.isRunning()){ %&
&script type="text/javascript"&
//设置页面刷新的时间
setTimeout("location = ''status.jsp''",1000);
&h1 align="center"&JSP进度条&/h1&
&h2 align="center"&
结果：&%= task.getResult() %&&br&
&%int percent = task.getPercent(); %&
&%=percent %&
&table width="60%" align="center" border="0" cellpadding="0" cellspacing="0"&
&%for(int i = 10;i&=i+=10){ %&
&td width="10%" bgcolor="#000080"&&&/td&
&%for(int i = 100;i&i-=10){ %&
&td width="10%" &&&/td&
&table width="100%" border="0" cellpadding="0" cellspacing="0"&
&td align="center"&
&%if(task.isRunning()){ %&
&%}else{ %&
&%if(task.isCompleted()) {%&
&%}else if(!task.isStarted()){ %&
&%}else{ %&
&td align="center"&&br&
&%if(task.isRunning()){ %&
&form action="stop.jsp" method="get"&
&input type = submit value = 停止&
&%}else{ %&
&form action="start.jsp" method="get"&
&input type = submit value = 开始&
【上篇】【下篇】&!DOCTYPE&html&PUBLIC&"-//W3C//DTD&XHTML&1.0&Transitional//EN"&"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&html&xmlns="http://www.w3.org/1999/xhtml"&&head&&&&&&meta&http-equiv="X-UA-Compatible"&content="IE=9"&/&&&&&&meta&http-equiv="Content-Type"&content="text/&charset=utf-8"&/&&&&&&title&页面加载进度条&/title&&&&&&script&src="js/jquery-1.4.2.min.js"&type="text/javascript"&&/script&&&&&&script&type="text/javascript"&&&&&&&&&var&etControl&=&{};&&&&&&&&etControl.process&=&function&(config)&{&&&&&&&&&&&&/*需要放在html中的body标签后面使用本控件*/&&&&&&&&&&&&var&count&=&0;&&&&&&&&&&&&var&id&=&"loading";&&&&&&&&&&&&var&el&=&"#"&+&&&&&&&&&&&&&$("body").append('&div&id="'&+&id&+&'"&&/div&');&&&&&&&&&&&&var&divTxt&=&"#"&+&id&+&"&div";&&&&&&&&&&&&$(el).html("&div&&/div&");&&&&&&&&&&&&$(el).attr("style",&"width:&100height:&12background:&#A0DB0E;padding:&5position:&left:&0;top:&0;font-size:12");&&&&&&&&&&&&$(divTxt).attr("style",&"width:&1height:&12background:&#F1FF4D;");&&&&&&&&&&&&/*更新进度条*/&&&&&&&&&&&&this.updateProcess&=&function&(percent)&{&&&&&&&&&&&&&&&&setTimeout(function&()&{&$(divTxt).animate({&width:&percent&+&"px"&}).text(percent&+&"%")&},&++count&*&500);&&&&&&&&&&&&&&&&if&(percent&==&100)&{&&&&&&&&&&&/*100%就从页面移除loading标签*/&&&&&&&&&&&&&&&&&&&&setTimeout(function&()&{&&&&&&&&&&&&&&&&&&&&&&&&$(el).hide(500);&&&&&&&&&&&&&&&&&&&&&&&&setTimeout(function&()&{&$(el).remove()&},&500);&&&&&&&&&&&&&&&&&&&&},&count&*&500&+&800);&&&&&&&&&&&&&&&&}&&&&&&&&&&&&};&&&&&&&&}&&&&&/script&&/head&&body&&/body&&script&type="text/javascript"&&&&&/*需要放在body标签后面，然后在适当的位置调用updateProcess方法*/&&&&var&p&=&new&etControl.process();&&&&p.updateProcess(34);&&&&p.updateProcess(57);&&&&p.updateProcess(62);&&&&p.updateProcess(90);&&&&p.updateProcess(100);&/script&&/html&
阅读(...) 评论()