前端js结合服务器实现进度条-6(待验证)

最新推荐文章于 2022-04-12 18:52:22 发布

weixin_34232617

最新推荐文章于 2022-04-12 18:52:22 发布

阅读量163

点赞数

文章标签：前端 java python ViewUI

原文链接：https://my.oschina.net/u/1035715/blog/223925

版权

2019独角兽企业重金招聘Python工程师标准>>>

Ajax实现的进度条，如下代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Progress Bar - www.cxybl.com</title>
<script type="text/javascript">
var xmlHttp; var key;
var bar_color = 'gray';//进度条的颜色
var span_id = "block";
var clear = " ";
function createXMLHttpRequest()//创建XMLHttpRequest对象
{
if(window.ActiveXObject) {
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } else if(window.XMLHttpRequest) {
   xmlHttp = new XMLHttpRequest();
  } }
  function go() {
   createXMLHttpRequest();//创建XMLHttpRequest对象
   checkDiv();//显示滚动条
   xmlHttp.onreadystatechange = callBack;//设置回调函数
   var url = "/AjaxDemo/servlet/ProgressBarServlet?task=create";//请求的地址
   var button = document.getElementById("go");
   button.disabled = true;//设置按钮不可用
   xmlHttp.open("get",url,true);//打开对服务器的连接
   xmlHttp.send();//发送请求
  }
  function callBack() {
  if(xmlHttp.readyState == 4) {
   if(xmlHttp.status == 200) {
    setTimeout("pollServer()",500);//定时调用
   } } }
   function pollServer() {
    createXMLHttpRequest();
    var url="/AjaxDemo/servlet/ProgressBarServlet?task=poll&key="+key;
    xmlHttp.onreadystatechange = pollCallBack;
    xmlHttp.open("GET",url,true);
    xmlHttp.send();
   }
   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()",500);
    } 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" οnclick="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>
  package cn.Ajax.test;
  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;
  @SuppressWarnings("serial")
  public class ProgressBarServlet extends HttpServlet {
  private int counter = 1;
  /**
  * The doGet method of the servlet.<br>
   * * This method is called when a form has its tag value method equals to get.
   * * @param request the request send by the client to the server
   * @param response the response send by the server to the client
   * @throws ServletException if an error occurred
   * @throws IOException if an error occurred
   */
   public 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();
    }
    /** * The doPost method of the servlet. <br>
    * * This method is called when a form has its tag value method equals to post.
    * * @param request the request send by the client to the server
    * @param response the response send by the server to the client
    * @throws ServletException if an error occurred
    * @throws IOException if an error occurred
    */
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doGet(request, response);
    } }