聂永的博客

记录工作/学习的点点滴滴。

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

上篇文章有些东西言犹未尽,这里补遗,使之理解更为全面些。
还多亏了jQuery,提供了JSONP请求的方法:
$.getJSON('http://192.168.0.99/servlet3/getjsonpnew?callback=?')
指定需要回调的参数名callback,但其值使用一问号替代,作为占位符,jQuery会自动贴心的生成一个随机的调用函数名,服务器端的生成结果:
jQuery150832738454006945_1297761629067('2011-02-15 17:20:33 921');
我们直接在success函数中直接获取传入的值,无须担心那个看起来怪怪的回调函数名。JSONP的原理,在页面头部区动态产生一个JS文件引用(有人称为动态标签引用)。
<script src="http://192.168.0.99:8080/servlet3/getNextTime2?callback=jQuery150832738454006945_1297761629067&_=1297761631777"/>
虽然这一切看起来很好,很贴心,但也存在着不少问题:
  1. 无法直接显示指定回调函数名完美主义者可能无法忍受长长的、怪怪的函数名;当然了,可以定制的东西,总是让人很舒心
  2. 在长连接情况下,浏览器会一直显示正在加载中图示jQuery生成的JSONP JS文件在长连接情况下,会一直加载中,可能会影响到良好的用户体验,也会让前端UI体验师比较闹心。
很显然jQuery无法满足我们更高的实际要求。怎么办,请出jQuery-JSONP组件,基本上可以满足我们的要求。服务器端代码没有什么变化,有所变化的是客户端代码。
<html>
<head>
<title>Comet JSONP TEST</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" src="js/jquery.jsonp-2.1.4.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));
}
var jsonpUrl = "http://192.168.0.99/servlet3/getjsonpnew";
function initJsonp(){
$.jsonp({
url: jsonpUrl,
callbackParameter: 'callback',
callback : 'yongboy', //eg:http://192.168.0.99/servlet3/getjsonpnew?callback=yongboy&_1297934909500=
success: function(json) {
if(json.state == 1){
showContent(json);
}
initJsonp();
},error: function(data) {
}
});
}
$(function (){
// 为了兼容opera浏览器,设置为20秒延时时间(我本地测试若大于20s,可能出现连接中断问题)
if($.browser.opera){
jsonpUrl = "?timeout=20000";
}

initJsonp();
});
</script>
</head>
<body style="margin: 0; overflow: hidden">
<div id="showDiv" class="inputStyle">loading ...</div>
</body>
</html>
嗯,jQuery-JSONP组件提供了更为灵活的jsonp参数配置:
  • 指定回调函数名
  • 提供错误处理函数,兼容opera
  • 在目前大部分浏览器中没有加载进度显示

经测试:
  1. IE
    页面不刷新,效果很满意。jQuery-JSONP源代码:
         if ( browser.msie ) {

    script.event = STR_ONCLICK;
    script.htmlFor = script.id;
    script[ STR_ONREADYSTATECHANGE ] = function() {
    /loaded|complete/.test( script.readyState ) && callback();
    };

    // All others: standard handlers
    }
    使用了IE浏览器onreadystatechange加载事件等特性。
  2. Firefox
          script[ STR_ONERROR ] = script[ STR_ONLOAD ] = callback;

    browser.opera ?

    // Opera: onerror is not called, use synchronized script execution
    ( ( scriptAfter = $( STR_SCRIPT_TAG )[ 0 ] ).text = "jQuery('#" + script.id + "')[0]." + STR_ONERROR + "()" )

    // Firefox: set script as async to avoid blocking scripts (3.6+ only)
    : script[ STR_ASYNC ] = STR_ASYNC;
    看来我当前浏览器中3.6版本的火狐支持脚本文件async属性,非阻塞加载,再添加上onload,onerror事件支持,页面不刷新显示,也不难办到了。
  3. Chrome
    很不错,当前作为主力的Chrome浏览器也支持脚本文件的async属性,效果同3.6版本火狐。
  4. Opera
    情况很糟糕,在Windows Opera 11.01以及Ubuntu Opera 11.00下测试,长轮询时间若长于20秒,则会出现连接中断情况。样例中在Opear浏览器下设置长轮询过期时间为20s。
    浏览器会一直显示为正在加载中的状态。
    Opera浏览器中脚本加载不支持onerror事件,只能使用阻塞式的脚本加载机制用以处理有可能发生的异常。
    有关阻塞方式实现JSONP,延伸阅读:
    Comet (long polling) for all browsers using ScriptCommunicator
  5. Safari
    既然同为一个内核的谷歌浏览器也支持脚本文件的async属性,同样的异步加载也是水到渠成的了。
有关浏览器脚本异步加载机制,可进阶阅读:非阻塞式JavaScript脚本介绍

posted on 2011-02-19 10:19 nieyong 阅读(2284) 评论(0)  编辑  收藏 所属分类: Servlet3


只有注册用户登录后才能发表评论。


网站导航:
 

公告

所有文章皆为原创,若转载请标明出处,谢谢~

新浪微博,欢迎关注:

导航

<2011年2月>
303112345
6789101112
13141516171819
20212223242526
272812345
6789101112

统计

常用链接

留言簿(58)

随笔分类(130)

随笔档案(151)

个人收藏

最新随笔

搜索

最新评论

阅读排行榜

评论排行榜