使用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

时间: 2024-10-14 00:54:31

使用JavaScript动态刷新页面局部内容的相关文章

菜鸟解决“子页面关闭刷新父页面局部”问题的历程

引子 昨天晚上做一个项目,遇到的一个问题,这个项目是一个在线考试系统,新建一份试卷的页面,要添加一些试题策略.点击添加试题策略,弹出添加策略的页面,策略编辑好之后提交,添加策略页关闭,当前添加试题页面策略列表刷新.那么就遇到一个问题,在“添加试卷页”中点击“添加策略”按钮弹出添加策略页,添加策略后,父页面只能局部刷新(整体刷新会丢掉页面输入框未保存的数据). 综上总结,浓缩成一句话啊,就是“父页面打开子页面,子页面完成操作后触发父页面的事件.” 过程 我在百度和必应里面搜一下,很多解决方案是用w

[转载]用Javascript获取页面元素的位置

原文地址:http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html 制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那

关于页面局部刷新例程

RS技术的一个具体例子 在前面的帖子中,我介绍了RS的基本工作原理,显然如果将RS技术运用在一个 网站的设计中将会有很多非凡的作用(尤其是它的那个最大的优点,可以在不刷新 页面的情况下调用服务端的代码).正是因为这个特点,你就可以象在编写一个 传统的C/S模式的程序一样,对数据库的数据进行处理了(我想大家一定很想知道具体应该如何来实现了,下面将给出一个具体的例子,调试这个破程序几乎快把我给累死,呵呵.) 从前面的描述可以看到,要使用RS技术就需要客户端和服务端满足下面两个条件: 1.客户端只需要

javascript实现页面跳转

因为要做登录,利用ajax在本界面做验证,然后跳转,所以在网上找到了以下内容,均属转载 原文链接:http://www.68design.net/Development/JSP/39394-1.html 第一种: <script language="javascript" type="text/javascript"> window.location.href="login.jsp?backurl=\"+window.location

C#抓取AJAX页面的内容

原文 C#抓取AJAX页面的内容 现在的网页有相当一部分是采用了AJAX技术,所谓的AJAX技术简单一点讲就是事件驱动吧(当然这种说法可能很不全面),在你提交了URL后,服务器发给你的并不是所有是页面内容,而有一大部分是JS脚本,即用<JAVASCRIPT标签表示的,这其中有些是链接了外部的JS文件,有些是内置的JS脚本,这些脚本是在客户端加载了服务器发回来的源码后才执行的,所以不管是采用C#中的WebClient还是HttpRequest都得不到正确的结果,因为这些脚本是在服务器发送完毕后才执

jquery实现页面局部刷新

后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新.代码如下: Java代码   <html> <head> <script type="text/javascript"> window.onload = function(){ document.getElementById("email&quo

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

一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属性制定外部的js文件 放在事件处理程序中,比如:<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p> 作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href="

使用ajax与iframe嵌套实现页面局部刷新

使用ajax与iframe嵌套实现页面局部刷新.该javascript代码仅供参考,需按自己需要修改.?1. [代码]javascript代码 function cj_start(depname,groupid){    var urls = "<%=path%>/userGather.action";    var status = "";    var html_1 = "<iframe frameborder=\"0\&q

JavaScript禁用页面刷新

JavaScript禁用页面刷新代码如下: //禁用F5刷新 document.onkeydown = function () { if (event.keyCode == 116) { event.keyCode = 0; event.cancelBubble = true; return false; } } //禁止右键弹出菜单 document.oncontextmenu = function () { return false; } 添加完成之后,先情况浏览器缓存查看效果,有的没有效果