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