使用JavaScript动态刷新页面局部内容
html页面：
<%@page contentType="text/html; charset=Shift_JIS"%>
<html>
<head>
<title>equipment</title>
<script type="text/javascript" language="javascript">
var req;
//initialize request.
function initRequest(url) {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET", url, true);
}
//start work
function work() {
//target servlet
var url = "equipmentservlet";
//initialize request
initRequest(url);
// set callback function
req.onreadystatechange = displayStatus;
//do
req.send(null);
}
function displayStatus() {
if (req.readyState == 4) {
if (req.status == 200) {
var i = 0;
var str = req.responseText;
if (str == null || str.length != 7) {
} else {
for (i = 0; i < 7; i++) {
var status = str.charAt(i);
setStatus(i, status);
}
}
setTimeout("work()", 6000);
}
}
}
function setStatus(i, status) {
var labelName = 'equipment_' + i;
var idiv = window.document.getElementById(labelName);
if (status == '1') {
idiv.innerHTML = '<font color="red">error</font>';
}
if (status == '0') {
idiv.innerHTML = '<font color="black">good</font>';
}
}
</script>
</head>
<body bgcolor="#ffffff" onLoad="work();">
<h1>
設備
<br>
<table border="1">
<tr>
<td>
設備 0
</td>
<td>
<div id="equipment_0"></div>
</td>
</tr>
<tr>
<td>
設備 1
</td>
<td>
<div id="equipment_1"></div>
</td>
</tr>
<tr>
<td>
設備 2
</td>
<td>
<div id="equipment_2"></div>
</td>
</tr>
<tr>
<td>
設備 3
</td>
<td>
<div id="equipment_3"></div>
</td>
</tr>
<tr>
<td>
設備 4
</td>
<td>
<div id="equipment_4"></div>
</td>
</tr>
<tr>
<td>
設備 5
</td>
<td>
<div id="equipment_5"></div>
</td>
</tr>
<tr>
<td>
設備 6
</td>
<td>
<div id="equipment_6"></div>
</td>
</tr>
</table>
</h1>
</body>
</html>
servlet主要部分：
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("begin");
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
PrintWriter pw = response.getWriter();
StringBuffer buf = new StringBuffer();
for(int i = 0; i < 7; i++)
{
int status = (int)(Math.random() * 2);
buf.append("" + status );
}
System.out.println("message:\n" + buf.toString() + "\n");
pw.write(buf.toString());
pw.flush();
System.out.println("end");
}
web.xml配置：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<display-name>equipment</display-name>
<servlet>
<servlet-name>equipmentservlet</servlet-name>
<servlet-class>dynamicflush.EquipmentServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>equipmentservlet</servlet-name>
<url-pattern>/equipmentservlet</url-pattern>
</servlet-mapping>
</web-app>
摘自：http://blog.csdn.net/amose/archive/2005/06/07/389793.aspx
使用JavaScript动态刷新页面局部内容的更多相关文章
- Ajax初步实现页面局部内容更替
类似于QQ邮箱的那种局部页面跳转,单页应用常用到,目前很多网页都是这种,但是弊端就是一次加载过多资源,首次加载卡出翔啊
- 浅析PHP页面局部刷新功能的实现小结(转)
转载地址 https://www.jb51.net/article/38901.htm 方法其实挺多的.以前比较常用的是iframe这样来做.现在多了个ajax,所以一般情况下都是用的ajax.第一种 ...
- window.print() 打印页面部分内容的方法
用 JavaScript 实现页面数据的打印 : 主要是用到了一个 print() 函数 , 该函数将会打印整个 web 页面 body 内的所有 html 数据 ! 使用方法为 window.pri ...
- ehcache实现页面整体缓存和页面局部缓存
之前写过spring cache和ehcache的基本介绍和注解实现缓存管理,今天记录下web项目的页面缓存技术. 页面缓存是否有必要?. 这样说吧,几乎所有的网站的首页都是访问率最高的,而首页上的数 ...
- Django1.6 + jQuery Ajax + JSON 实现页面局部实时刷新
最近微信公众帐号要扩展做一个签到系统,签到结果在一个网页上实时更新,即页面局部刷新.我想用Ajax来实现,之前公众帐号是用的Django搭的,我查找了Django的官方文档,没有封装Ajax.网上有各 ...
- JavaScript禁用页面刷新
JavaScript禁用页面刷新代码如下: //禁用F5刷新 document.onkeydown = function () { if (event.keyCode == 116) { event. ...
- Javascript在页面加载时的执行顺序【转】
一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...
- jquery实现页面局部刷新
后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新.代 ...
- ASP.NET缓存全解析3：页面局部缓存 转自网络原文作者李天平
有时缓存整个页面是不现实的,因为页的某些部分可能在每次请求时都需要变化.在这些情况下,只能缓存页的一部分.顾名思义,页面部分缓存是将页面部分内容保存在内存中以便响应用户请求,而页面其他部分内容则为动态 ...
随机推荐
- Linux下进程的创建过程分析(_do_fork do_fork详解)--Linux进程的管理与调度（八）
Unix标准的复制进程的系统调用时fork(即分叉),但是Linux,BSD等操作系统并不止实现这一个,确切的说linux实现了三个,fork,vfork,clone(确切说vfork创造出来的是轻量 ...
- c/c++ 类成员变量，成员函数的存储方式，以及this指针在c++中的作用
c/c++ 类成员变量,成员函数的存储方式,以及this指针在c++中的作用 c++不会像上图那样为每一个对象的成员变量和成员函数开辟内存空间, 而是像下图那样,只为每一个对象的成员变量开辟空间.成员 ...
- AI学习---数据IO操作&神经网络基础
数据IO操作 TF支持3种文件读取: 1.直接把数据保存到变量中 2.占位符配合feed_dict使用 3. QueueRunner(TF中特有的) 文件读取流程 文件读取流程(多线 ...
- JavaScript -- 时光流逝（一）：数据类型，变量，类型转换，函数
JavaScript -- 知识点回顾篇(一):数据类型,变量,类型转换,函数 1. 数据类型 Boolean:值类型,布尔(逻辑)只能有两个值:true 或 false. Number:值类型,Ja ...
- 将含有makefile文件的源码加入Eclipse工程
转载自https://www.linuxidc.com/Linux/2011-02/32763.htm 很多软件在开发或者分析时需要一个像样的IDE,Eclipse是其中很优秀的一个,至少个人感觉很好 ...
- Java多线程（四）java中的Sleep方法
点我跳过黑哥的卑鄙广告行为,进入正文. Java多线程系列更新中~ 正式篇: Java多线程(一) 什么是线程 Java多线程(二)关于多线程的CPU密集型和IO密集型这件事 Java多线程(三)如何 ...
- Go学习笔记07-结构体与方法
Go学习笔记07-结构体与方法 Go语言 面向对象 结构的定义与创建 面向对象 Go语言只支持封装,不支持继承和多态. Go语言中只有struct,即结构体:没有class. 结构的定义与创建 pac ...
- WPF自定义控件（一）の控件分类
一.什么是控件(Controls) 控件是指对数据和方法的封装.控件可以有自己的属性和方法,其中属性是控件数据的简单访问者,方法则是控件的一些简单而可见的功能.控件创建过程包括设计.开发.调试(就是所 ...
- docker: read tcp 192.168.7.235:36512->54.230.212.9:443: read: connection reset by peer.
在学习rancher的时候去下载rancher/agent镜像的时候,出现报错:docker: read tcp 192.168.7.235:36512->54.230.212.9:443: r ...
- Doc2vec实现原理
论文来源:https://www.eecs.yorku.ca/course_archive/2016-17/W/6412/reading/DistributedRepresentationsofSen ...