ajax 实现的一个简单的自动的更新系统

datoplay

浏览: 1615646 次

最近访客更多访客>>

hjz

u012363178

wangyy

yaoling1

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1836)

社区版块

存档分类

2012-02 ( 2)
2011-11 ( 164)
2011-10 ( 155)
更多存档...

自动的更新目前应用是很广泛的，

ajax 在这方面的应用是

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>

function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

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>

在java 中的代码是如下：

package cn.hnpi;

import java.io.*;
import java.net.*;

import javax.servlet.*;
import javax.servlet.http.*;

/**
*
* @author nate
* @version
*/
public class DynamicUpdateServlet extends HttpServlet {
private int counter = 1;

/** Handles the HTTP <code>GET</code> method.
* @param request servlet request
* @param response servlet response
*/
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 = "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();
}

/** Handles the HTTP <code>POST</code> method.
* @param request servlet request
* @param response servlet response
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}

/** Returns a short description of the servlet.
*/
public String getServletInfo() {
return "Short description";
}
}

在xml 中的配置如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>DynamicUpdateServlet</servlet-name>
<servlet-class>cn.hnpi.DynamicUpdateServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>DynamicUpdateServlet</servlet-name>
<url-pattern>/DynamicUpdateServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

分享到：