Ajax学习笔记(五)

来源：互联网发布：天刀捏脸数据女清纯编辑：程序博客网时间：2024/06/08 16:05

显示进度条的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>显示进度条</title>
<script type="text/javascript">
var xmlHttp;
var barColor='red';
var clear="   ";
//gray
function createXMLHTTPRequest()
{
    if(window.ActiveXObject)
    {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
      xmlHttp=new XMLHttpRequest();
    }
}
function doStart()
{
    var url="PostData?task=create&timeStamp="+(new Date()).getTime();
    createXMLHTTPRequest();
    checkDiv();
    document.getElementById("go").disabled=true;
    xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=handleStateChange;
    xmlHttp.send(null);
}
function handleStateChange()
{

    if(xmlHttp.readyState==4)
    {
      if(xmlHttp.status==200)
      {
        setTimeout("startServer()",2000);
      }
    }
}
function startServer()
{
    createXMLHTTPRequest();
    var url="PostData?task=poll&timeStamp="+(new Date()).getTime();
    xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=pollCallBack;
    xmlHttp.send(null);
}

function clearBar()
{
    var temp;
    for(var i=1;i<10;++i)
    {
        temp=document.getElementById("block"+i);
        temp.innerHTML=clear;
        temp.style.backgroundColor="white";
    }
}

</script>
</head>
<body>
<h1>进度条</h1>
<input type="button" value="开始" id="go" onclick="doStart();"/>
<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>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

import java.io.*;
import java.net.*;
import javax.servlet.*;
import java.util.Iterator;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.*;
import java.text.SimpleDateFormat;

public class PostData extends HttpServlet
{
private int counter=1;
public void init()throws ServletException
{
}
protected void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
  doPost(req,res);
}
protected void doPost(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
  String task=req.getParameter("task");
  if(task.equals("create"))
  {
   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.setContentType("text/xml");
   res.setHeader("Cache-Control","no-cache");
   res.getWriter().print("<response><percent>"+percent+"</percent></response>");
  }
}
}