利用Jquery实现http长连接(LongPoll) {转}

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

<!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>
    <script
type="text/javascript"
src="script/jquery-1.2.6.js"></script>
    <script
type="text/javascript">
       
$(document).ready(function(){
           
$("#Button1").bind("click",{btn:$("#Button1")},function(evdata){
               
$.ajax({
                   
type:"POST",
                    url:"JqueryAjaxLongPoll.aspx",
                   
dataType:"json",
                   
timeout:10000,
                   
data:{ajax:"1",time:"10000"},
                   
success:function(data,textStatus){
                           
//alert("ok!");
                           
evdata.data.btn.click();
                   
},
                   
complete:function(XMLHttpRequest,textStatus){
                           
if(XMLHttpRequest.readyState=="4"){
                               
alert(XMLHttpRequest.responseText);
                           
}
                   
},
                   
error:
function(XMLHttpRequest,textStatus,errorThrown){
                           
//$("#ajaxMessage").text($(this).text()+"
out!")
                           
alert("error:"+textStatus);
                           
if(textStatus=="timeout")
                               
evdata.data.btn.click();
                   
}
               
});
           
});

/*$("#ajaxMessage").ajaxStart(function(){
               
$(this).text("准备建立请求.readyState0:");
           
});
           
$("#ajaxMessage").ajaxSend(function(evt, request,
settings){
               
$(this).text("开始请求,准备发送数据.readyState1:"+request.readyState);
           
});
           
$("#ajaxMessage").ajaxComplete(function(event,request,
settings){
               
if(request.status==200)
                   
$(this).text("请求完成.readyState4:"+request.readyState);
           
});
           
$("#ajaxMessage").ajaxStop(function(){
               
$(this).text("请求结束.");
           
});*/
        });
   
</script>
</head>
<body>
    <form
id="form1" runat="server">
   
<div>
        <input id="Button1"
type="button" value="AjaxLongPoll"
/>
        <label
id="ajaxMessage"></label>
   
</div>
   
</form>
</body>
</html>

using System;
using System.Data;
using System.Configuration;
using
System.Collections;
using System.Web;
using System.Web.Security;
using
System.Web.UI;
using System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Web.UI.HtmlControls;
using System.Threading;

public partial class JqueryAjaxLongPoll :
System.Web.UI.Page
{
    protected void Page_Load(object
sender, EventArgs e)
   
{
        if (Request.Form["ajax"] ==
"1")
       
{
           
//Response.End();
           
int time =
Convert.ToInt32(Request.Form["time"]);
           
DateTime date1 =
DateTime.Now.AddMilliseconds((double)time);
           
bool ready =
false;
           
while
(Response.IsClientConnected)
           
{
               
Thread.Sleep(3000);
               
if (DateTime.Compare(date1, DateTime.Now) <
0)
               
{
                   
Response.End();
                   
break;
               
}
               
//ready =
true;
               
if
(ready)
               
{
                   
Response.Write("SetValue(‘" + DateTime.Now.ToString() +
"‘)");
                   
//Response.Flush();
                   
Response.End();
                   
break;
               
}
               
else
               
{

}
           
}
       
}
       
else
       
{
            if
(!Page.IsPostBack)
           
{

}
        }
   
}
}

思路:

利用jquery,很方便的就能实现ajax,上面设置了ajax的timeout时间,由于设置了timeout将会造成不能保持长连接,到了时间ajax自动会报“超时”的错误,也就是会调用error方法,此时textStatus=="timeout",timeout后重新进行ajax请求。服务器接受ajax请求的时候,会接收一个超时时间的值,超时的情况下服务器端的处理也立即停止。当客户端成功获取返回结果时,也会立即进行新的ajax请求,如此循环。

为什么要设置客户端的ajax超时值呢?因为服务器为了保持请求(阻塞请求),必须有一个无限循环,循环的结束条件就是获取到了返回结果,如果客户端关闭了(客户端浏览器的关闭不会发消息给服务器),服务器无法知道客户端已经关了,这个请求没必要处理下去了。最终会造成资源过度浪费,只要用一个折中的办法,限制超时时间。

可以不必设置客户端ajax的超时时间,但进行请求的时候传递一个超时值给服务器,服务器在处理的时候,如果超时时间到了的话,还没有客户端需要的结果,这时传递一个超时信息给客户端,客户端接收到了此信息,根据情况重新进行ajax请求。XMLHttpRequest没有超时的参数,Jquery用window.setTimeout自己封装的(到了定时时间运行超时处理方法,和XMLHttpRequest结束方法)。可以根据这个思路来改变一下,IBM上介绍的LONG
POLL好像也是这样的。

$(document).ready(function(){
           
$("#Button1").bind("click",{btn:$("#Button1")},function(evdata){
               
$.ajax({
                   
type:"POST",
                    url:"JqueryAjaxLongPoll.aspx",
                   
dataType:"json",
                   
data:{ajax:"1",time:"6000000"},
                   
success:function(data,textStatus){
                           
//成功
                           
if(data.success=="1"){
                               
//客户端处理
                               
//...
                               
///重新请求
                               
evdata.data.btn.click();
                           
}
                           
//超时
                           
if(data.success=="0"){
                               
evdata.data.btn.click();
                           
}
                   
},
                   
complete:function(XMLHttpRequest,textStatus){
                           
if(XMLHttpRequest.readyState=="4"){
                               
alert(XMLHttpRequest.responseText);
                           
}
                   
},
                   
error:
function(XMLHttpRequest,textStatus,errorThrown){
                           
//$("#ajaxMessage").text($(this).text()+"
out!")
//                           
alert("error:"+textStatus);
//                           
if(textStatus=="timeout")
                               
evdata.data.btn.click();
                   
}
               
});
           
});

后台代码变更后:
if (Request.Form["ajax"] ==
"1")
       
{
            int time
=
Convert.ToInt32(Request.Form["time"]);
           
DateTime date1 =
DateTime.Now.AddMilliseconds((double)time);
           
bool ready =
false;
           
while
(Response.IsClientConnected)
           
{
               
Thread.Sleep(3000);
               
if (DateTime.Compare(date1, DateTime.Now) <
0)
               
{
                   
Response.Write("{success:‘0‘}");
                   
Response.End();
                   
break;
               
}
               
//此处进行请求处理,有结果了置ready =
true
               
//ready =
true;
               
if
(ready)
               
{
                   
Response.Write("{success:‘1‘}");
                   
Response.End();
                   
break;
               
}
           
}
       
}
       
else
       
{
            if
(!Page.IsPostBack)
           
{

}
        }

上面的方法应该就可以满足要求了,具体的超时时间可以根据情况来设置。这也是我根据IBM上介绍的“server
push”思路,来实现了其中的一种,也不知道有没有问题,还请大家多多赐教。

时间: 2024-11-07 09:34:01

利用Jquery实现http长连接(LongPoll) {转}的相关文章

利用Jquery实现http长连接(LongPoll)

参考:http://www.cnblogs.com/vagerent/archive/2010/02/05/1664450.html PS:为了满足 某些需要 实时请求的业务(PS:例如聊天室),我们可以通过多种技术实现, 其中建议大家使用长链接(PS:减少带宽)或者服务器主动推送技术(例如:Signalr). 这里只对长链接进行陈述,参考上面的博客写了个Demo如下(复制到项目里面可以直接运行): 新建一个 Default.aspx <%@ Page Language="C#"

关于长连接的两篇文章

Web 通信 之 长连接.长轮询(long polling) http://www.cnblogs.com/hoojo/p/longPolling_comet_jquery_iframe_ajax.html 利用Jquery实现http长连接(LongPoll) http://www.cnblogs.com/vagerent/archive/2010/02/05/1664450.html

利用Ajax实现长连接(模拟推送,半长连接)

很多程序都可以通过socket来实现长连接,实现消息的即时推送.但由于http请求一般都是短连接,一次请求结束,就会断开与服务器的连接,服务器不能主动推送数据到客户端,而只能由客户端发起请求,但有些时候,需要在web上实现即时的消息传输,比如即时聊天.股票动态信息等. 在Ajax技术被发掘以前,在网页上实现无刷新的即时聊天,似乎是很困难的事情,但由于Ajax技术的兴起,人们可以进一步来挖掘它的潜力了,象gmail.google gtalk的网页版,都是Ajax长连接的重要应用,目前很多网站可能都

转:基于ASP.NET的Comet长连接技术解析

原文来自于: Comet技术原理 来自维基百科:Comet是一种用于web的技术,能使服务器能实时地将更新的信息传送到客户端,而无须客户端发出请求,目前有两种实现方式,长轮询和iframe流. 简单的说是一种基于现有Http协议基础上的长轮询技术,之所有会产生这种技术的主要原因是Http协议是无状态的所以客户端和服务端之间没办法建立起一套长时间的连接.比如我们要做一个聊天室,在Web环境下我们通常不能从服务端推送消息到浏览器里,而只能通过每个客户端不断的轮询服务器,以获取最新的消息,这样一来效率

HTTP的长连接和短连接——Node上的测试

    本文主要从实践角度介绍长.短连接在TCP层面的表现,借助Node.JS搭建后台服务,使用WinHTTP.Ajax做客户端请求测试,最后简单涉及WebSocket.     关键字:长连接.短连接.Node.JS.WebSocket. 一两年前,在理论上对长短连接做了学习,那时的技能以客户端为主,所以也止步于客户端和网络抓包,两年来后台技术渐有把握,打算从前到后的实践一遍.如对理论有不理解的,可以先google/百度 一下,或者看看这篇偏理论的介绍:HTTP的长连接和短连接. 1 短连接的

Web 通信 之 长连接、长轮询(long polling)(转载)

基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强了程序的实时性和交互性. 一.什么是长连接.长轮询? 用通俗易懂的话来说,就是客户端不停的向服务器发送请求以获取最新的数据信息.这里的“不停”其实是有停止的,只是我们人眼无法分辨是否停止,它只是一种快速的停下然后又立即开始连接而已. 二.长连接.长轮询的应用场景 长连接.长轮询一般应用与WebIM.ChatRoom和一些需要及时交互的网站应用中.其真实案例有:WebQQ

HTTP长连接实现“服务器推”的技术

HTTP长连接实现“服务器推”的技术快速入门及演示示例 在我的印象里HTTP是一种“无状态的协议”,也就是不知道以前请求的历史,无法保留上一次请求的结果.Cookie的诞生,弥补了这个不足,浏览器可以通过本地持久化请求数据来记录上次请求的环境.但这个没有根本上改变HTTP请求本身的这种“客户端请求服务器端相应”模式——客户端是主动的,而服务器是被动的.最近听说有“HTTP长连接”,去探索了一把,果然很有意思,能够实现“服务器推”的这种概念,也就是服务器是主动发送请求,客户端是被动接受请求.关于“

利用 jQuery UI 和 Ajax 创建可定制的 Web 界面

如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚至也整合了类似的功能.jQuery 库简化了此类复杂 JavaScript 交互的编写,随着 jQuery UI 的引入,这项功能得到了进一步的简化,该库以易于访问的 jQuery 插件的形式提供了常用用户界面类型. 本文介绍了如何利用 Ajax 和 jQuery UI 创建具有各种定制功能的高度可

Web 通信 之 长连接、长轮询(long polling)

基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强了程序的实时性和交互性. 一.什么是长连接.长轮询? 用通俗易懂的话来说,就是客户端不停的向服务器发送请求以获取最新的数据信息.这里的“不停”其实是有停止的,只是我们人眼无法分辨是否停止,它只是一种快速的停下然后又立即开始连接而已. 二.长连接.长轮询的应用场景 长连接.长轮询一般应用与WebIM.ChatRoom和一些需要及时交互的网站应用中.其真实案例有:WebQQ