利用Ajax实现页面局部刷新

 2个文件 1个Html文件,一个Servlet

html 代码为:

<html>
<script>
  var xmlHttp;
 
  window.onload=function(){
   //alert("111");
  doStart();
  }
 
  function createXMLHttpRequest(){
   // alert("222");
  if(window.ActiveXObject){
   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if(window.XMLHttpRequest){
   xmlHttp=new XMLHttpRequest();
   }
   }
  
   function doStart(){
   // alert("doStart");
   createXMLHttpRequest();
   var url="dyupdate.yy";
  
     xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=startcallback;
    xmlHttp.send(null);
    }
   
    function startcallback(){
     // alert("startcallback");
     if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
         //alert("正常");
            setTimeout("pollServer()",5000);
            refreshTime();
        }
        else{
        alert(xmlHttp.status);
    }
  }}

   
 function pollServer(){
// alert("pollServer");
    createXMLHttpRequest();
    var url="dyupdate.yy" 
     xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=pollcallback;
    xmlHttp.send(null);
    }
     function pollServer2(ob){
 // alert(ob);
    createXMLHttpRequest();
    var url="dyupdate.yy&task="+ob; 
     xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=pollcallback2;
    xmlHttp.send(null);
    }
   function pollcallback2(){ }
   
  function pollcallback(){
   // alert("pollcallback");
     if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
         //alert("11");
         
           var message=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
           alert(message);
           if(message!=""){
           var new_row=createRow(message);
           var table=document.getElementById("dyupdatearea");
           var table_body=table.getElementsByTagName("tbody").item(0);
          
           var first_row=table_body.getElementsByTagName("tr").item(1);
           table_body.insertBefore(new_row,first_row);
           setTimeout("pollServer()",5000);
           refreshTime();
           }
        else{
       doStart();
    }}
    else{
    alert(xmlHttp.status);
    }
    }
  }
   
   function createRow(message){
   // alert("createRow");
     var row=document.createElement("tr");
     var cell=document.createElement("td");
     var cell_data=document.createTextNode(message);
    
     cell.appendChild(cell_data);
     row.appendChild(cell);
     return row;
     }

function refreshTime(){
  //alert("refreshTime");
 var time_span=document.getElementById("time");
 var time_var=time_span.innerHTML;
 var int_val=parseInt(time_var);
 var new_int_val=int_val-1;
 
 if(new_int_val>-1){
  setTimeout("refreshTime()",1000);
  time_span.innerHTML=new_int_val;
 }else{
  time_span.innerHTML=5;
 }
}
</script>
<body>
 <h1>利用Ajax</h1>
 <input type="button" value="加载" id="go" onClick="doStart();" />
   <p>
    页面将在<span id="time">5</span>秒后刷新
  </p>
  <table id="dyupdatearea" align="left" border="1">
   <tbody>
    <tr id="row0">
     <td></td>
    </tr>
   </tbody>
   
   <input type="text" id="55" name="text" />
   <input type="button" value="提交" onClick="pollServer2(document.getElementById('55').value)" />
   

  </table>
 </body>
</html>  
  

Servlet代码为:

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.LinkedList;

import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.RequestDispatcher;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ajax extends HttpServlet{
 int counter;
 private  static LinkedList list=new LinkedList();
public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
  //response.setC("UTF-8");
 if(list.size()>0)
 {
  System.out.println(list.getFirst().toString());
 }
  System.out.println("已经执行了");
  //int no=1;
 
  String res="";
  String task=request.getParameter("task");
  if(task!=null&&!"".equals(task))
  list.add(task);
  String message="12";
  //String reNo="<count>0</count>"; 

 
//   if(task.equals("reset")){
//    counter=1;
//  }else{
//   switch(counter){
//    case 1:message="1";break;
//    case 2:message="2";break;
//    case 3:message="3";break;
//    case 4:message="4";break;
//    case 5:message="5";break;
//    default:message="done";
//   }
//   counter++;
//  }
 
  if(list.size()>0){
 message=list.removeLast().toString();
   }
   res="<message>"+message+"</message>";
  PrintWriter out=response.getWriter();
 
  response.setContentType("text/xml; charset=UTF-8");
 
  response.setHeader("Cache-Control","no-cache");
  out.println("<response>");
  out.println(res);
  out.println("</response>");
  out.close();
  }

//public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
//   String text=(String)request.getParameter("text");
//   response.setContentType("text/xml; charset=UTF-8");
//   if(text!=null)
//   {
//    queue.add(text);
//   }
////     RequestDispatcher rd=this.getServletContext().getRequestDispatcher("/ajax.html");
////     rd.forward(request,response);
//}
 }