AJAX 和 JSP 10.5(转)实现进度条【转】

Posted on 2011-08-25 20:05 菜鸟都不容易阅读(1129) 评论(0) 编辑收藏举报

1．服务器端代码

服务器端代码主要实现依据客户端的请求信息，返回相应百分比数字。打开记事本，输入下列代码：

案例10-5

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>

<%!

int counter = 1;//注意：多用户将共享此变量，此进度条只适合单用户

String task = request.getParameter("task");

String res = "";

if (task.equals("create")) {

res = "1";

counter = 1;

}

else {

String percent = "";

switch (counter) {

case 1: percent = "10"; break;

case 2: percent = "23"; break;

case 3: percent = "35"; break;

case 4: percent = "51"; break;

case 5: percent = "64"; break;

case 6: percent = "73"; break;

case 7: percent = "89"; break;

case 8: percent = "100"; break;

}

counter++;

res = "<percent>" + percent + "</percent>";

}

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

out.println("<response>");

out.println(res);

out.println("</response>");

out.close();

将上述代码保存，名称为ProgressBarJsp.jsp。在该文件中，声明了一个变量counter，并赋值为1，该变量是进度条返回百分比数字的依据。在下面使用request对象获取客户端传送的变量task的值，如果该值为“create”，表示需要重新创建进度条，并设定counter的值为1。如果task不是create，则会依据counter的值返回百分比数字，完成一次操作，counter值加1。

2．客户端代码

本案例的客户端代码主要实现依据返回百分比数字显示进度条的状态。打开记事本，输入下列代码：

案例10-5

<html>

<head>

var xmlHttp;

var bar_color = 'blue';

var span_id = "yellow";

var clear = "   "

function createXMLHttpRequest() {

if (window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

}

function go() {

createXMLHttpRequest();

checkDiv();

var url = "ProgressBarJsp.jsp?task=create";

xmlHttp.open("GET", url, true);

xmlHttp.onreadystatechange = goCallback;

xmlHttp.send(null);

}

function goCallback() {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

setTimeout("pollServer()", 2000);

}

function pollServer() {

createXMLHttpRequest();

var url = "ProgressBarJsp.jsp?task=poll";

xmlHttp.open("GET", url, true);

xmlHttp.onreadystatechange = pollCallback;

xmlHttp.send(null);

}

function pollCallback() {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;

var index = processResult(percent_complete);

for (var i = 1; i <= index; i++) {

var elem = document.getElementById("block" + i);

elem.innerHTML = clear;

elem.style.backgroundColor = bar_color;

var next_cell = i + 1;

if (next_cell > index && next_cell <= 9) {

document.getElementById("block" + next_cell).innerHTML = percent_complete + "%";

}

if (index < 9) {

setTimeout("pollServer()", 2000);

} else {

document.getElementById("complete").innerHTML = "网站已完成加载!";

}

function processResult(percent_complete) {

var ind;

if (percent_complete.length == 1) {

ind = 1;

} else if (percent_complete.length == 2) {

ind = percent_complete.substring(0, 1);

} else {

ind = 9;

}

return ind;

}

function checkDiv() {

var progress_bar = document.getElementById("progressBar");

if (progress_bar.style.visibility == "visible") {

clearBar();

document.getElementById("complete").innerHTML = "";

} else {

progress_bar.style.visibility = "visible"

}

function clearBar() {

for (var i = 1; i < 10; i++) {

var elem = document.getElementById("block" + i);

elem.innerHTML = clear;

elem.style.backgroundColor = "white";

}

</script>

</head>

<p>

<tbody>

</div>

</td></tr>

</tbody>

</table>

</body>

</html>

将上述代码保存，名称为JspprogressBar.html。在该文件中，JavaScript函数createXMLHttpRequest()主要用来创建XMLHttpRequest对象，go()函数完成向服务器端发送异步请求，该函数在网页加载时被调用，其主要作用就是通知服务器端，并在客户端开始运行进度条。goCallback()函数主要处理服务器端响应，并每隔2秒调用函数pollServer()函数。pollServer()函数也是向服务器端发送异步请求，主要请求服务器端响应的百分比数字。pollCallback()函数主要处理服务器端响应，即依据服务器端的返回数字，指定进度条的显示状态。这里需要注意的是，goCallback()函数只执行一次，而pollCallback()函数可以执行多次。其余的三个函数都是实现进度条的辅助函数。

将上述两个JSP文件复制到JSP目录下。打开IE浏览器，在地址栏中输入http://localhost:8080/JSP/JspprogressBar.html

------------------------以下是从跳转action的实例--------------

在一个项目中，需要在后台把某个目录下的文件信息写入数据库（初始化文件）。当文件数量太多时，等待时间较长。因此需用ajax技术做一个显示处理进度的进度条。

进度条显示页面before_initiallize.jsp：

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

后台处理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;

}

会员力量，点亮园子希望

刷新页面返回顶部

菜鸟都不容易

导航

公告

AJAX 和 JSP 10.5(转)实现进度条【转】