网页小Widget应用之数据绑定新方式：JSONP

所谓JSONP，是跨域的一种访问方式，其特点在于比较方便地运行第三方的请求会话来进行跨域。在跨域这一点上，可以说是毫无顾忌的。跨域（Cross-Domain）在网络安全眼中可不是什么客气的行为。利弊兼有之，弄不好的话既不能为第三方提供访问数据的服务，又暴露了更多的安全漏洞，严重的还会引狼入室。一般的WebService中，支持JSON的还比较少，多数采用XML文档作为答应结果的格式文档。但是我们一方面知道，结合Script标签的src的自由性，却有无比的想象空间。那么能不能理由<script src="XXX">这个自由的触手去触碰任意一个角落的WebService呢？能，，不过限定采用的格式只能是JSON格式！

既然能够可靠的跨域，那么要求变换另外一个载体格式也是情理之中的，正所谓“鱼和熊掌不可兼得”，况且JSON不一定见得凑合不上。一些WebService供应商还是愿意使用JSON作为可选格式的，这样我们的浏览器有一次变为强大的客户端了，呵呵暗笑~是不是有点单纯式的浅薄呢~。

打开Ext.ux.JSONP的源码 ， 与标准库的Ext.data.ScriptProxy的实现如出一辙。使用方法如例子 :

Ext.ux.JSONP.request('http://api.flickr.com/services/feeds/photos_public.gne', { callbackKey: 'jsoncallback', params: { format: 'json', tags: Ext.fly('search-value').dom.value, tagmode: 'all', lang: 'en-us' }, callback: updateResults });

这个例子是用户输入几个关键字，然后让Flicker查询相关的图片。request()方法第一个参数是WebService的地址，当前就是Flicker向公众公开的API地址。我们声明格式是params.foamt:jspon，提交的参数是params.tags的输入内容。Flicker API答应请求后，将结构返回浏览器客户端，即updateResults的函数中处理，列出查询的结果。点击图片打开例子演示。

可以说，这时候客户端就是Flicker的“马甲”，使用Flicker的服务，允许让用户自由地整合——用时下流行的Bizzword说，便是Mashup。

我们看看一个更复杂的进阶例子，演示地址在这儿 。它是有前面Ext Core的几个例子（Menu + Flickr JSONP + Carousel + Lightbox）所组成的，正是一个很好的示范例子（点击图片打开例子）。

 

跨域，是为“同源策略”之反动。客户端的访问权限渐松，方便了爱好浏览器编程的人，所以也就诞生了JSONP（JSON with Padding）。