基于Ajax技术的简易进度条的实现

来源：互联网发布：js设计模式 pdf 编辑：程序博客网时间：2024/06/16 15:34

网上找来的，链接为：http://blog.csdn.net/javatwt/archive/2007/03/02/1519117.aspx

progressBar.html文件：

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

<html>

<head>

<title>Ajax Progress Bar</title>

var xmlHttp;

var key;

function createXMLHttpRequest() ...{

if (window.ActiveXObject) ...{

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

}

else if (window.XMLHttpRequest) ...{

xmlHttp = new XMLHttpRequest();

}

function go() ...{

createXMLHttpRequest();

clearBar();

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 progress = document.getElementById("progress");

var progressPersent = document.getElementById("progressPersent");

progress.width = percent_complete + "%";

progressPersent.innerHTML = percent_complete + "%";

if (percent_complete < 100) ...{

setTimeout("pollServer()", 2000);

} else ...{

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

//document.getElementById("go").disabled = false;

}

function clearBar() ...{

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

var progressPersent = document.getElementById("progressPersent");

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

progress_bar.style.visibility = "visible"

progressPersent.innerHTML = " ";

complete.innerHTML = "Begin to upload this file...";

}

</script>

</head>

<body>

<div id="progressBar"

style="padding:0px;border:solid black 0px;visibility:hidden">

<table width="300" border="0" cellspacing="0" cellpadding="0"

align="center">

<tr>

86%

</td>

</tr>

<tr>

<td>

<table width="100%" border="1" cellspacing="0" cellpadding="0"

bordercolor="#000000">

<tr>

<td>

<table width="1%" border="0" cellspacing="0" cellpadding="0"

bgcolor="#FF0000" id="progress">

<tr>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

completed

</td>

</tr>

</table>

</div>

</body>

</html>

web.xml文件：

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee

http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<servlet-name>ProgressBarServlet</servlet-name>

<servlet-class>

sample.ProgressBarServlet

</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>ProgressBarServlet</servlet-name>

<url-pattern>/ProgressBarServlet</url-pattern>

</servlet-mapping>

</web-app>

ProgressBarServlet.java文件：

package sample;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class ProgressBarServlet extends HttpServlet ...{

private int counter = 1;

/**//**

* Handles the HTTP <code>GET</code> method.

* @param request

* servlet request

* @param response

* servlet response

protected void doGet(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();

}

/**//**

* Handles the HTTP <code>POST</code> method.

* @param request

* servlet request

* @param response

* servlet response

protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException ...{

doGet(request, response);

}

/**//**

* Returns a short description of the servlet.

public String getServletInfo() ...{

return "Short description";

}