Ajax_创建自动刷新页面

最新推荐文章于 2023-03-17 13:25:15 发布

fsgsdfghdfh

最新推荐文章于 2023-03-17 13:25:15 发布

阅读量86

点赞数

分类专栏： Ajax技术应用文章标签： Ajax Cache JSP JavaScript OS ViewUI

Ajax技术应用专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JSP部分：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

   <title>My JSP 'index.jsp' starting page</title>
   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">

   <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" οnclick="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>

Servlet部分：

public class DynamicUpdateServlet extends HttpServlet {

private int counter = 1;

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}

public void doPost(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 = "Macs will soon have Intel chips";
     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();
}

}