效果截图：
主要是通过定时器向服务器发送请求，从而自动更新内容，在AJAX出现以前这个是比较难以实现的。
静态页面：dynamicUpdate.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>自动刷新</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function doStart(){
createXMLHttpRequest();
url="servlet/DynamicUpdateServlet?task=reset&time="+new Date().getTime();
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="servlet/DynamicUpdateServlet?task=foo&time="+new Date().getTime();
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 first_row=table_body.getElementsByTagName("tr").item(1);
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 bgcolor="#CCFFFF">
<h1>自动刷新</h1>
这个页面将自动刷新：
<input type="button" value="加载" id="go" οnclick="doStart();"/>
<p>
页面将在<span id="time">5</span>内刷新
<p>
<table id="dynamicUpdateArea" align="left">
<tbody>
<tr id="row0"><td></td></tr>
</tbody>
</table>
</body>
</html>
Servlet处理页面:DynamicUpdateServlet.java
package servlet;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.net.*;
public class DynamicUpdateServlet extends HttpServlet{
private int counter=1;
protected void doGet(HttpServletRequest request,HttpServletResponse response)
throws IOException,ServletException{
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="Macs will soon hava Intel chips";break;
case 7:message="done";break;
}
counter++;
}
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();
}
}
8894
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
