Ajax 创建自动刷新页面
文件一览
dynamicUpdate.htmlDynamicUpdateServlet.javadynamicUpdate.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;@Overrideprotected 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();}}?执行效果如下图