jsp和ajax实现java类中的方法执行的进度条-例子

最新推荐文章于 2023-10-11 13:47:04 发布
最新推荐文章于 2023-10-11 13:47:04 发布
阅读量861 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15371841/article/details/76585826
版权
在一个项目中，需要在后台把某个目录下的文件信息写入数据库（初始化文件）。当文件数量太多时，等待时间较长。因此需用ajax技术做一个显示处理进度的进度条。
 
进度条显示页面before_initiallize.jsp：

  <script type="text/javascript">
        var xmlHttp;
        //var key;
        var startSeconds = new Date().getSeconds();//
        //ajax第一步：创建XMLHttpRequest
        function createXMLHttpRequest(){
            if (window.ActiveXObject){
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest){
                xmlHttp = new XMLHttpRequest();               
            }
        }
  //首先执行的函数：准备ajax交互
        function go(){
            createXMLHttpRequest();
            clearBar();
            var url = "actObjInfoAction.do?method=initiallize&task=create";//要用不同的参数来控制后台的处理
            //var button = document.getElementByIdx("go");
            //button.disabled = true;
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = goCallback;//当状态改变时调用的函数：goCallBack
            xmlHttp.send(null);
        }
  //向服务端发送create参数后，被指定用来处理onreadystatechange事件的函数
        function goCallback(){
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    //setTimeout("pollServer()", 0);//为pollServer函数设置延时：2000毫秒
     pollServer();
                }
            }
        }
        //与服务端交互：
        function pollServer() {
            createXMLHttpRequest();
            var url = "actObjInfoAction.do?method=initiallize&task=poll";//要用不同的参数来控制后台的处理
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = pollCallback;
            xmlHttp.send(null);
        }
        //与服务端交互开始后，被指定用来处理onreadystatechange事件的函数
        function pollCallback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    var percent_complete = xmlHttp.responseXML.getElementsByTagName_r("percent")[0].firstChild.data;

                    var progress = document.getElementByIdx("progress");
                    var progressPersent = document.getElementByIdx("progressPersent");
     progress.width = percent_complete + "%";
     progressPersent.innerHTML = percent_complete + "%";
                    if (percent_complete < 100) {
                        //setTimeout("pollServer()", 0);//2000
      pollServer();
                    } else {
                     var endSeconds = new Date().getSeconds();//
                     var during = endSeconds - startSeconds;
                        document.getElementByIdx("complete").innerHTML = "初始化完成！花费 ";
                        document.getElementByIdx("complete").innerHTML += during;
                        document.getElementByIdx("complete").innerHTML += " 秒";
                        
                        //document.getElementByIdx("go").disabled = false;
                    }
                }
            }
        }
  //一开始显示文字提示：
 function clearBar() {
   var progress_bar = document.getElementByIdx("progressBar");
   var progressPersent = document.getElementByIdx("progressPersent");
   var complete = document.getElementByIdx("complete");
   progress_bar.style.visibility = "visible"
   progressPersent.innerHTML = " ";
   complete.innerHTML = "正在初始化，请稍等...";
 }
    </script>

 </head>
 <LINK href="include/css/windows.css" type=text/css rel=stylesheet>
 <link href="include/css/futuretable.css" type="text/css" rel="stylesheet">

 <body class="contentbodymargin" onLoad="go()">
  <div id="contentborder">
   <div id="progressBar" style="padding:0px;border:solid black 0px; visibility:hidden">
    <table width="300" border="0" cellspacing="0" cellpadding="0" align="center">
     <tr>
      <td align="center" id="progressPersent"></td>
     </tr>
     <tr>
      <td>
       <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000">
        <tr>
         <td>
          <table width="0%" border="0" cellspacing="0" cellpadding="0" id="progress">
           <tr bgcolor="#0099FF"><td></td></tr>
          </table>
         </td>
        </tr>
       </table>
      </td>
     </tr>
     <tr>
      <td align="center" id="complete">
       完成
      </td>
     </tr>
    </table>
   </div>
<!--input id = "go" name="run" type="button" value="run" onClick="go();"-->
  </div>
  
 </body>

 后台处理java文件：

 public ActionForward initiallize(ActionMapping mapping,
   ActionForm actionForm, HttpServletRequest request,
   HttpServletResponse response) {
  ActObjManager aom = (ActObjManager) getBean("actObjManager");
  String rootPath = request.getRealPath("dirfiles");
  File baseDir = new File(rootPath);
  List files = FileOperate.getSubFiles(baseDir);// 得到目录中包括的所有文件（不包括空目录）
  
  // ajax进度条相关：
  String task = request.getParameter("task");
  String res = "0";
  int totalFileNum = files.size();// 需初始化的总共文件数，可用来做前期的准备工作

  if (task.equals("create"))//这个if块内只执行一次
  {
   res = "1";
   counter = 1;//不清楚这个语句的作用。但这里写成0的话页面会报JS错误
   
   // 首先删除actobj中所有记录：
   List actobjs = aom.getActObjs();
   for (int i = 0; i < actobjs.size(); i++) {
    ActObj actobj = (ActObj) actobjs.get(i);
    aom.delActObj(actobj.getObjid());
   }
  }
  else//主要的处理写在这个else块内。注意：不要循环，因为这个块会被多次调用
  {
   String percent = "";
   //开始初始化文件：
   if ( counter < totalFileNum )//开始初始化文件。防止下标越界
    initiallizeFile(request,response,files,counter-1);//初始化文件的函数。因为counter是从1开始，所以这里要-1
   
   percent = String.valueOf((int) (counter * 100) / totalFileNum);
   counter++;
   res = "" + percent + "";
  }
  try {
   PrintWriter out = response.getWriter();
   response.setContentType("text/xml");
   response.setHeader("Cache-Control", "no-cache");
   out.println("");
   out.println(res);
   out.println("");
   out.close();
  } catch (Exception e) {
   e.printStackTrace();
  }
  return null;

 }

最后的效果图如下：

jsp+ajax进度条一例

高山流水，宁静致远
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java jsp ajax实现上传文件进度条(详细代码和文档)
09-22
要实现进度条的显示,就要知道两个参数，上传的大小和总文件的大小 重写的解析器提供了一个上传过程事件，在上传过程中不断触发，然后用已上传的大 小/总大小,计算上传的百分比,然后将此数据缓存起来，前端发送异步...
JSP进度条设计实例
Jimcs
08-02 1096
　　许多Web应用、企业应用涉及到长时间的操作，例如复杂的数据库查询或繁重的XML处理等，虽然这些任务主要由数据库系统或中间件完成，但任务执行的结果仍旧要借助JSP才能发送给用户。本文介绍了一种通过改进前端表现层来改善用户感觉、减轻服务器负载的办法。 　　当JSP调用一个必须长时间运行的操作，且该操作的结果不能（在服务器端）缓冲，用户每次请求该页面时都必须长时间等待。很多时候，用户会失去耐心，接着
jsp进度条
03-17 8977
 开始页面:start.jsp状态页面:status.jsp    JSP进度条            setTimeout("location=status.jsp", 1000);      JSP进度条      结果:         %           CELLPADDING=0 CELL
JSP进度条实例（上）
ray_1981的专栏
09-10 1695
    许多Web应用、企业应用涉及到长时间的操作，例如复杂的数据库查询或繁重的XML处理等，虽然这些任务主要由数据库系统或中间件完成，但任务执行的结果仍旧要借助JSP才能发送给用户。本文介绍了一种通过改进前端表现层来改善用户感觉、减轻服务器负载的办法。 　当JSP调用一个必须长时间运行的操作，且该操作的结果不能（在服务器端）缓冲，用户每次请求该页面时都必须长时间等待。很多时候，用户会失去耐心
使用js实现进度条效果
xiaocantongxue的博客
08-29 427
【代码】使用js实现进度条效果。
java进度条如何设计,JSP编程进度条设计实例
weixin_29380121的博客
03-16 119
JSP编程进度条设计实例当JSP调用一个必须长时间运行的操作，且该操作的结果不能在服务器端)缓冲，用户每次请求该页面时都必须长时间等待。很多时候，用户会失去耐心，接着尝试点击浏览器的刷新按钮，最终失望地离开。本文介绍的技术是把繁重的计算任务分离开来，由一个独立的线程运行，从而解决上述问题。当用户调用JSP页面时，JSP页面会立即返回，并提示用户任务已经启动且正在执行；JSP页面自动刷新自己，报告在...
运用JSP+ajax实现分类查询功能的实例代码
01-20
本文主要是介绍了运用JSP+ajax实现分类查询功能的实例代码，分享给大家供大家参考，具体如下： 这次是对小学期关于大学毕业生信息管理系统课程设计中遇到的一些问题和解决方法进行记录和分享。 题目要求：提供企业...
JSP实现 Ajax-upload 的源码（进度条效果）.rar
07-09
Ajax-upload 的JSP实现源码，运行于JSP环境，含相关的JAVA源代码，学习Java比较不错，同时本程序实现带上传进度条上传图片、文件等，上传程序是大家经常用到的模块，你可将本模块摘录出来用到你的JSP项目中。
jsp中使用ajax实现web进度条
03-16
jsp中使用ajax实现web进度条
java ajax 进度条_Ajax + java Servlet 制作Web进度条
weixin_27918373的博客
02-12 101
运行效果图index2.jspvar bgcolor = '#0081C2'; //全局变量，用于设置进度条的背景色 https://www.cnblogs.com/lihuiyy/archive/2012/05/24/2516627.htmlvar number; //全局变量，用于记录当前span序号var clear = ""; //全局变量，记录清空时的内容var xmlHttp ...
java 做一个真的进度条去实时获取方法进行状态
Alice_qixin的博客
11-16 1万+
场景： 导入案件的时候，由于导入数据量大的时候。loading的前台效果要转很久给用户体验不好，不知道进行了多少。想要能看到数据导入的状态和导入的数量的进度条。而且不是假的。现在网上大多数的做法是写个假的样式方式跟loading差不多。这里要写个真的 问题： 导入案件的后台操作比较复杂，没有想出在方法执行完毕之前去前台返回各个状态的值，方法里包含excel数据的校验和一条数据要分别导
java ajax 进度条_基于ajax实现文件上传并显示进度条
weixin_29253711的博客
02-12 378
下面给大家分享下基于ajax实现文件上传并显示进度条。在jsp部分，需要设计一个表单，form的属性添加 enctype="multipart/form-data"，设计一个iframe，作为隐藏。form的target等于iframe的name;在servlet部分：文件上传用的Commons-FileupLoad，需要两个Jar，commons-fileupload和commons-io,少了...
AJAX 和 JSP 10.5(转)实现进度条【转】
boolean2011的专栏
03-16 594
1．服务器端代码 服务器端代码主要实现依据客户端的请求信息，返回相应百分比数字。打开记事本，输入下列代码： 案例10-5 int counter = 1;//注意：多用户将共享此变量，此进度条只适合单用户 %> String task = request.getParameter("task");          String res = "";
Java实现进度条
最新发布
I心暖存人T的博客
10-11 2862
基于Java实现进度条功能
Java实现进度条加载效果
Javaの甘乃迪的博客
09-28 1171
Java实现进度条加载效果
进度条实现与后端进行交互，实时更新进度条（JAVA web项目实现）
热门推荐
刘旭利的博客
06-29 2万+
实现思路 网页进度条更新有两种方式 1、轮询请求服务端、返回进度 2、服务端实时推送进度数据给客户端 轮询方式的实现方法，服务端在执行的过程中将进度数据保存再session中，客户端调用的时候从session中取出来，然后更新进度条的数据，从而改变进度条。 服务端实时推送，客户端请求执行任务的时候连接到websocket，服务端在执行的过程中将进度数据通过websocket的方式实时推送到客户端，客户端拿到数据后改变进度条 轮询请求方式 后端实现代码 ...
java 异步执行任务，返回进度
JAVA2010CZP的专栏
04-01 1万+
import java.util.ArrayList; import java.util.List; import java.util.concurrent.Callable; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util.concurrent
Ajax_显示进度条
我的IT技术杂谈
04-21 161
JSP部分： &lt;%@ page language="java" import="java.util.*" pageEncoding="gbk"%&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt;&lt;head&gt;    &amp
Ajax在请求数据时显示等待动画遮罩
于大大大洋
04-16 1万+
/*** 等待提醒 开始 *********************************************************************************************** -yzy -20150408 说明：在Ajax请求数据的时候，显示等待界面*/ // 1、这里显示等待框 $('#YWaitDia...
jsp中java代码执行js方法
05-30
在 JSP 中执行 JavaScript 方法可以通过以下步骤实现： 1. 在 JSP 页面中引入 JavaScript 文件 ``` <script type="text/javascript" src="path/to/jsfile.js"></script> ``` 2. 在 JSP 页面中定义一个 JavaScript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值