页面间隔半秒钟更新时间 Asp.net使用Comet开发http长连接示例分享

好处:1.和AJAX轮询比起来 节省资源,并且延迟小, 2.和webSocket比起来,适用的场景比较广泛。

1.先建立一个Asp.net MVC的空项目

添加一个控制器  (同样的代码在Asp.net WebForm中也是可以使用的)

代码如下:

public class CometController : Controller
    {
        public ActionResult Test()
        {
            Response.Buffer = false;
            while (true)
            {
                Response.Write(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss FFF") + "|");
                Thread.Sleep(500);
            }
            //跑不到这里的
            return Content("");
        }
    }
}

2.再兴建一个控制器和View 用于显示HTML

代码如下:

public class HomeController : Controller
    {
        //
        // GET: /Home/

public ActionResult Index()
        {
            return View();
        }

}

View的代码比较重要

代码如下:

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script language="javascript">
        var req = false;
        var lastDelimiterPosition = -1;

$(document).ready(function () {
            getData();
        });

function getData() {
            loadXMLDoc("/Comet/Test");
        }

//新建一个XHR
function createRequest() {
            if (window.XMLHttpRequest && !(window.ActiveXObject)) {
                try {
                    req = new XMLHttpRequest();
                } catch (e) {
                    req = false;
                }        // branch for IE/Windows ActiveX version  
            } else if (window.ActiveXObject) {
                try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {
                    try {
                        req = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {
                        req = false;
                    }
                }
            }
        }

//发起请求
function loadXMLDoc(url) {
            try {
                if (req) {
                    req.abort();
                    req = false;
                }
                createRequest();
                if (req) {
                    req.onreadystatechange = processReqChange;
                    req.open("GET", url, true);
                    req.send("");
                } else {
                    alert('unable to create request');
                }
            } catch (e) { alert(e.message); }
        }

//检查状态
function processReqChange() {
            if (req.readyState == 3) {
                try {
                    ProcessInput(req.responseText);
                    if (req.responseText.length > 3000) {
                        lastDelimiterPosition = -1; getData();
                    }
                }
                catch (e) {
                    alert(e.message);
                }
            }
        }

//拆分字符串
function ProcessInput(input) {
            var text = input;
            var nextDelimiter = text.indexOf('|', lastDelimiterPosition + 1);
            if (nextDelimiter != -1) {
                var timeStamp = text.substring(nextDelimiter + 1);
                if (timeStamp.length > 0) {
                    lastDelimiterPosition = nextDelimiter;
                    ProcessTime(timeStamp);
                }
            }
        }

//输出 或者触发什么事件
function ProcessTime(time) {
            document.getElementById('div1').innerHTML = time;
        }
    </script>
</head>
<body>
    <div>
        <div id="div1">
        </div>
        <div id="div2">
        </div>
    </div>
</body>
</html>

3.最终效果为:

页面上显示一个时间,每隔半秒钟更新一次

当然，拿到内容以后，其实你想做什么就做什么。。。更新DOM也好,执行js也好, (还好有eval这个方法~~)

4.这个例子只是基于异步Javascript的一个实现,

实际上还可以通过<iframe> 和 <script>这两个标签做实现,特别是script标签可以访问和执行跨域的javascript

赞 (0)

相关推荐

  • 使用Java实现类似Comet风格的web app

    开始     在本文中,我将展示如何使用各种不同的 Java 技术构建一些简单的 Comet 风格的 Web 应用程序.读者对 Java Servlet.Ajax 和 JavaScript 应该有一定的了解.我们将考察 Tomcat 和 Jetty 中一些支持 Comet 的特性,因此需要使用这两个产品的最新版本.本文使用 Tomcat 6.0.14 和 Jetty 6.1.14.另外还需要一个支持 Java 5 或更高版本的 JDK.本文使用 JDK 1.5.0-16.此外还需要看看 Jett

  • 详解Tomcat如何实现Comet

    详解Tomcat如何实现Comet

    Comet模式是一种服务器端推技术,它的核心思想提供一种能让当服务器端往客户端发送数据的方式.Comet模式为什么会出现?刚开始人们在客户端通过不断自动刷新整个页面来更新数据,后来觉得体验不好又使用了AJAX不断从客户端轮询服务器更新数据,然后是使用Comet模式由服务器端通过长连接推数据.Comet模式能大大减少发送到服务器端的请求从而避免了很多开销,而且它还具备更好的实时性. 如图所示,客户端发送一个请求到服务器,服务器接收了连接后一直保持住连接不关闭:接着客户端发送一个操作报文告诉服务器需

  • jquery实现ajax提交form表单的方法总结

    方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() {            var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";                   alert($('#formAddHandlingFee').serialize());                $.ajax({                    type: "P

  • 完美解决AJAX跨域问题

    从AJAX诞生那天起,XMLHttprequest对象不能跨域请求的问题就一直存在.这似乎是一个很经典的问题了.是由于javascript的同源策略(这里不作深入探讨)所导致. 解决的办法,大概有如下几种: 1. 使用中间层过渡的方式(可以理解为"代理"): 中间过渡,很明显,就是在AJAX与不同域的服务器进行通讯的中间加一层过渡,这一层过渡可以是PHP.JSP.c++等任何具备网络通讯功能的语言,由中间层向不同域的服务器进行读取数据的操作.拿asp.net做一个例子,如果需要对不同域

  • jQuery Ajax全解析

    什么是Ajax Ajax基本概念 Ajax(Asynchronous JavaScript and XML):翻译成中文就是异步的JavaScript和XML. 从功能上来看是一种在无需重新加载整个网页的情况下能够更新部分网页的技术. 传统的网页 想要更新内容或者提交表单就要重新加载或刷新页面. 使用ajax技术的网页 通过后台服务器进行少量的数据交换,网页就可以实现异步局部跟新. Ajax出现前 Ajax技术出现之前,是一个同步交互的世界. 同步:客户端发出请求,服务端去处理,然后响应,这一段

  • jquery ajax例子返回值详解

    在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get(). 首先我们看$.get(): 复制代码 代码如下: $.get("test.jsp", { name: "cssrain", time: "2008/01/21" }, //要传递的数据 function(data){ alert("返回的数据: " + data); } ) 然后看$.post(): 跟$.get()格式一样.

  • JavaScript数据推送Comet技术详解

    JavaScript数据推送主要致力于webapp的在线推送服务,不用我们每次都像服务器去发送Ajax请求而主动从Server端推送数据到本地. 数据推送进化史: 1. HTTP协议简易轮询,保持着一个链接不放,或者通过前端不停的向后端发送请求 2. H5更新后有了WebSocket大大改善了双向和单向推送数据的便利性 3. SSE(Server-Send Event):服务器推送数据的新方式 Comet:基于 HTTP 长连接的服务器推送技术 本课时介绍Comet:基于 HTTP 长连接的服务

  • 基于JQuery框架的AJAX实例代码

    index.html 复制代码 代码如下: <html> <head> <title>jQuery Ajax 实例演示</title> </head> <script src="./js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(docum

  • Ajax和Comet技术总结

    Ajax是一种技术,一种能够向服务器请求额外的数据而无需卸载页面的技术,能够使网页具备更优的用户体验.Ajax技术的核心是XMLHttpRequest对象(XHR).本文从XHR开始谈起,理解Ajax技术的特点,再对跨域以及Comet等技术进行简要理解和总结. XMLHttpRequest基本用法 XHR对象有两个常用的方法open和send.open方法用户启动一个HTTP请求,不过它不会真的发送HTTP请求.open方法接收3个参数,分别表示请求的HTTP方法.请求的URL.是否异步.XHR

  • 页面间隔半秒钟更新时间 Asp.net使用Comet开发http长连接示例分享

    好处:1.和AJAX轮询比起来 节省资源,并且延迟小, 2.和webSocket比起来,适用的场景比较广泛. 1.先建立一个Asp.net MVC的空项目 添加一个控制器  (同样的代码在Asp.net WebForm中也是可以使用的) 复制代码 代码如下: public class CometController : Controller    {        public ActionResult Test()        {            Response.Buffer = f

  • 在页面中输出当前客户端时间javascript实例代码

    时间对象(Date())比较简单,本文旨在为初学者入门使用,大牛可略过! 本文承接基础知识实例,说一下实例的要求: 在页面中输出当前客户端时间(2015年1月1日星期一10:10:10这样的格式),每过一秒中页面不刷新,但是时间自动更新(用两种定时器方法都可以实现),鼠标点击时间,如果原先运动则停止,如果停止则继续运动: 要求基本上可分为2部分:一是不刷新自动更新时间,二是点击时间停止或更新时间 好,那我们还是老规矩,一步一步来,既然是时间,那就会用到时间对象 new Date(); var n

  • 用javascript自动显示最后更新时间

    经常更新网页,总是懒得弄最后更新时间. 下面用javascript实现显示最后更新时间. <script language="JavaScript"> <!--hide script from old browsers document.write("本页最后更新日期: " + document.lastModified + "") // end hiding --> </script>  呵呵,就这么简单.

  • 关于Mybatis-Plus字段策略与数据库自动更新时间的一些问题

    字段策略 0:"忽略判断",1:"非 NULL 判断"),2:"非空判断" 问题描述: 当字段策略为 0 "忽略判断" 的时候,如果实体和数据库有字段是需要自动更新的,例如update_time,更新某条记录的时候自动刷新update_time,理论上我们在业务控制的时候是不需要设置update_time的,利用数据库特性就好,但是在该字段策略下,业务逻辑要更新字段(没有主动设置 update_time),这时候因为忽略判断,

  • mybatis-plus 通用字段自动化(如逻辑删除和更新时间等)

    一般来说某些项目比较规范的情况下,大多数表都会有逻辑删除字段和通用字段,例如更新时间,创建时间,更新人,创建人等等,但是在代码开发上会产生很多冗余的代码,逻辑删除的话,自己写比较繁琐,而且容易有遗漏逻辑. 本来打算自己写切面去实现,偶然发现mybatis-plus已经帮封装实现了,试了一下,很好用,所以分享一下. 逻辑删除 逻辑删除的意思就是某些业务表,在用户删除某条数据的时候,不真正删除,而是将此数据某字段改成类似"已删除",而查询语句.更新语句等会忽略此条被逻辑删除的数据. 这里就

  • mysql 实现添加时间自动添加更新时间自动更新操作

    mysql 实现添加时间自动添加更新时间自动更新操作

    在数据库使用中经常使用到时间字段.常用的有创建时间和更新时间. 然而在使用中想要创建时间在创建的时候自动设置为当前时间,更新时间在更新时自动更新为当前时间. 创建表 stu CREATE TABLE `stu` ( 'id' int NOT NULL AUTO_INCREMENT, 'createTime' timestamp DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', 'moditiyTime' timestamp DEFAULT CURRENT_TIM

  • mybatisPlus自动填充更新时间的示例代码

    1.实体类上的注解 @NoArgsConstructor @AllArgsConstructor @Data public class User { @TableId(type = IdType.AUTO) private Long id; private String name; private Integer age; private String email; @TableField(fill = FieldFill.INSERT) private Date createTime; @Ta

  • mybatis-plus自动填充插入更新时间有8小时时差

    mybatis-plus自动填充插入更新时间有8小时时差

    今天使用mybatis-plus自动填充插入和更新时间有8小时时差 后来发现只需要修改一下mybaits连接的url即可 原先我是用的 datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/gulischool?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC username: root passw

  • Entity Framework Core更新时间映射

    Entity Framework Core更新时间映射

    时间字段 在真实的开发中,为了跟踪数据的变化,一般会在数据表里面有CreatedTime和UpdatedTime两列.CreatedTime表示创建时间,新增一条数据的时候,会更新CreatedTime列的值.UpdatedTime表示更新时间,更新数据的同时也会更新UpdatedTime列的值,这时候就需要对应的映射来配置.我们修改Blog类,增加这两个时间字段: using System; namespace EFCore.Model { public class Blog { public

  • mysql数据库自动添加创建时间及更新时间

    目录 前言 1.描述 2 完整的操作 SQL 2.1 修改现有表中的时间列默认值为自动获取 2.2 现有表中添加时间列设置默认值 2.3 创建表时时间列设置默认值 总结 前言 志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不妨来瞅瞅码农的轨迹. 1.描述 在mysql中,添加表中的列类型为时间类型(

随机推荐