Ajax进度条

技术2022-05-11 49

转自：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 > < script type ="text/javascript" > 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 > < td align ="center" id ="progressPersent" > 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 > < td align ="center" id ="complete" > completed </ td > </ tr > </ table > </ div > < input id ="go" name ="run" type ="button" value ="run" onClick ="go();" > </ 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 > < 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"; }}

专利

最新回复(0)