页面实时刷新技术探讨

缺乏、安全感 2022-09-18 13:48 243阅读 0赞

# 页面实时刷新技术探讨 #

url:[http://blog.csdn.net/skysandy/archive/2009/08/17/4455480.aspx][http_blog.csdn.net_skysandy_archive_2009_08_17_4455480.aspx]

最近，公司做一个交通软件产品，需要实现页面实时刷新，baidu了不少资料，但没有真正解决实时刷新页面问题。我们都知道，访问网页是基于HTTP协议，即要通过request/response的方式访问服务器，如果客户端不去主动请求，服务器端是不会主动给客户端返回客户端所需的信息的，基于此，B/S永远不可能实现真正的服务器端"PUSH"模式。

但以上并不等于说我们无法实时获取到服务端的实时信息，以下是从网上搜索的一些实现方式，总结了一下：

**客户端“PULL”模式**

** **

**页面定时刷新**

隔一段时间，刷新一次页面，重新查询数据库的方式。大大增加了服务器的负载。

**观察者模式**

客户端部分，把显示实时数据的部分做成无刷新的，通过轮询服务端的更新变量，但是不是查数据库，而是访问服务器端标志，该标志用来标志最近数据是否更新。如果标志显示数据被更新，再查询数据库并返回。

**服务器“PUSH”模式**

**ActiveX控件**

提示用户下载安装,还要向微软申请许可证,否则当用户打开网页时显示是否安装ActiveX时,将会显示该控件没有经过安全认证,可能会危害你的计算机的提示信息。

**Ajax push组件**

采用异步通信方式，XmlHttpRequest提供的异步请求方式对于请求应答时常没有什么特别的限制，符合我们与服务器建立长期连接的需求。

服务器端会阻塞请求直到有数据传递或超时才返回。

客户端 JavaScript  响应处理函数会在处理完服务器返回的信息后，再次发出请求，重新建立连接。

当客户端处理接收的数据、重新建立连接时，服务器端可能有新的数据到达；这些信息会被服务器端保存直到客户端重新建立连接，客户端会一次把当前服务器端所有的信息取回。

**Flash XMLSocket**

在 HTML 页面中内嵌入一个使用了 XMLSocket 类的 Flash  程序。JavaScript  通过调用此 Flash  程序提供的套接口接口与服务器端的套接口进行通信。JavaScript 在收到夫务器端以 XML 格式传送的信息后可以很容易地控制 HTML 页面的内容显示。

缺点：

客户端必须安装 Flash 播放器；

因为 XMLSocket 没有 HTTP  隧道功能，XMLSocket  类不能自动穿过防火墙；

因为是使用套接口，需要设置一个通信端口，防火墙、代理服务器也可能对非 HTTP 通道端口进行限制；

网络聊天室，网络互动游戏中已得到广泛使用

**Java Applet** **套接口**

在客户端使用 Java Applet，通过java.net.Socket或java.net.DatagramSocket或java.net.MulticastSocket建立与服务器端的套接口连接，从而实现“服务器推”。

这种方案最大的不足在于 Java applet 在收到服务器端返回的信息后，无法通过 JavaScript 去更新 HTML  页面的内容。

以上实现方式，我基本上都作了一个Demo，综合比较考虑，使用xmlHTTP的方式实现起来比较方便。具体实现代码如下：  
服务器端：

protected void Page\_Load(object sender, EventArgs e)  
    \{  
        if (!IsPostBack)  
        \{  
            XmlDocument xmlDoc = new XmlDocument();  
            xmlDoc.Load(HttpContext.Current.Server.MapPath("newPic.xml"));  
            XmlNodeList nodeList = xmlDoc.SelectSingleNode("Items").ChildNodes;

XmlElement element = (XmlElement)nodeList\[0\];  
            string picPath = "Pic/" + element.GetAttribute("code") + ".jpg";

Label1.Text = element.GetAttribute("code");  
            imgCtrl.ImageUrl = picPath;

//imgCtrl.ImageUrl = "server.aspx";  
        \}  
    \}

客户端代码：

<%@ Page Language="C\#" AutoEventWireup="true" CodeFile="client.aspx.cs" Inherits="client" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd][http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]">

<html xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml]" >  
<head runat="server">  
    <title></title>  
    <meta http-equiv="Content-Type" content="text/html; Charset=gb2312" />  
    <script type="text/javascript">  
        var xmlHttp;  
        function CreateXMLHttp()  
        \{  
            if(window.XMLHttpRequest)  
            \{  
                xmlHttp = new XMLHttpRequest();  
            \}  
            else if (window.ActiveXObject)  
            \{  
                try  
                \{  
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  
                \}  
                catch(e)  
                \{  
                    try  
                    \{  
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
                    \}  
                    catch(e) \{ \}  
                \}  
            \}  
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP.5.0");  
        \}

[http_blog.csdn.net_skysandy_archive_2009_08_17_4455480.aspx]: http://blog.csdn.net/skysandy/archive/2009/08/17/4455480.aspx
[http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
[http_www.w3.org_1999_xhtml]: http://www.w3.org/1999/xhtml