实现网页不刷新页面的情况下动态刷新表格数据

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>主页中间</title>
<link rel="stylesheet" href="css/public.css" />
<link rel="stylesheet" href="css/style.css" />
<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">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script src="js/jquery.js"></script>
<script type="text/javascript">
	//全局xmlHttp对象
	var xmlHttp;

	//获得xmlHttp对象
	function createXMLHttp() {
		//对于大多数浏览器适用
		var xmlHttp;
		if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		}
		//考虑浏览器的兼容性
		if (window.ActiveXObject) {
			xmlHttp = new ActiveXOject("Microsoft.XMLHTTP");
			if (!xmlHttp) {
				xmlHttp = new ActiveXOject("Msxml2.XMLHTTP");
			}
		}
		return xmlHttp;
	}

	//回调函数
	function callback() {
		//4代表完成
		if (xmlHttp.readyState == 4) {
			//200代表服务器响应成功，404代表资源未找到，500服务器内部错误
			if (xmlHttp.status == 200) {
				//交互成功获得响应的数据，是文本格式
				var result = xmlHttp.responseText;
				var tableStart = "<table id='test' class='providerTable' cellpadding='0' cellspacing='0' align='center' width='100%'><tr>"
				var head = "<tr class='firstTr'><th width='10%'>终端号</th><th width='20%'>终端名称</th><th width='20%'>终端类型</th><th width='20%'>终端状态</th><th width='20%'>终端IP地址</th><th width='10%'>终端音量</th></tr>"
				var tdStart = "<td>"
				var tdEnd = "</td>"
				//定义表格结束标签 ;
				var tableEnd = "</tr></table>"
				document.getElementById("t1").innerHTML = tableStart + head + tableEnd;
				
				var json1 = eval("(" + result + ")");
				for (i = 0; i < json1.length; i++) {
					// 追加行 ;
					var oRow1 = test.insertRow(test.rows.length);
					// 获取表格的行集合。 
					var aRows = test.rows;
					// 获取第一行的单元格集合。 
					var aCells = oRow1.cells;
					// 在第一行中插入两个单元格。 
					var oCell1_1 = oRow1.insertCell(aCells.length);
					var oCell1_2 = oRow1.insertCell(aCells.length);
					var oCell1_3 = oRow1.insertCell(aCells.length);
					var oCell1_4 = oRow1.insertCell(aCells.length);
					var oCell1_5 = oRow1.insertCell(aCells.length);
					var oCell1_6 = oRow1.insertCell(aCells.length);
					var json = json1[i];
					/* if(json.terminalState="断线"){
					 	json.terminalIPAddress="";
					 	json.terminalVol=""
					 } else{} */
					var terminalID = tdStart + json.terminalID + tdEnd
					 
					var terminalIPAddress = tdStart + json.terminalIPAddress + tdEnd
					
					var terminalName = tdStart + json.terminalName + tdEnd
					
					var terminalState = tdStart + json.terminalState + tdEnd
					    
					var terminalType = tdStart + json.terminalType + tdEnd
					
					var terminalVol = tdStart + json.terminalVol + tdEnd
					// 向单元格内填充数据 ;        
					oCell1_1.innerHTML = terminalID;
					oCell1_2.innerHTML = terminalName;
					oCell1_3.innerHTML = terminalType;
					oCell1_4.innerHTML = terminalState;
					oCell1_5.innerHTML = terminalIPAddress;
					oCell1_6.innerHTML = terminalVol ;
				}
				setTimeout(getContents, 1000);
			}
		}
	}

	//获得内容
	function getContents() {
		//首先获得用户的输入内容，这里获得的是一个结点
		//var content = document.getElementById("keyword");
		//if(content.value ==""){
		//  return;
		//}
		//向服务器发送内容，用到XmlHttp对象
		xmlHttp = createXMLHttp();
		//给服务器发送数据，escape()不加中文会有问题
		var url = "Test";
		//true表示js的脚本会在send()方法之后继续执行而不会等待来自服务器的响应
		xmlHttp.open("GET", url, true);
		//xmlHttp绑定回调方法，这个方法会在xmlHttp状态改变的时候调用,xmlHttp状态有0-4，
		//我们只关心4，4表示完成
		xmlHttp.onreadystatechange = callback;
		xmlHttp.send(null);
	}
	/* setInterval(function(){
		$("#t1").load(location.href+"#v1>*","");
	},3000); */
</script>

</head>

<body onload="getContents()">
	<section class="publicMian " id="t1"> <!--表格 样式公用-->
	</section>
</body>
</html>

package com.cscy.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import hy.com.port.BroadcastImpl;
import hy.com.rmi.entity.TerminalInfomation;
import net.sf.json.JSONArray;

public class TestServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
	    resp.setCharacterEncoding("utf-8");
	    
	    TerminalInfomation[] terminalInfo = BroadcastImpl.getTerminalInfomation();	   
		resp.getWriter().write(JSONArray.fromObject(terminalInfo).toString());
		
	    
	}
	
}

实现网页不刷新页面的情况下动态刷新表格数据

猜你喜欢