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


}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值