web前端|js教程
Ajax,简单,实现
web前端-js教程
最近做项目遇到这样的需求要求当进行文件长传保存等操作时，能在页面显示一个带百分比的进度条，给用户一个好的交互体验，下面通过实例代码给大家介绍基于ajax实现带百分比进度条效果，需要的的朋友参考下吧，希望能帮助到大家。
仿空间源码,vscode设置单击打开文件,ubuntu 字符乱码,tomcat 数据配置,sqlite提升作用,网页设计配图,域名 空间服务器,pdf js显示插件,前端框架,爬虫怎么练,php 家教,刷seo优化工具,springboot 调试慢,好看的单页面网站模板免费下载,网页模板美食,汽车商城网站模板免费下载,网站后台数据库管理,wordpress菜单页面,学生管理系统html代码,论坛主程序lzw
需求：当进行文件长传保存等操作时，能在页面显示一个带百分比的进度条，给用户一个好的交互体验
jive 论坛源码,取消vscode自动跳行,ubuntu更改阿里,http和tomcat原理,爬虫自述,php ajax 框架,行业seo推广公司电话,游戏道具交易平台网站源码,html5商城源码模板lzw
实现步骤
微信公众号自定义回复源码,ubuntu如何关闭文件,tomcat8怎么卸干净,爬虫图鉴全集,linux运行php执行js,seo技术能力lzw
JSP页面
1.添加table标签
这个table标签要隐藏，进度条执行的时候再显示。id为tdOne和tdTwo分别为进度条的蓝色和灰色区域。
2.添加js代码
/**添加带百分比的进度条*/ var xmlHttp; //创建ajax引擎 function createXMLHttpRequest() { if (window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) {try { 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 = createCallback; 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 = updateCallback; xmlHttp.send(null); } function updateCallback() { if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) { //获取XML数据中的percent存放的百分比的值 var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data; 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 = "" + percentInt + ""; } //此时说明操作的业务方法已经执行完毕，session中的值已经被清空 else{//存放百分比res = "" + 100 + ""; } //定义ajax的返回结果是XML的形式 PrintWriter out = response.getWriter(); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); //存放结果数据，例如：88 out.println(""); out.println(res); out.println(""); out.close(); return null; }
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); } //线程结束，清空session request.getSession().removeAttribute("percent"); return "save"; }
注意：可以在复杂的业务中将代码段分成点，一个点的进度是占百分之多少，然后存放到Session中，然后通过ajax调用服务从Session中获取值，返回进度并显示即可。
效果
输入数据，点击【保存】时：
总结
带百分比的进度条，实际上是用ajax在保存中开启多个线程实现的：
一个线程，执行保存的操作:
1.将百分比计算出来，放到session中；
2.在线程结束的时候，将session清空。
另一个线程，从session中获取百分比的内容:
1.使用ajax将结果返回并显示在页面上
JavaScript实现进度条的几种方法介绍
JavaScript实现音频控制进度条
php和ajaxForm如何实现异步带进度条上传文件的实例
如果觉得《实例讲解Ajax实现简单带百分比进度条》对你有帮助，请点赞、收藏，并留下你的观点哦！
