Ajax 创设自动刷新页面 _Ajax

Ajax 创建自动刷新页面

文件一览

dynamicUpdate.html
DynamicUpdateServlet.java

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>Ajax Dynamic Update</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();
	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 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>
<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" align="left">
<tbody>
	<tr id="row0"><td></td></tr>
</tbody>
</table>
</body>
</html>

?DynamicUpdateServlet.java

package ajaxbook.chap4;

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 int counter = 1;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String res = "";
		String task = req.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,OSX 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 = resp.getWriter();
		resp.setContentType("text/xml");
		resp.setHeader("Cache-Control", "no-cache");
		out.println("<response>");
		out.println(res);
		out.println("</response>");
		out.close();
	}
	
}

?执行效果如下图