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动态刷新页面局部内容的更多相关文章

  1. Ajax初步实现页面局部内容更替

    类似于QQ邮箱的那种局部页面跳转,单页应用常用到,目前很多网页都是这种,但是弊端就是一次加载过多资源,首次加载卡出翔啊

  2. 浅析PHP页面局部刷新功能的实现小结(转)

    转载地址 https://www.jb51.net/article/38901.htm 方法其实挺多的.以前比较常用的是iframe这样来做.现在多了个ajax,所以一般情况下都是用的ajax.第一种 ...

  3. window.print() 打印页面部分内容的方法

    用 JavaScript 实现页面数据的打印 : 主要是用到了一个 print() 函数 , 该函数将会打印整个 web 页面 body 内的所有 html 数据 ! 使用方法为 window.pri ...

  4. ehcache实现页面整体缓存和页面局部缓存

    之前写过spring cache和ehcache的基本介绍和注解实现缓存管理,今天记录下web项目的页面缓存技术. 页面缓存是否有必要?. 这样说吧,几乎所有的网站的首页都是访问率最高的,而首页上的数 ...

  5. Django1.6 + jQuery Ajax + JSON 实现页面局部实时刷新

    最近微信公众帐号要扩展做一个签到系统,签到结果在一个网页上实时更新,即页面局部刷新.我想用Ajax来实现,之前公众帐号是用的Django搭的,我查找了Django的官方文档,没有封装Ajax.网上有各 ...

  6. JavaScript禁用页面刷新

    JavaScript禁用页面刷新代码如下: //禁用F5刷新 document.onkeydown = function () { if (event.keyCode == 116) { event. ...

  7. Javascript在页面加载时的执行顺序【转】

    一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...

  8. jquery实现页面局部刷新

    后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新.代 ...

  9. ASP.NET缓存全解析3:页面局部缓存 转自网络原文作者李天平

    有时缓存整个页面是不现实的,因为页的某些部分可能在每次请求时都需要变化.在这些情况下,只能缓存页的一部分.顾名思义,页面部分缓存是将页面部分内容保存在内存中以便响应用户请求,而页面其他部分内容则为动态 ...

随机推荐

  1. 多个iframe中根据src获取特定iframe并执行操作

    多个iframe中根据src获取特定iframe并执行操作 前言:在项目中做一个批量编辑工单时需要在一大堆的iframe中的某一个iframe里边再用模态框的形式显示编辑区域,然后再在模态框里边加入i ...

  2. [Hive_add_1] Hive 与 MR 的对应关系

  3. C# -- 随机数(Random)的使用

    使用随机数产生一组大乐透号码 1. C#代码 1 Console.WriteLine("===============大乐透===红色球==============="); Lis ...

  4. Linux 小知识翻译 - 「SCP和SFTP」

    这次想说说「SCP和SFTP」. 不管SCP还是SFTP,都是SSH的功能之一.都是使用SSH协议来传输文件的. 不用说文件内容,就是登录时的用户信息都是经过SSH加密后才传输的,所以说SCP和SFT ...

  5. May 26. 2018 Week 21st Saturday

    Do what you say, say what you do. 做你说过的,说你能做的. Be honest to yourself, and be honest to those people ...

  6. February 14th, 2018 Week 7th Wednesday

    Love does not dominate, it culitvates. 爱不是羁绊,而是成就. Love should not wipe out everything you are, love ...

  7. Myeclipse2017C版本破解

    原文地址: https://blog.csdn.net/qq_33945246/article/details/79589152

  8. winfrom之datagridview分页显示

    这次datagridview绑定数据并分页操作,因为用到了webservice,所以代码会详细讲解.QueryByCondition是一个查询函数 客户端: PageData pageData=new ...

  9. Java基础知识点(二)

    前言:Java的基础知识点不能间断. 1.Array和ArrayList的区别 关于Array的用法,参看:http://blog.csdn.net/b_11111/article/details/5 ...

  10. Django-rest-framework 接口实现 权限:(Permission)

    权限:(Permission) rest_framework 中 已经定义好了 权限 在 from rest_framework.permissions 中查看所有的权限 from rest_fram ...