JSONP在IPTV门户系统中的应用研究

【中心议题】

•        *对Ajax应用中常用的三种数据交换方式XML、JSON和JSONP进行讨论
•        *阐述JSONP在IPTV门户系统中的应用

【解决方案】

•        * IPTV门户系统为机顶盒终端用户提供服务的统一入口
•        * JSONP相对于XML和JSON,代码编写简单,浏览器兼容性强,而且用户的响应时间更短

1引言

传统的Web应用采用的是同步交互过程,即浏览器提交请求后,必须等待服务器处理完请求后把响应返回给客户端,经过浏览器的解析和处理后才展示给用户。从浏览器提交请求到解

析完毕前的这段时间内,浏览器处于“假死”状态,用户体验非常不好。Ajax改变了传统的Web交互方式,通过浏览器内置对象XMLHttpRequest,实现浏览器和服务器的异步交互,并通过JavaScript动态更新页面的DOM结构来处理服务器端的响应,既增强了用户体验,又因不必要请求整个页面而减少带宽消耗。

在Ajax实现架构中,通常有三种可用的数据交换方式:XML、JSON和JSONP。本文首先对三种数据交换方式进行讨论;然后,描述了JSONP的工作流程,并重点阐述JSONP在IPTV门

户系统中的应用;最后,通过实验得出在请求相同信息量的情况下,JSONP比XML和JSON具有更短的响应时间。

2 Ajax应用中常用数据交换方式

2.1 XML

XML是一种简单、灵活、跨平台和跨语言的文本格式。但是在Ajax应用中,不同浏览器对XMLHttpRequest对象和DOM的实现不尽相同,导致客户端需要的解析方法和访问方式不同。为了兼容浏览器,使用XML作为交换格式往往导致代码复杂,开发效率低。

2.2 JSON

JSON是一种轻量级的数据交换格式,便于阅读和书写。JSON构建于两种结构:1)“名称/值”对的集合。此结构的常用形式是以“{”开始,“}”结束,每一个属性名和值间用“:”提示,属性术创新间用“,”分隔;2)值的有序列表。此格式开始于“[”,结束于“]”,值之间用“,”分隔。一个推荐位或广告位用JOSN格式表示如下:

‘{“recommend”:[{“poster”:”image/huamulan.png”,

“name”:”花木兰”,“href”:”vod/huamulan.html”}]}’

2.3 JSONP

JSONP构建于JSON之上,不过JSONP通过动态生成script标签来发送跨域请求,克服了Ajax应用中XMLHttpRequest对象由于浏览器的同源策略而不能进行跨域请求的限制。JSONP

依赖于一个回调函数,而且通过动态生成script标签来发送跨域请求,通过与服务器的交互,然后立即执行注册的回调函数,处理响应的JSON数据。

下节将详细分析该交换方式的工作流程。

3 JSONP工作流程

JSONP的工作流程如下:

1.在页面中注册一个JavaScript函数作为回调函数;

2.在响应用户触发对应的浏览器事件中,动态生成script元素,并设置其SRC属性。在设置其SRC属性时,需要把第1步中注册的回调函数名字作为参数附加到对应的URL后面;

3.服务器接收到请求后,解析请求的URL,得到回调函数名字,并以JSON格式生成请求需要的数据。将封装好的JSON数据作为解析出来的回调函数的参数,按照JavaScript函数的格式组装成一段符合JavaScript语法的JavaScript文档,返回给浏览器;

4.因为HTTP头的content-type类型为“text/JavaScript”,浏览器在接收到第3步的响应后,立即调用第1步中注册的回调函数,进行处理和显示。图1显示了JSONP的具体工作流程。

4 JSONP在IPTV门户系统中的应用

IPTV门户系统,又称为“IPTV服务导航系统”,是为机顶盒终端用户提供服务的统一入口。IPTV系统所提供的各种业务的索引及导航都是通过其门户系统来完成的。IPTV门户系统

的界面与Web页面类似,一般都提供各类栏目菜单、按钮和链接等可供用户选择业务时直接点击的组件,其架构也采用B/S架构。

门户系统通常以栏目进行组织,栏目是树形结构,其叶子为频道或视频内容,如点播栏目下,包括最新上线、热点推荐、人气排行和即将下线的视频内容,还包括和对应栏目相关联的推荐

节目内容等。同时,门户系统还提供给用户自定义的搜索功能。

通过这种良好的导航机制和便利的搜索机制,使用户能够方便快捷的找到自己关心的节目和内容。

就门户系统实现而言,可以分为页面模板和页面数据。页面模版包括对应的元素布局、背景,页面数据部分包括对应的栏目信息以及具体的节目内容信息。本系统实现页面模版和页面数据分离。首先加载框架页面和一级栏目给用户,然后通过JSONP请求二级栏目信息、对应节目详细介绍、推荐位上节目详细信息和广告位上节目详细信息。对一个点播节目,其数据信息包括节目名字、节目的时长、导演、主演、快照以及节目对应的链接等。

图2描述了本系统的具体架构和JSONP的交互过程。

本节下面部分以本IPTV门户系统首页的推荐位为例说明JSONP在本系统中的应用。

在本IPTV门户系统中,首页有三个推荐位。推荐位的元数据包括推荐位对应节目内容的内容标识contentId、推荐位海报的服务器地址和路径、对应节目的名字、简介信息、导演、主

演、节目时长和此推荐位对应的广告图片等信息。其JSONP形式为:

displayRecommend({“contentId”:contentId,“poster”:”http://ImageServer/image/huamulan.png”,

“name”:”花木兰”,“content”:”木兰十八岁时,游牧民族犯境,军情紧急。木兰不忍年迈的父亲再上战场,便灌醉父亲,违抗军令,悄悄地替父从军。。。”,

“director”:”马楚成”,“actors”:”赵薇,陈坤,胡军,Vitas,房祖名。。。”,“time”:”119分钟”,

“advertisement”:”http://ImageServer/ad/hua-mulan_ad.png”});用户首页加载完成后,同时对应的回调函数displayRecom-mend(data){}也加载完毕。当用户遥控器焦点移动到对应的推荐位上时,执行initRecommend(contentId){}发送JSONP请求。

initRecommend(contentId){}

具体实现为

:initRecommend(contentId){varscript=document.createElement('script');script.type='text/javascript';script.id=contentId;

script.src=http://JsonPServer/initRecommend?ContentId=contentId&Type=1&callback=displayRecommend;

document.getElementsByTagName("head")[0].appendChild(script);}

JSONP服务器接收到请求后,根据请求的contentId和type值,查找缓存或数据库,构造对应type类型的JSON数据结构da-ta,然后结合URL参数中callback的值displayRecommend,返回给客户端的响应为:displayRecommend(data)。

客户端接收到响应后,立即执行displayRecommend(data){}函数,进行处理并更新DOM结构显示。由于动态生成script的次数比较多,在每次执行displayRecommend(data){}时,根据data

数据结构中的contentId字段,先删除对应Id为contentId的script标签,然后再进行处理。

从initRecommend(contentId){}的实现可以看出,JSONP方式下的跨域实现是直接通过script标签来发送跨域请求,相对于其他跨域方式更简单。不过,这种方式直接把页面暴露给请求的

第三方,只有在保证提供JSONP服务的第三方安全可信的条件下才可以用,否则就存在安全隐患。

5仿真实验

在实验中,选取一个推荐位的元数据信息作为文件中的一个节点,并在服务器分别生成了包含1、10、20、40、80、160、320、640和1280个推荐位的元数据信息的JSONP、JSON和XML文件。在IE6下测试了3种数据交换方式的响应时间。图3为实验结果图。

从图3可以看出,在文件中节点数目相同的情况下JSONP的响应时间要小于XML和JSON。相对XML和JSONJSONP直接把JSON格式的参数转化为JavaScript对象,省去了客户端解析的过程。同时,JSONP使用的参数是JSON格式相同节点数目的JSON文件比XML文件在大小上要小很多文件的传输时间比XML小。因而,JSONP兼有XML和JSO的优点。

6结束语

实践证明,JSONP相对于XML和JSON,代码编写简单,浏览器兼容性强,而且用户的响应时间更短,有比较好的用户体验不过,JSONP的一个缺点可能是跨域请求时的安全问题,因为请求的第三方可以通过JavaScript完全控制请求的页面,可能会导致一系列的攻击。随着JavaScript标准的推进,如果浏览器内置对JSON的解析或者实现类似JSONRequest对象,将是一个很好

的解决方案。下一步的研究工作是解决JSONP的跨域安全访问问题,实现一种基于JSONP的安全访问方法。

本文创新点:通过对Ajax应用中的三种响应方式XMLJSON和JSONP的研究和实验比较分析,得出了JSONP相对于XML和JSON具有更短的响应时间和更好的用户体验。