使用JavaScript动态刷新页面局部内容

最新推荐文章于 2023-07-25 14:33:26 发布

amose

最新推荐文章于 2023-07-25 14:33:26 发布

阅读量5.2k

点赞数

文章标签： javascript xmlhttprequest servlet function import div

本文链接：https://blog.youkuaiyun.com/amose/article/details/389793

版权

这篇博客展示了如何利用JavaScript动态刷新页面的部分内容，通过XMLHttpRequest与后台Servlet交互，实时更新7个设备的状态。当接收到Servlet返回的设备状态信息后，JavaScript函数会根据状态值改变相应div元素的颜色，模拟设备正常或错误的状态显示。每6秒钟自动轮询一次，以保持状态的实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript部分：

<%@page contentType="text/html; charset=Shift_JIS"%>
<html>
<head>
<title>equipment</title>

    //initialize request.
    function initRequest(url)
    {
      if (window.XMLHttpRequest)
      {
        req = new XMLHttpRequest();
      }
      else if (window.ActiveXObject)
      {
        isIE = true;
        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);
        }
      }
    }

</table>
</h1>
</body>
</html>

Servlet部分：

package dynamicflush;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;

public class EquipmentServlet
extends HttpServlet
{

    //Initialize global variables
    public void init() throws ServletException
    {
    }

    //Process the HTTP Get request
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws
        ServletException, IOException
    {
        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();

}

    //Process the HTTP Post request
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws
        ServletException, IOException
    {
        doGet(request, response);
    }

    //Clean up resources
    public void destroy()
    {
    }
}
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>