AJAX研究之四--服务器同步-优快云博客

本文链接：https://blog.youkuaiyun.com/infowain/article/details/942384

本文介绍了一个简单的AJAX应用案例，通过定时请求服务器端状态并更新客户端显示，实现了实时状态同步的功能。该案例涉及JavaBean、JSP及JavaScript编程。

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

这个例子包含三个jsp和一个javaBean。
1、首先来看javaBean，这个Bean只有一个静态变量status，也就是我们要在客户端同步取得的状态

package info.ajax;
public class Status {
public static int status;
}

2、StatusSet.jsp，这个jsp是设置status的，是我们测试用的，与AJAX无关。

<%@ page contentType="text/html; charset=UTF-8" language="java" errorPage=""%>
<%@ page import="info.ajax.*"%>
<%
if (Status.status == 1) {
    Status.status=0;
    out.print("Status has been set to 0");
   } else {
    Status.status=1;
    out.print("Status has been set to 1");
   }
  %>

3、StatusMonitor.jsp，这个是客户端同步status的，用了AJAX，并且利用了window.setTimeout方法来每隔一段时间去获取server的status。

<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
var http_request = false;
var currentPos = null;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
  http_request = false;
  //开始初始化XMLHttpRequest对象
  if(window.XMLHttpRequest) { //Mozilla 浏览器
   http_request = new XMLHttpRequest();
   if (http_request.overrideMimeType) {//设置MiME类别
    http_request.overrideMimeType('text/xml');
   }
  }
  else if (window.ActiveXObject) { // IE浏览器
   try {
    http_request = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     http_request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
   }
  }
  if (!http_request) { // 异常，创建对象实例失败
   window.alert("不能创建XMLHttpRequest对象实例.");
   return false;
  }
  http_request.onreadystatechange = processRequest;
  // 确定发送请求的方式和URL以及是否同步执行下段代码
  http_request.open("GET", url, true);
  http_request.send(null);
}
// 处理返回信息的函数
    function processRequest() {
        if (http_request.readyState == 4) { // 判断对象状态
            if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
                //alert(http_request.responseText);
    document.getElementById('pos_1').innerHTML = http_request.responseText;
            } else { //页面不正常
                alert("您所请求的页面有异常。");
            }
        }
    }
//获得状态信息
function getStatus() {
  document.getElementById('pos_1').parentNode.style.display = "";
  send_request("StatusGet.jsp");
  window.setTimeout("getStatus()",1000);
}
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

4、StatusGet.jsp，这是在服务器端返回status的程序，是ajax请求的目标。这个jsp的前半部分加入了三行代码阻止IE缓存这个jsp文件。
<%@ page contentType="text/html; charset=UTF-8" language="java" errorPage=""%>
<%@ page import="info.ajax.*"%>
<%

response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);

System.out.println("running getStatus.jsp");
   if (Status.status == 1) {
    out.print("Status = 1");
   } else {
    out.print("Status = 0");
   }

把这些文件编译和部署好之后，我们来测试一下
(1) 先开一个浏览器，打开StatusMonitor.jsp，点击“开始”链接。
(2) 再在另外一台电脑开一个浏览器(或者在同一个电脑开另外一个浏览器)，打开StatusSet.jsp。
(3) 回头来观察第一个浏览器页面的显示已经改变了。
因为StatusSet.jsp每执行一次，就会改变一次status，所以第一个浏览器页面的显示会跟着StatusSet.jsp的执行而改变。

这个例子实际上还是通过定时刷新来实现与server同步的，但是由于使用了AJAX技术，用户并不会感觉到页面在刷新，好像是server把数据“推”送到客户端一样。

这个例子由于使用了定时刷新，所以不适于在项目中大量使用，少量的用在关键的业务上，应该可以取得不错的效果。