Ajax进度条

最新推荐文章于 2021-08-05 14:02:31 发布

nxmxbbd

最新推荐文章于 2021-08-05 14:02:31 发布

阅读量5.6k

点赞数

分类专栏： Ajax.Ex 文章标签： ajax xmlhttprequest function import button 服务器

本文链接：https://blog.youkuaiyun.com/nxmxbbd/article/details/656210

版权

Ajax.Ex 专栏收录该内容

3 篇文章

订阅专栏

共需要3个文件,ProgressBarServlet.java,web.xml,progressBar.html;
林,如果没看太明白,我会多写点注释...

---ProgressBarServlet.java

package dawei;

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;

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();
}

}

<?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>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>ProgressBarServlet</servlet-name>
    <servlet-class>dawei.ProgressBarServlet</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>ProgressBarServlet</servlet-name>
    <url-pattern>/ProgressBarServlet</url-pattern>
</servlet-mapping>

---progressBar.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Ajax Progress Bar</title>
</head>
<script type="text/javascript">
var xmlHttp; //XMLHttpRequest对象
var bar_color="gray"; //颜色"gray"
var clear="   "; //占位符

//创建XMLHttpRequest对象
//在IE中,XMLHttpRequest对象是以ActiveX组件形式存在的
//在其他浏览器中,默认被集成
function createXMLHttpRequest(){
  if(window.ActiveXObject){
   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }else if(window.XMLHttpRequest){
   xmlHttp=new XMLHttpRequest();
  }
}

//当点击"Launch"按钮时执行
function go(){
  //创建XMLHttpRequest对象
  createXMLHttpRequest();

  //检查进度条状态
  checkDiv();

  //请求url
  //timeStamp参数确保url的唯一性,避免浏览器缓存结果
  var url="ProgressBarServlet?task=create&timeStamp="+new Date().getTime();

  //获得并设置button属性
  var button=document.getElementById("go");
  button.disabled=true;

  //打开连接
  xmlHttp.open("GET",url,true);
  //当XMLHttpRequest对象状态改变时,调用"goCallback()"方法
  xmlHttp.onreadystatechange=goCallback;
  //发送请求
  xmlHttp.send(null);
}

//启动
//接收服务器的响应
//当XMLHttpRequest的状态为4(请求状态,完成)和200(服务器状态)
function goCallback(){
  if(xmlHttp.readyState==4){
   if(xmlHttp.status==200){
    //延时2000毫秒执行"pollServer()"方法
    setTimeout("pollServer()",2000);
   }
  }
}

//由goCallback()启动,循环向服务器发送请求
//创建XMLHttpRequest对象
function pollServer(){
  createXMLHttpRequest();

  var url="ProgressBarServlet?task=poll&timeStamp="+new Date().getTime();

  xmlHttp.onreadystatechange=pollCallback;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
}

function pollCallback(){
  if(xmlHttp.readyState==4){
   if(xmlHttp.status==200){
    //读取以xml方式读取服务器的响应

    //获得所有名为"percent"的节点的第一个节点的文本节点的值
    var percent_complete=xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.nodeValue;

    //获得percent值的第一个字符
    var index=processResult(percent_complete);

    //
    for(var i=1;i<=index;i++){
     //得到指定元素(block[i])
     var elem=document.getElementById("block"+i);
     //设置元素值为占位符
     elem.innerHTML=clear;
     //设置元素背景颜色为bar_color(灰色)
     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+"%";
     }
    }
    //循环调用pollServer(),直到i=8;
    if(index<9){
     setTimeout("pollServer()",2000);
    }else{
     //进度条进行完毕,显示"complete"
     document.getElementById("complete").innerHTML="Complete!";
     //恢复button为可用
     document.getElementById("go").disabled=false;
    }
   }
  }
}

//检查进度条状态
function checkDiv(){
  var progressBar=document.getElementById("progressBar");
  if(progressBar.style.visibility=="visible"){
   clearBar();
   document.getElementById("complete").innerHTML="";
  }else{
   progressBar.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";
  }
}

//解析传入的值,获得其首字符

//substring(int start,int end)
//返回一个字符串,由 start 和 end 参数指定的两点之间的字符组成.
//如果未指定 end 参数,则子字符串的结尾就是该字符串的结尾.
//如果 start 的值等于 end 的值,则该方法返回一个空字符串.
//如果 start 的值大于 end 的值,则在函数执行前两个参数将自动互换,且原始值不变.

function processResult(percent_complete){
  var ind;
  if(percent_complete.length==1){
   ind=1;
  }else if(percent_complete.length==2){
   //substring(s,e);
   ind=percent_complete.substring(0,1);
  }else{
   ind=9;
  }
  return ind;
}
</script>
<body>
    <H1>Ajax 进度条</H1>
    执行:
    <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>

---web.xml