需求：当进行文件长传保存等操作时，能在页面显示一个带百分比的进度条，给用户一个好的交互体验

实现步骤

JSP页面

1.添加桌子标签

表id=' load ' width=' 700 ' border=' 0 ' align=' center ' bgcolor=' # fafafafa '单元格填充=' 0 '单元格间距=' 0 ' border color=' # 000000 ' style=' border-collapse : collapse；显示：无' tr tdbrbr表格宽度=' 100% '边框=' 1 '单元格间距=' 0 '单元格填充=' 0 '边框颜色=' # 287 BCE '样式='边框-折叠：折叠' tr bgcolor=' # f7f 7 f 6 ' TD宽度=' 20% '高度=' 100 ' valign='中间'表格对齐='中心'宽度=' 500 ' tr TD colspan=' 2 '对齐='中心' id='正在进行保存，用时较长，请稍后./font/TD/tr TD id=' TDone '高度=' 25 '宽度=1 bgColor=' blue '/TD TD TD TD id=' TDtwo '高度=' 25 '宽度=500 bgColor=' # 999999 '/TD/tr/table/TD/tr/table这个桌子标签要隐藏，进度条执行的时候再显示身份证。为tdOne和tdTwo分别为进度条的蓝色和灰色区域。

2.添加射流研究…代码

/**添加带百分比的进度条*/var XMlhttp；//创建创建交互式、快速动态网页应用的网页开发技术引擎函数createXMLHttpRequest(){ if(window .XMLHttpRequest){ xmlHttp=new XMLHttpRequest()；} else if(窗口ActiveX对象){尝试{ XMlhttp=新的ActiveX对象(' Msxml 2 .XMLHTTP’)；} catch(E1){ try { xmlHttp=new ActiveX对象(' Microsoft .XMLHTTP’)；} catch (e2) { } } }函数加载(){ createXMLHttpRequest()；clearLoad()；var URL=' eleccommsgaaction _进度条。“做”；xmlHttp.open('GET '，url，true)；xmlhttp。onreadystatechange=createCallback；xmlhttp。发送(null)；}函数create callback(){ if(xmlhttp。readystate==4){ if(xmlhttp。status==200){//每隔一秒钟执行一次百分比服务器()方法，直到当前访问结束setTimeout('percentServer()'，1000)；} } }函数percentServer(){ createXMLHttpRequest()；var URL=' eleccommsgaaction _进度条。“做”；xmlHttp.open('GET '，url，true)；xmlhttp。onreadystatechange=updateCallback；xmlhttp。发送(null)；}函数update回调(){ if(xmlhttp。readystate==4){ if(xmlhttp。status==200){//获取可扩展置标语言数据中的百分比存放的百分比的值var _ percent _ complete=xmlhttp。回应。getelementsbytagname('百分比')[0]。第一个孩子。数据；var tdOne=文档。getelementbyid(' TDone ')；var progress persent=文档。getelementbyid(' progress persent ')；//改变蓝色区域的宽度tdone。width=percent _ complete " %//将百分比的数值显示到页面上进步来了。innerHTMl=percent _ complete " %//如果计算获取的百分比的数值没有达到100,则继续调用方法，直到操作结束为止if(percent _ complete 100){ setTimeout(' percentServer()'，1000)；} } } }函数clearLoad(){ document。getelementbyid(' load ')。风格。display=文件。getelementbyid(' opper et 1 ')。风格。显示='无'；文件。getelementbyid(' opper ate 2 ')。风格。显示='无'；}当点击保存时，执行正在加载()方法。

行动类

progressBar()方法

/* * * @ throwsexception * @ name : progress bar * @ description :保存页面后，使用ajax计算执行百分比。* @Parameters:不带* @Return: ajax如果不需要跳转到页面，则返回null或none */public string progress bar()throwsexception {//从会话中获取在操作方法中计算的百分比。双倍百分比=(双倍)请求。getsession()。getattribute('百分比')；字符串res=//此时，解释操作的业务方法继续执行if(percent！=null){ //计算出的小数，四舍五入到最接近的整数int百分比int=(int)数学。rint(百分比)；RES=' percent ' percent int '/percent '；}//此时该操作的业务方法已经执行，会话中的值已经清零。else{ //存储百分比RES=' percent ' 100 '/percent '；}//定义ajax的返回结果是XML的形式。print writer out=response . getwriter()；response . SetContentType(' text/XML ')；response.setHeader('缓存控制'，'无缓存')；//存储结果数据，例如：response percent 88/percent/response out . println(' response ')；out . println(RES)；out . println('/response ')；out . close()；返回null}save()方法

/* * * @ name : save * @ description :将表单数据保存到数据库* @ Parameters:没有* @Return: String:重定向到system/actingIndex.jsp再次查询*/public String save(){//simulation:循环保存150次，便于观察(int I=1；i=150I){ eleccommsgservice . saveconommsg(eleccommsg)；//保存数据请求. getsession()。setattribute ('percent '，(double)I/150 * 100)；}//当线程结束时，清除sessionrequest.getsession()。removeattribute('百分比')；返回“保存”；}注意：复杂业务中可以将代码段分成点，每个点的进度是多少百分比，然后存储在Session中，然后由ajax调用服务从Session中获取值，返回并显示进度。

影响

输入数据，点击[保存]:

摘要

带有百分比的进度条实际上是通过在使用ajax保存时打开多个线程来实现的：

执行保存的操作的线程：

1.计算百分比并将其置于会话中；

2.在线程结束时，清除会话。

另一个线程从会话中获取百分比内容：

1.使用ajax返回并在页面上显示结果

上面是一个简单的例子，百分比进度条由边肖介绍。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！