Ajax 入门2

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html >
     < head >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=iso-8859-1"   />
         < title > Untitled Document </ title >
         < script  language =javascript > ...
            var xmlHttp;
            
            function createXMLHttpRequest()...{
                if(window.ActiveXObject)
                ...{
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                else if(window.XMLHttpRequest)
                ...{
                    xmlHttp=new XMLHttpRequest();
                    
                }
                
            }
            
            function doStart()...{
                createXMLHttpRequest();
                var url="DynamicUpdateServlet?task=reset";
                
                xmlHttp.open("GET",url,true);
                xmlHttp.onreadystatechange=startCallback;
                xmlHttp.send(null);
            }
            
            function startCallback()...{
                
                if(xmlHttp.readyState==4)...{
                    if(xmlHttp.status==200)...{
                        setTimeout("pollServer()",5000);
                        refreshTime();
                    }
                }
            }
            function pollServer()...{
                createXMLHttpRequest();
                var url="DynamicUpdateServlet?task=foo";
                xmlHttp.open("GET",url,true);
                xmlHttp.onreadystatechange=pollCallback;
                xmlHttp.send(null);
                
            }
            
            function refreshTime()...{
                var time_span=document.getElementById("time");
                var time_val=time_span.innerHTML;
                var int_val=parseInt(time_val);
                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;
                }
            }
            
            function pollCallback()...{
                
                if(xmlHttp.readyState==4)...{
                    if(xmlHttp.status==200)...{
                        var message=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
                        
                        if(message!="done")...{
                            var new_row=createRow(message);
                            
                            var table=document.getElementById("dynamicUpdateArea");<!--原书上var table_body=table.getElementsByTagName("tbody").item(0);但是，我始终没调出来，用下面的方式调试通过-->
                            var table_body=table.getElementsByTagName("tbody")[0];
                        
                            var first_row=table_body.getElementsByTagName("tr")[0];
                            
                            table_body.insertBefore(new_row,first_row);
                            
                            setTimeout("pollServer()",5000);
                            refreshTime();
                        }
                    }
                }
            }
            
            function createRow(message)...{
                
                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;
                
            }
         </ script >
     </ head >
     < body >
        
         < h1 >  Ajax Dynamic Update Example </ h1 >
        This page will automatically update itself:
         < input  type ="button"  value ="Launch"  id ="go"  onclick ="doStart()" />
         < p >
            Page will refresh in  < span  id ="time" > 5 </ span >  seconds.
             < p >
                 < table  id ="dynamicUpdateArea"   >
                    
                     < tbody >
                         < tr >< td ></ td ></ tr >
                     </ tbody >
                 </ table >
     </ body >
</ html >

 剩下的就是服务器端程序，很简单了，就是个Servlet

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  DynamicUpdateServlet  extends  HttpServlet  ... {
    /** *//**
     * 
     */
    private static final long serialVersionUID = 1L;
    private int counter=1;
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException ...{
        String res="";
        String task=request.getParameter("task");
        String message="";
         
        if(task.equals("reset"))...{
            counter=1;
        }
        else...{
            switch(counter)...{
            case 1:message="Steve walks on stage";break;
            case 2:message="iPods rock";break;
            case 3:message="Steve says Macs rule";break;
            case 4:message="Change is coming";break;
            case 5:message="Yes,OS X runs on Intel-has for years";break;
            case 6:message="I'm skycliff ,I'll be success.";break;
            case 7:message="done";break;
            
            
            }
            counter++;
        }
        res="<message>"+message+"</message>";
        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();
        
    }

}