页面实时刷新技术探讨

最新推荐文章于 2024-04-02 22:10:58 发布

jackpk

最新推荐文章于 2024-04-02 22:10:58 发布

阅读量2k

点赞数

分类专栏： ajax js、html 文章标签：服务器 xmlhttprequest javascript applet html flash

js、html 同时被 2 个专栏收录

38 篇文章

订阅专栏

ajax

3 篇文章

订阅专栏

页面实时刷新技术探讨

url:http://blog.youkuaiyun.com/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">

<html xmlns="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");
        }