网页小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)。

时间: 2024-09-24 11:19:45

网页小Widget应用之数据绑定新方式:JSONP的相关文章

网页小 Widget 应用之 Lightbox 图片告示

现在开始谈谈 Ext JS Core,有关网页 Widget 的应用. 首先是经典的 Lightbox 效果(单击我进入演示).Ext.ux.Lightbox 支持两种方式的登记(register()),一种是单张的图片登记的,无须多说:另外一种是批量的,就是有"上一张"/"下一张"的效果,供用户前进或者后退.应该说,这两种方式已经满足了一般 Lightbox 效果的要求,而且图片出现的时候带有动画效果,让用户有比较活泼的感觉. Ext.ux.Lightbox.re

网页小Widget应用之Carousel、Menu和Tabs(下)

三.Menu 咦!?Menu咱们不是讲过了吗?是的,Menu之前的实现是非常简单的一种,--作为较"专业"的Widget,Core还是有必要重新实现一个Menu Widget,所以送到你手上的就有这个Ext.ux.Menu.具体说,那种简单的"菜单"只是较快速地做出类似的效果,适合于某个页面的URL跳转,不够灵活,难以适合在项目中使用,比如当前架构要求的"单页面程序(One Page, One Application)",明显菜单应该可以登记事件

网页小 Widget 应用之 Carousel、Menu 和 Tabs(上)

介绍 Wdiget 之前,我想说说一个关于摘取网页的小插曲.之前我为大家介绍过摘取网页的好工具,ScrapBook .ScrapBook 在处理纯视觉的页面,也就是 CSS/HTML 的时候,表现较为满意,只不过在选择下载"JavaScript",就有那么一点力不从心了,--这不,人家也在上面说了"JavaScript may cause some problems".的确,我使用 ScrapBook 的时候真是会碰到一些页面渲染不正确的问题.那,有没有比较好的工具

网页小 Widget 应用之 extjs.com 特效介绍篇

说到这儿,便想起刚学网页的时候,使用 Dreamweaver 的一个按钮翻转的 JS,那是很典型的网页效果,说出函数名字来大伙还记得吗?--MM_preloadImages('images/2.jpg').MM_swapImage('rotator','','images/2.jpg',1)  呵呵.同样我们也可以在 Ext Core 之中轻松实现,这部分内容放在本文第三小节中为大家介绍.Update 2010.1.2 在自家页面上使用自己的库,自然不是一件稀奇的事,而且 extjs.com 的

CSS网页制作:各式各样的按钮制作方式

文章简介:CSS网页制作:各式各样的按钮制作方式. 按钮整理网页中通过链接来实现页面的跳转,链接的重要表现形式就是按钮将各式各样的按钮制作方式整理一下. 1,网页中默认的按钮(如表单中的按钮,下拉框,单选按钮,多选按钮,上传按钮等) 2,css基本样式制作的按钮(如添加边框,背景色等) 3,图片制作的按钮a,按钮形状+文字一起的图片按钮b,只有按钮形状,通过html加文字c,各种图标按钮(不是按钮的形状,但有按钮功能)d,两张图片拼接的按钮(一般处理圆角) 4,纯css3样式按钮(圆角,阴影(内

网络盗版传播新方式

摘要: 一纸<关于加强网络著作权保护>的提案,将中国互联网视频网站一直存在的盗版问题再度放在了镁光灯下. 上述提案提交者全国政协委员.中国作家协会副主席.国务院参事张抗抗在 一纸<关于加强网络著作权保护>的提案,将中国互联网视频网站一直存在的盗版问题再度放在了镁光灯下. 上述提案提交者--全国政协委员.中国作家协会副主席.国务院参事张抗抗在接受采访时透露,根据有关部门统计,网络影视盗版率近九成. 张抗抗在提案中强调,应该建议司法机关降低网络侵权的立案门槛.实际上,近几年来随着网络视

DDoS攻击新玩法 暴雪上演营销新方式

本文讲的是 :  DDoS攻击新玩法 暴雪上演营销新方式  ,  [IT168 评论]格林尼治时间8月23日,暴雪宣布遭受大规模DDoS攻击,袭击目标为公司的游戏服务器,暴雪公司旗下的守望先锋,炉石传说,魔兽世界等热门网络游戏均受到了影响.有消息称此次攻击致使其在欧盟和美国地区的网络瘫痪,用户无法通过服务器进行验证登录和正常游戏. 本次DDoS攻击事件距离8月2日的DDoS攻击事件仅仅不到一个月的事件,一个月内连续遭受两次DDoS攻击,着实打脸.但奇怪的是本次DDoS攻击事件发生后并没有任何组织

网络电话全民亲情祝福 中秋团圆新方式

对于许许多多的中国家庭和越来越忙碌的朋友们而言,已经快速如期而至的一年一度中秋佳节却不得不面对尴尬:一方面中秋节是国内最大和最为传统的团圆节日之一,另一方面中秋节又是只比普通双休日多一天的缩小版"长假",因而一句"中秋合家团圆"往往会成为不少家庭和朋友们的奢望.在外独自打拼的年轻人也纷纷坦言,如果回家过中秋节,光在路上奔波的时间可能就需要整整2天,车马劳顿太花钱不说,影响节后工作毕竟不是小事情! 其实每年只有一次中秋节,家中的老人和小孩都期盼着家人能和他们一起&qu

微软TechFest展示新用户界面 人机交互新方式

微软举办的TechFest本周登场,虽然今年不开放媒体采访,但微软将利用这场内部年度技术成果展宣扬人与电脑互动的新方式.有些相关产品已经上市,例如Windows 7的多点触控(multitouch)功能,其他产品也将快要推出了,例如http://www.aliyun.com/zixun/aggregation/3022.html">Project Natal Xbox附加元件(add-on).但微软认为这些只是起步而已,未来会有更多新的技术面世,彻底改变人机交互的方式. 查看原图(大图)