Ajax_显示进度条

aben328

浏览: 1457188 次
性别:
来自: 广东

最近访客更多访客>>

ufexs

baby孔祥超

laopo521anping

wocaowoshiwanglong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

Ajax Go Cache JSP JavaScript

Ajax_显示进度条

JSP部分：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

   <title>My JSP 'index.jsp' starting page</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">
   <meta http-equiv="description" content="This is my page">
   <script type="text/javascript">
　　 var xmlHttp;
　　 var key;
　　 var bar_color = 'gray';
　　 var span_id = "block";
　　 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 = "ProgressBarServlet?task=create";
   　　var button = document.getElementById("go");
   　　button.disabled = true;
   　　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 = "ProgressBarServlet?task=poll&key=" + key;
　　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 = "Complete!";
      　　document.getElementById("go").disabled = false;
     　　}
    　　}
   　　}
　　}

　　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>
<body>
   <h1>
    Ajax Progress Bar Example
   </h1>
   Launch long-running process:
   <input type="button" value="Launch" id="go" onclick="go();" />
   <p>
   <table align="center">
    <tbody>
     <tr>
      <td>
       <div id="progressBar"
        　　style="padding:2px;border:solid black 2px;visibility:hidden">
        <span id="block1">   </span>
        <span id="block2">   </span>
        <span id="block3">   </span>
        <span id="block4">   </span>
        <span id="block5">   </span>
        <span id="block6">   </span>
        <span id="block7">   </span>
        <span id="block8">   </span>
        <span id="block9">   </span>
       </div>
      </td>
     </tr>
     <tr>
      <td align="center" id="complete"></td>
     </tr>
    </tbody>
   </table>
</body>
</html>

Servlet部分：

public class ProgressBarServlet extends HttpServlet {

private int counter = 1;

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
   String task = request.getParameter("task");
   String res = "";
   if (task.equals("create")) {
    res = "<key>1</key>";
    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>";
   }
   PrintWriter out = response.getWriter();
   response.setContentType("text/xml");
   response.setHeader("Cache-Control", "no-cache");
   out.println("<response>");
   out.println(res);
   out.println("</response>");
   out.close();
}