實現網頁不刷新頁面的情況下動態刷新表格數據
阿新 • • 發佈：2018-05-24
erp err enter ase null src void 情況 net
<%@ 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());
}
}
實現網頁不刷新頁面的情況下動態刷新表格數據