JQuery+Servlet实现进度条

来源：互联网发布：mac mysql 命令行编辑：程序博客网时间：2024/05/30 20:09

转载请注明:来自http://blog.csdn.net/M_ChangGong/作者:张燕广

上一篇《JavaScript+Servlet实现进度条》模拟了进度条的实现。该篇使用JQuery改写上一篇中JavaScript相关的代码，进度条显示效果不改变。

仍然在上一篇创建的web工程中编写代码。

1.WebRoot下创建jsp页面progress_jq.jsp，与上一篇创建的progress.jsp除了引入的JS文件不同外，仍稍有区别，代码如下： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><html><head><title>进度条</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><mce:script type="text/javascript" src="web/jslib/jquery.js" mce_src="web/jslib/jquery.js"></mce:script><mce:script type="text/javascript" src="web/jslib/progress_jq.js" mce_src="web/jslib/progress_jq.js"></mce:script></head><body id="process" onload="process();" style="top:200px;hight:800px"><div style="top:145px;width: expression(body.clientWidth);z-index: 100;border: none;"> <%int i = 1; %><table border="0" align="center" cellpadding="0" cellspacing="0"><br><br><tr><td height="20" colspan="3" valign="top"><center><h2>数据正在处理中，请稍候……</h2></center></td></tr><tr><td colspan="3" valign="top"><table align="center"><tr><td align="center"> <div id="progressBar" style="padding:2px;border:solid green 1px;visibility:hidden" mce_style="padding:2px;border:solid green 1px;visibility:hidden" align="left"> <div style="width:800px"> <c:forEach begin="1" end="50" step="1" > <span id="block<%=i++ %>" style="width:2%;"></span> </c:forEach> </div> </div> </td> <td align="center" id="finish"></td></tr><tr><td align="center" id="complete"></td></tr></table></td></tr></table> </div></body></html>

2.WebRoot/web/jslib下创建在progress_jq.jsp中引入的progress_jq.js文件，代码如下：

//全局变量 var bar_color = 'green'; //进度条背景颜色 var no_color="";//解决浏览器兼容设置的无颜色变量 var clear = " ";/*清空背景颜色用的变量，如果该变量为空字符 ,非IE 内核浏览器显示有问题*/function process(){ checkDiv(); //检查processBar所在div$.ajax({type: "GET",url: "progressBarServlet?task=first",dataType:"text",async: false,success:function(){setTimeout("pollServer()", 1);}});}function pollServer() {$.ajax({type: "GET",url: "progressBarServlet?task=poll",dataType:"text",async: false,success:function(percent_complete){pollCallback(percent_complete);}}); } function pollCallback(percent_complete) { //得到当前进度百分比 // var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;var index = percent_complete / 2; //100个百分点，显示在50个block上 for (var i = 1; i <= index; i++) {var elem = $("#block"+i);elem.html(clear);elem.css("backgroundColor",bar_color);var htmlVal = "<font style="font-weight:bold;color:blue" mce_style="font-weight:bold;color:blue">" htmlVal +=percent_complete; htmlVal += "%" htmlVal +="</font>"; $("#finish").html(htmlVal); } //只要进度小于100%继续每隔1000毫秒调用一次pollServer() if (percent_complete < 100) { setTimeout("pollServer()",1000); } else if(percent_complete == 100){ alert("计算完毕"); var redirectResultView="result.jsp"; //要跳转的页面可以从servlet中传过来var urlInfo = "正在加载展示数据,如果没有跳转请点<a href=""; urlInfo += redirectResultView; urlInfo += "" mce_href=""; urlInfo += redirectResultView; urlInfo += ""><font color='red'>这里</font></a>"; document.getElementById("complete").innerHTML = urlInfo; window.location.href = redirectResultView; } //定义percent超过100后的错误信息 else if(percent_complete == 102){ alert("处理过程出现XX错误！"); } } //检查processBar所在div，设置其是否显示 function checkDiv() {var process_bar = $("#progressBar");if(process_bar.css("visibility") == "visible"){clearBar();$("#complete").html("");}else{process_bar.css("visibility","visible");} } //清空processBar所在divfunction clearBar() { for (var i = 1; i < 50; i++) {var elem = $("block"+i);elem.html(clear); } }

3.进度条显示样式：

http://blog.csdn.net/M_ChangGong/archive/2009/08/24/4480147.aspx

4.进度条源代码下载地址：

http://download.csdn.net/source/1601393