页面实时刷新技术探讨

url: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">

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

function startXMLHttp()
        {
            CreateXMLHttp();
            xmlHttp.onreadystatechange =dodo;
            xmlHttp.open("post","server.aspx",true);
            xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded charset=gb2312");
            xmlHttp.send();
        }       
     
         function dodo()
         {
           if(xmlHttp.readystate==4)
           {
             if(xmlHttp.status==200)
             {
               var retValue = xmlHttp.responseText;
               var new1 = retValue.split("Pic/")[1].substring(0,18);
              
               var nowValue = document.getElementById("Content").innerHTML;
               if(nowValue.split("Pic/")[1] == null)
               document.getElementById("Content").innerHTML=xmlHttp.responseText;
               else
               {
                 var new2 = nowValue.split("Pic/")[1].substring(0,18);               
                 if(new1!=new2)
                 { document.getElementById("Content").innerHTML=xmlHttp.responseText; }
               }
//               document.getElementById("Content").innerHTML=xmlHttp.responseText;
             }
             setTimeout(startXMLHttp,1000);
          }
        }
    </script>
</head>
<body οnlοad='Javascript:startXMLHttp()'>
    <div></div>
    <span id="Content">No Pic</span>
</body>
</html>
代码比较简单，相信大家基本能懂

页面实时刷新技术探讨相关推荐

  1. web页面实时刷新之browser sync

    web开发对实时刷新的需求 在刚开始学习前端时每次修改文件内容后都需要手工刷新下浏览器来看效果,做的次数多了就特别难受,有时仅仅修改了一个字母都需要刷新下页面查看 之后接触到编写边看的集成IDE,文件 ...

  2. web 实时刷新 websocket 大数据

    最近在做的一个项目,是一个大数据分析平台,有如下需求:有如果个实验设备运行并且将运行数据通过socket发送到分析平台,分析平台通过运行socket作业来完成对socket数据的接收,同时还需要对接收 ...

  3. html 设置页面刷新,HTML 页面自动刷新

    学习就是一个不断积累的过程,每一天能够学到一点新东西说明自己就在进步!! HTML head 里面设置页面自动刷新功能 兼容Ie 页面2s自动刷新一次 代码: Document Hello world ...

  4. Demo：充分利用 Ajax 技术 来体现页面局部刷新 效果（获取天气预报情况）

    天气预报读取,充分利用了Ajax技术来体现页面无刷新. 如果想获取源码,进一步学习和交流,可以回复,留下你的Email.  1.  2  3    <link href="Style/ ...

  5. [html] 切页面时，每次都动手刷新看效果很麻烦，如果要让你写一个实时刷新预览的工具你该怎么写？

    [html] 切页面时,每次都动手刷新看效果很麻烦,如果要让你写一个实时刷新预览的工具你该怎么写? node包http, scoket.io建立服务静态页面增加webSocket,服务器推送后执行刷新 ...

  6. uniapp 购物车页面解决实时刷新的问题

    电商app购物车页面的刷新问题 onShow周期函数中实时渲染数据 在电商app中,购物车需要根据商品加入购物车/购物车商品删除/购物车商品下单等操作进行实时刷新数据. 最开始的处理方案就是:在购物车 ...

  7. 优雅地实现一个高效、异步数据实时刷新的列表

    今日科技快讯 2月11日消息,据CNBC报道,当特斯拉公司于2019年1月宣布第二轮裁员以控制成本时,一个关键部门受到的打击尤为沉重.两名被裁汰的员工表示,负责向北美地区客户交付Model 3电动汽车 ...

  8. STM32 网页服务器 LWIP websever ajax实时刷新 （一）

    STM32 网页服务器 LWIP websever ajax实时刷新 (一) 本项目主要功能是作为通讯板控制使用,主要有UDP.TCP.websever(网页服务器)和RS485等通讯功能.在使用的过 ...

  9. 如何实现最佳的跨平台游戏体验？Unity成亮解密实时渲染技术！

    7月31日,2018云创大会游戏论坛在杭州国际博览中心103B圆满举行.本场游戏论坛聚焦探讨了可能对游戏行业发展有重大推动的新技术.新实践,如AR.区块链.安全.大数据等. Unity大中华区技术经理 ...

最新文章

  1. 虚拟机CENTOS7下 安装8.0版本MySQL MySQL主从配置详细~
  2. Java中jsonObject与String等互转问题
  3. 搞不懂的算法-排序篇1
  4. 代码：准确算出用户输入的日期是星期几！
  5. 可以通过发声把玻璃震碎吗？
  6. 对AutoIt中控件和窗口的理解
  7. win7 未授予用户在此计算机上的请求登录类型,Win7提示未授予用户在此计算机上的请求登录类型...
  8. 程序猿应该拥有的浏览器
  9. sdk环境变量配置win10_sdk环境变量配置好检查
  10. OCR文字识别技术总结（一）
  11. mmclassification使用步骤与心得/ACCV实验记录
  12. 计算机专业招聘人才的需求,对计算机专业人才需求现状
  13. orb slam [RGBD-1] process has died解决
  14. 全国计算机水平考试技巧,备考计算机等级考试的技巧
  15. postman的使用
  16. 2019计算机小高考成绩,小高考没过怎么办 2021小高考难度如何
  17. 2022年危险化学品经营单位主要负责人最新解析及危险化学品经营单位主要负责人考试资料
  18. json转对象（GsonFormatPlus）
  19. 自己动手学TCP/IP--ICMP（ping报文）
  20. Go string类型及其使用

热门文章

  1. 电气EPlan软件第六章到第十章的学习
  2. Java 设计模式-责任链模式
  3. 黄淮学院计算机专业录取分数线2019,2018年黄淮学院艺术类本科专业录取分数线...
  4. ireader android 源码,仿ireader书架 - androidCode的个人空间 - OSCHINA - 中文开源技术交流社区...
  5. 使用win10的画图将照片变为2寸大小
  6. UBTC项目11月中旬研发披露
  7. 5、OpenGL入门 贴图叠加【Win32+VS2019】亲测代码
  8. Mapabc里InfoWindow自定义窗口时的关闭事件。
  9. 单源广度优先搜索 （leetcode经典例题 C++实现）
  10. 解决AndroidManifest.xml文件反编译失败