Asynchronous JavaScript and XML (Ajax
) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用
不过,由于受到浏览器的限制,该方法不允许跨域通信。如果尝试从不同的域请求数据,会出现安全错误。如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误。但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办?
同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。这个浏览器策略很旧,从 Netscape Navigator 2.0 版本开始就存在。
克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据,并且让 Web
服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用,但它是不可伸缩的。另一种方式是使用框架要素在当前 Web
页面中创建新区域,并且使用
克服该限制更理想方法是在 Web 页面中插入动态脚本元素,该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的,因为同源策略不阻止动态脚本插入,并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档,就不会成功。幸运的是,通过添加 JavaScript Object Notation (JSON) 可以改进该技术。
1、什么是JSONP?
要了解JSONP,不得不提一下JSON,那么什么是JSON ?
JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
2、JSONP有什么用? 由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。
3、如何使用JSONP? 下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数。
HTML代码 (任一 ):
Html代码
或者
Html代码
JavaScript的链接,必须在function的下面。
服务端PHP代码 (services.php):
Php代码
如果将上述JS客户端代码用jQuery的方法来实现,也非常简单。
$.getJSON
客户端JS代码在jQuery中的实现方式1:
Js代码
客户端JS代码在jQuery中的实现方式2:
Js代码
客户端JS代码在jQuery中的实现方式3:
Js代码
其中 jsonCallback 是客户端注册的,获取
跨域服务器
上的json数据
后,回调的函数。
Js代码
Jsonp原理:
使用JSON的优点在于:
JSON也有一些劣势:
尽管如此,JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。
JSONP 是构建 mashup 的强大技术,但不幸的是,它并不是所有跨域通信需求的万灵药。它有一些缺陷,在提交开发资源之前必须认真考虑它们。
第一,也是最重要的一点,没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。(未来的 jQuery 版本可能有终止 JSONP 请求的特性)。
JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务,了解它能造成的威胁非常重要。
关联: 征服 Ajax 应用程序的安全威胁防止伪造跨站请求
评论
7 楼
天梯梦
2014-02-18
simpleDean 写道 hi,请教一下,服务端是个单纯的json数据的api,该如何操作呢。我按照你的方法写客户端html,发现取不到数据返回后不会调用callback函数,不知道数据去哪里了。 你可以打开firebug之后,再进行调试,看看有什么报错。
6 楼
simpleDean
2014-02-17
hi,请教一下,服务端是个单纯的json数据的api,该如何操作呢。我按照你的方法写客户端html,发现取不到数据返回后不会调用callback函数,不知道数据去哪里了。
5 楼
meigong568
2013-09-29
推荐看一下,这篇方法也不错
http://www./2013/01/jsonp-example-html/
4 楼
天梯梦
2013-03-07
wangpenghua 写道 请问如何跨域提交xlm格式的数据到服务器? 简单的方法就是通过curl获取页面内容,然后再解析xml,最后上传到数据库。
3 楼
wangpenghua
2013-03-06
请问如何跨域提交xlm格式的数据到服务器?
2 楼
天梯梦
2012-01-30
wxstar1986 写道 请问一下啊,我按照你用纯js的方法做了一遍,数据有返回,但是没有调用jsonpCallback 这个函数,请问这个是怎么回事呢 chrome jsonpCallback is not defined hi ,你是如何写的呢? 我测试了,chrome也没有问题。
1 楼
wxstar1986
2012-01-28
请问一下啊,我按照你用纯js的方法做了一遍,数据有返回,但是没有调用jsonpCallback 这个函数,请问这个是怎么回事呢 chrome jsonpCallback is not defined |
|