java ajax长连接请求服务器数据

Servlet 3.0笔记之异步请求Comet推送长轮询(long polling)篇

Comet另一种形式为长轮询（long polling），客户端会与服务器建立一个持久的连接，直到服务器端有数据发送过来，服务器端断开，客户端处理完推送的数据，会再次发起一个持久的连接，循环往复。

和流（Streaming）区别主要在于，在一次长连接中，服务器端只推送一次，然后断开连接。

其实现形式大概可分文AJAX长轮询和JAVASCRIPT轮询两种。

AJAX方式请求长轮询

服务器端可以返回原始的数据，或格式化的JSON、XML、JAVASCRIPT信息，客户端可拥有更多的处理自由。在形式上和传统意义上的AJAX GET方式大致一样，只不过下一次的轮询需要等到上一次的轮询数据返回处理完方可进行。
这里给出客户端的小示范：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery 1.5 with long poll</title>
</head>
<body>
<div id="tip"></div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js"></script>
<script type="text/javascript">
$(function (){
 function log(resp){
  $("#tip").html("<b>" + resp + "</b>");
 }

 log("loading");

 // 去除缓存
    $.ajaxSetup({ cache: false });

 function initGet(){
  $.get("getNextTime")
    .success(function(resp){
   log(resp);
  }).error(function(){
   log("ERROR!");
  }).done(initGet);
 }

 initGet();
});
</script>
</body>
</html>

基于jQuery 1.5,事件链，比以往更简洁明了，尤其是在done方法中又一次调用自身，棒极了。
服务器端很简单，每1秒输出一次当前系统时间:

/**
 * 简单模拟每秒输出一次当前系统时间，精细到毫秒
 * 
 * @author yongboy
 * @date 2011-2-11
 * @version 1.0
 */
@WebServlet("/getNextTime")
public class GetNextTimeServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;

 protected void doGet(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {
  try {
   Thread.sleep(1000L);
  } catch (InterruptedException e) {
   e.printStackTrace();
  }

  response.setContentType("text/plain");
  PrintWriter out = response.getWriter();

  out.print(DateFormatUtils.format(System.currentTimeMillis(),
    "yyyy-MM-dd HH:mm:ss SSS"));
  out.flush();

  out.close();
 }
}

JAVASCRIPT标签轮询（Script tag long polling）

引用的JAVASCRIPT脚本文件是可以跨域的，再加上JSONP,更为强大了。
这里给出一个演示，实现功能类似上面。
客户端清单：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery 1.5 with JSONP FOR Comet</title>
</head>
<body>
<div id="tip"></div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js"></script>
<script type="text/javascript">
$(function (){
 function log(resp){
  $("#tip").html("<b>"   resp   "</b>");
 }

 log("loading");

 function jsonp(){
  $.getJSON('http://192.168.0.99:8080/servlet3/getNextTime2?callback=?').success(function(resp){
   log("now time : "   resp);
  }).done(jsonp);

  // 以下方式也是合法的
  /*
  $.getJSON('http://192.168.0.99:8080/servlet3/getNextTime2?callback=?',function(date){
   log(date);
  }).done(jsonp);
  */
 }

 jsonp();
});
</script>
</body>
</html>

服务器端清单:

/**
 * JSONP形式简单模拟每秒输出一次当前系统时间，精细到毫秒
 * @author yongboy
 * @date 2011-2-11
 * @version 1.0
 */
@WebServlet("/getNextTime2")
public class GetNextTimeServlet2 extends HttpServlet {
 private static final long serialVersionUID = 1L;

 protected void doGet(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {
  try {
   Thread.sleep(1000L);
  } catch (InterruptedException e) {
   e.printStackTrace();
  }

  String callback = request.getParameter("callback");

  if(StringUtils.isBlank(callback)){
   callback = "showResult";
  }

  PrintWriter out = response.getWriter();

  StringBuilder resultBuilder = new StringBuilder();
  resultBuilder
    .append(callback)
    .append("('")
    .append(DateFormatUtils.format(System.currentTimeMillis(), "yyyy-MM-dd HH:mm:ss SSS"))
    .append("');");

  out.print(resultBuilder);
  out.flush();

  out.close();
 }
}

每次请求时，都会在HTML头部生成一个JS网络地址(实现跨域):

http://192.168.0.99:8080/servlet3/getNextTime2?callback=jQuery150832738454006945_1297761629067&_=1297761631777

我们不用指定，jquery会自动生成一个随机的函数名。
请求上面地址服务器端在有新的数据输出时，生成的回调JS函数：

jQuery150832738454006945_1297761629067('2011-02-15 17:20:33 921');

从下面截图可以看到这一点。

生成相应内容：

不过，长连接情况下，浏览器认为当前JS文件还没有加载完，会一直显示正在加载中。

上面的JSONP例子太简单，服务器和客户端的连接等待时间不过1秒钟时间左右，若在真实环境下，需要设置一个超时时间。

以往可能会有人告诉你，在客户端需要设置一个超时时间，若指定期限内服务器没有数据返回，则需要通知服务器端程序，断开连接，然后自身再次发起一个新的连接请求。

但在Servlet 3.0 异步连接的规范中，我们就不用那么劳心费神，那般麻烦了。掉换个儿，让服务器端通知客户端超时啦，赶紧重新连接啊。

在前面几篇博客中，演示了一个伪真实场景，博客主添加博客，然后主动以流形式推送给终端用户。这里采用JSONP跨域长轮询连接形式。

客户端：

<html>
<head>
<title>Comet JSONP %u63A8%u9001%u6D4B%u8BD5</title>
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<meta name="author" content="yongboy@gmail.com"/>
<meta name="keywords" content="servlet3, comet, ajax"/>
<meta name="description" content=""/>
<link type="text/css" rel="stylesheet" href="css/main.css"/>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js"></script>
<script type="text/javascript">
String.prototype.template=function(){
    var args=arguments;
    return this.replace(/\{(\d )\}/g, function(m, i){
        return args[i];
    });
}
var html = '<div class="logDiv">'
   '<div class="contentDiv">{0}</div>'
      '<div class="tipDiv">last date : {1}</div>'
      '<div class="clear">&nbsp;</div>'
      '</div>';

function showContent(json) {
 $("#showDiv").prepend(html.template(json.content, json.date));
}
function initJsonp(){
 $.getJSON('http://192.168.0.99/servlet3/getjsonpnew?callback=?').success(function(json){
  if(json.state == 1){
   showContent(json);
  }else{
   initJsonp();
   return;
  }
 }).done(initJsonp)
   .error(function(){
  alert("error!");
 });
}
$(function (){
 initJsonp();
});
</script>
</head>
<body style="margin: 0; overflow: hidden">
<div id="showDiv" class="inputStyle">loading ...</div>
</body>
</html>

服务器端接收长轮询连接请求：

/**
 * JSONP获取最新信息
 * 
 * @author yongboy
 * @date 2011-2-17
 * @version 1.0
 */
@WebServlet(urlPatterns = "/getjsonpnew", asyncSupported = true)
public class GetNewJsonpBlogPosts extends HttpServlet {
 private static final long serialVersionUID = 565698895565656L;
 private static final Log log = LogFactory.getLog(GetNewJsonpBlogPosts.class);

 protected void doGet(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {
  response.setHeader("Cache-Control", "private");
  response.setHeader("Pragma", "no-cache");
  response.setHeader("Connection", "Keep-Alive");
  response.setHeader("Proxy-Connection", "Keep-Alive");
  response.setContentType("text/javascript;charset=UTF-8");
  response.setCharacterEncoding("UTF-8");

  String timeoutStr = request.getParameter("timeout");

  long timeout;

  if (StringUtils.isNumeric(timeoutStr)) {
   timeout = Long.parseLong(timeoutStr);
  } else {
   // 设置1分钟
   timeout = 1L * 60L * 1000L;
  }

  log.info("new request ...");
  final HttpServletResponse finalResponse = response;
  final HttpServletRequest finalRequest = request;
  final AsyncContext ac = request.startAsync(request, finalResponse);
  // 设置成长久链接
  ac.setTimeout(timeout);
  ac.addListener(new AsyncListener() {
   public void onComplete(AsyncEvent event) throws IOException {
    log.info("onComplete Event!");
    NewBlogJsonpListener.ASYNC_AJAX_QUEUE.remove(ac);
   }

   public void onTimeout(AsyncEvent event) throws IOException {
    // 尝试向客户端发送超时方法调用，客户端会再次请求/blogpush，周而复始
    log.info("onTimeout Event!");

    // 通知客户端再次进行重连
    final PrintWriter writer = finalResponse.getWriter();

    String outString = finalRequest.getParameter("callback")
    + "({state:0,error:'timeout is now'});";
    writer.println(outString);
    writer.flush();
    writer.close();

    NewBlogJsonpListener.ASYNC_AJAX_QUEUE.remove(ac);
   }

   public void onError(AsyncEvent event) throws IOException {
    log.info("onError Event!");
    NewBlogJsonpListener.ASYNC_AJAX_QUEUE.remove(ac);
   }

   public void onStartAsync(AsyncEvent event) throws IOException {
    log.info("onStartAsync Event!");
   }
  });

  NewBlogJsonpListener.ASYNC_AJAX_QUEUE.add(ac);
 }
}

很显然，在有博客数据到达时，会通知到已注册的客户端。

注意，推送数据之后，需要调用当前的异步上下文complete()函数:

/**
 * 监听器单独线程推送到客户端
 * 
 * @author yongboy
 * @date 2011-2-17
 * @version 1.0
 */
@WebListener
public class NewBlogJsonpListener implements ServletContextListener {
 private static final Log log = LogFactory.getLog(NewBlogListener.class);
 public static final BlockingQueue BLOG_QUEUE = new LinkedBlockingQueue();
 public static final Queue ASYNC_AJAX_QUEUE = new ConcurrentLinkedQueue();

 public void contextDestroyed(ServletContextEvent arg0) {
  log.info("context is destroyed!");
 }

 public void contextInitialized(ServletContextEvent servletContextEvent) {
  log.info("context is initialized!");
  // 启动一个线程处理线程队列
  new Thread(runnable).start();
 }

 private Runnable runnable = new Runnable() {
  public void run() {
   boolean isDone = true;

   while (isDone) {
    if (!BLOG_QUEUE.isEmpty()) {
     try {
      log.info("ASYNC_AJAX_QUEUE size : "
        + ASYNC_AJAX_QUEUE.size());
      MicBlog blog = BLOG_QUEUE.take();

      if (ASYNC_AJAX_QUEUE.isEmpty()) {
       continue;
      }

      String targetJSON = buildJsonString(blog);

      for (AsyncContext context : ASYNC_AJAX_QUEUE) {
       if (context == null) {
        log.info("the current ASYNC_AJAX_QUEUE is null now !");
        continue;
       }
       log.info(context.toString());
       PrintWriter out = context.getResponse().getWriter();

       if (out == null) {
        log.info("the current ASYNC_AJAX_QUEUE's PrintWriter is null !");
        continue;
       }

       out.println(context.getRequest().getParameter(
         "callback")
         + "(" + targetJSON + ");");
       out.flush();

       // 通知，执行完成函数
       context.complete();
      }
     } catch (Exception e) {
      e.printStackTrace();
      isDone = false;
     }
    }
   }
  }
 };

 private static String buildJsonString(MicBlog blog) {
  Map<string, object=""> info = new HashMap<string, object="">();
  info.put("state", 1);
  info.put("content", blog.getContent());
  info.put("date",
    DateFormatUtils.format(blog.getPubDate(), "HH:mm:ss SSS"));

  JSONObject jsonObject = JSONObject.fromObject(info);

  return jsonObject.toString();
 }
}

长连接的超时时间，有人贴切的形容为“心跳频率”，联动着两端，需要根据环境设定具体值。

JSONP方式无论是轮询还是长轮询，都是可以很容易把目标程序融合到第三方网站，当前的个人主页、博客等很多小挂件大多也是采用这种形式进行跨域获取数据的。

java ajax长连接请求服务器数据的更多相关文章

Ajax长连接和SignalR（刷新客户端数据）的区别
ajax实现长连接 <%@ page language="java" import="java.util.*" pageEncoding=" ...
本地主机作服务器解决AJAX跨域请求访问数据的方法
近几天学到ajax,想测试一下ajax样例,由于之前在阿里租用的服务器过期了,于是想着让本地主机既做服务器又做客户端,只是简单地测试,应该还行. 于是,下载了xampp,下载网址http://www. ...
Ajax在jQuery中的应用（加载异步数据、请求服务器数据）
加载异步数据 jQuery中的load()方法 load(url,[data],[callback]) url:被加载的页面地址 [data]:可选项表示发送到服务器的数据,其格式为 key/valu ...
Comet：基于 HTTP 长连接的“服务器推”技术解析
原文链接:http://www.cnblogs.com/deepleo/p/Comet.html 一.背景介绍传统web请求,是显式的向服务器发送http Request,拿到Response后显示 ...
Comet：基于 HTTP 长连接的“服务器推”技术
“服务器推”技术的应用请访问 Ajax 技术资源中心,这是有关 Ajax 编程模型信息的一站式中心,包括很多文档.教程.论坛.blog.wiki 和新闻.任何 Ajax 的新信息都能在这里找到. c ...
转载：Comet：基于 HTTP 长连接的“服务器推”技术
转自:http://www.ibm.com/developerworks/cn/web/wa-lo-comet/ 很多应用譬如监控.即时通信.即时报价系统都需要将后台发生的变化实时传送到客户端而无须客 ...
[转载] Comet：基于 HTTP 长连接的“服务器推”技术
转载自http://www.ibm.com/developerworks/cn/web/wa-lo-comet/ “服务器推”技术的应用传统模式的 Web 系统以客户端发出请求.服务器端响应的方式工 ...
Comet：基于 HTTP 长连接的“服务器推”技术(转载)
“服务器推”技术的应用传统模式的 Web 系统以客户端发出请求.服务器端响应的方式工作.这种方式并不能满足很多现实应用的需求,譬如: 监控系统:后台硬件热插拔.LED.温度.电压发生变化: 即时通信 ...
【转】Comet：基于 HTTP 长连接的“服务器推”技术
原文链接:http://www.ibm.com/developerworks/cn/web/wa-lo-comet/ 很多应用譬如监控.即时通信.即时报价系统都需要将后台发生的变化实时传送到客户端而无 ...

随机推荐

.net API跨域
在webconfig中的节点 <system.webServer> </system.webServer> 下添加 <httpProtocol><custom ...
48 git使用
0 引言 git/github是当前最好的代码版本管理和协同工作工具.最近我终于用上了这一先进工具,撒花撒花! # 先把大神廖雪峰的链接献上https://www.liaoxuefeng.com/wi ...
bs4修改html文件和保存
一.需求将2个html文件保存到本地浏览器,例如: A页面(我的博客主页) B页面(爬虫四大金刚) 然后将A页面中的爬虫链接,链接的a标签中的href属性修改成本地B页面的地址,实现在本地浏览A页面 ...
NX二次开发-UFUN遍历函数UF_OBJ_cycle_objs_in_part
NX11+VS2013 #include <uf.h> #include <uf_obj.h> #include <uf_modl.h> #include < ...
微信-小程序-开发文档-服务端-模板消息：templateMessage.getTemplateLibraryList
ylbtech-微信-小程序-开发文档-服务端-模板消息:templateMessage.getTemplateLibraryList 1.返回顶部 1. templateMessage.getTem ...
UVA 10382 Watering Grass 贪心+区间覆盖问题
n sprinklers are installed in a horizontal strip of grass l meters long and w meters wide. Each spri ...
19-Ubuntu-文件和目录命令-删除文件和目录-rm
rm 删除文件或目录注:使用rm命令要小心,因为文件删除后不能恢复.不会放在垃圾箱里,直接从磁盘删除. 选项含义 -f 强制删除文件,无需提示.不能删除目录! -r 递归的删除目录下的内容,删除文 ...
2-MySQL高级-事务-基本概念(1)
事务 1. 为什么要有事务事务广泛的运用于订单系统.银行系统等多种场景例如: A用户和B用户是银行的储户,现在A要给B转账500元,那么需要做以下几件事: 检查A的账户余额>500元: A ...
UVA 12304 /// 圆的综合题圆的模板
题目大意: ①给出三角形三个点,求三角形外接圆,求外接圆的圆心和半径. ②给出三角形三个点,求三角形内接圆,求内接圆的圆心和半径. ③给出一个圆,和一个点,求过该点的圆的切线与x轴的夹角(0<= ...
css3的选择器
先来做一下准备工作页面的效果: 看到上面的框框了吗?我们就是通过给这些框框添加背景色的方式,来让大家,了解css3的选择器的效果,下面正式开始: 关联选择器 E1~E2 选择 E1 后面的兄弟 E2 ...

java ajax长连接请求服务器数据

Servlet 3.0笔记之异步请求Comet推送长轮询(long polling)篇

java ajax长连接请求服务器数据的更多相关文章

随机推荐

热门专题