JQuery+Servlet实现进度条
转载请注明:来自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"> <!-- js文件和代码 --> <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所在div function 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