|
|
|
|
公众号矩阵

JSONP跨域原理和jQuery.getJSON用法

JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。本文主要介绍JSONP跨域原理,一起来看。

作者:jquery来源:HTML5论坛|2011-05-26 13:10

JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。JSON系统开发方法是一种典型的面向数据结构的分析和设计方法,以活动为中心,一连串的活动的顺序组合成一个完整的工作进程。

之所以会有跨域这个问题的产生根本原因是浏览器的同源策略限制,理解同源策略的限制同源策略是指阻止代码获得或者更改从另一个域名下获得的文件或者信息。也就是说我们的请求地址必须和当前网站的地指相同。同源策略通过隔离来实现对资源的保护。这个策略的历史非常悠久从Netscape Navigator 2.0时代就开始了。

解决这个限制的一个相对简单的办法就是在服务器端发送请求,服务器充当一个到达第三方资源的代理中继。虽然是用广泛但是这个方法却不够灵活。

另一个办法就是使用框架(frames),将第三方站点的资源包含进来,但是包含进来的资源同样要受到同源策略的限制。

有一个很巧妙的办法就是在页面中使用动态代码元素,代码的源指向服务地址并在自己的代码中加载数据。当这些代码加载执行的时候,同源策略就不会起到限制。但是如果代码试图下载文件的时候执行还是会失败,幸运的是,我们可以使用JSON(JavaScript Object Notation)来改进这个应用。

JSON和JSONP

与XML相比,JSON是一个轻量级的数据交换格式。JSON对于JavaScript开发人员充满魅力的原因在于JSON本身就是Javascript中的对象。

例如一个ticker对象

var ticker = {symbol:'IBM',price:100}

而JSON串就是 {symbol:'IBM',price:100}

这样我们就可以在函数的参数中传递JSON数据。我们很容易掌握在函数中使用动态的JSON参数数据,但是我们的目的并不是这个。

通过使我们的函数能够加载动态的JSON数据,我们就能够处理动态的数据,这项技术叫做 Dynamic Javascript Insertion。

我们看下面的例子:

index.html中

  1. <script type="text/javascript">  
  2. function showPrice(data){  
  3. alert("Symbol:" + data.symbol + ", Price:" + data.price);  
  4. }  
  5. var url = "ticker.js"//Outer JS URL  
  6. var script = document.createElement('script');  
  7. script.setAttribute('src', url);  
  8. //load javascript  
  9. document.getElementsByTagName('head')[0].appendChild(script);  
  10. </script>  
  11. ticker.js中  
  12. var data = {symbol:'IBM', price:100};  
  13. showPrice(data); 

上面的代码通过动态加入Javascript代码,来执行函数加载数据。

正如之前提到过的,同源策略对于动态插入的代码不适用。也就是你可以从不同的域中加载代码,来执行在他们代码中的JSON数据。

这就是JSONP(JSON with Padding)。注意,使用这种方法时,你必须在页面中定义回调函数,就像上例中的showPrice一样。

我们通常所说的JSONP服务(远程JSON服务),实际上就是一种扩展的支持在用户定义函数中包含返回数据的能力。这种方法依赖于必须接受一个回调函数的名字作为参数。

然后执行这个函数,处理JSON数据,并显示在客户页面上。

JQuery的JSONP支持

从JQery 1.2以后,就开始支持JSONP的调用。在另外的一个域名中指定好回调函数名称,你就可以用下面的形式来就加载JSON数据。

url?callback=?

示例:

  1. jQuery.getJSON(url + "&callbak=?"function(data)  
  2. {  
  3. alert("Symbol:" + data.symbol + ", Price:" + data.price);  
  4. }); 

jquery会在window对象中加载一个全局的函数,当代码插入时函数执行,执行完毕后就会被移除。同时jquery还对非跨域的请求进行了优化,如果这个请求是在同一个域名下那么他就会像正常的Ajax请求一样工作。

上例中我们在动态插入到页面的代码中使用了静态的json数据,虽然完成了依次JSONP返回,但仍不是JSONP服务,因为不支持在URL中定义回调函数名称。下面是一个将其变成JSONP服务的一个方法

服务器端使用PHP。

首先我们来定义接口的规范,就像这样:http://www.mydomain.com/jsonp/ticker?symbol=IBM&amp;callback=showPrice
symbol是请求条件,callback是回调函数名称。

在页面文件中,我们使用JQuery的支持:

  1. //JQuery JSONP Support  
  2. var url = "http://www.mydomain.com/api/suggest.php?symbol=IBM&callback=?";  
  3. jQuery.getJSON(url, function(data){  
  4. alert("Symbol:" + data.symbol + ", Price:" + data.price);  
  5. }); 

在suggest.php中

  1. $jsondata = "{symbol:'IBM', price:120}";  
  2. echo $_GET['callback'].'('.$jsondata.')'

再举个.NET webservice 的例子

客户端

  1. $.getJSON(  
  2. "http://192.168.0.66/services/WebService1.asmx/ws?callback=?",  
  3. { name: "ff", time: "2pm" },  
  4. function(data) { alert(decodeURI(data.msg)) }  
  5. ); 

服务器端

  1. [WebMethod]  
  2. public void ws(string name,string time) {  
  3. HttpRequest Request = HttpContext.Current.Request;  
  4. string callback = Request["callback"];  
  5. HttpResponse Response = HttpContext.Current.Response;  
  6. Response.Write(callback + "({msg:'this is"+name+"jsonp'})");  
  7. Response.End();  

现在,如果我们想制作一些mashup,或者将第三方的资源整合到一个页面中,我们就很容易想到JSONP的解决方法了。

注意:

JSONP是一个非常强大的构建mashp的方法,可是不是一个解决跨域访问问题的***药。它也有一些缺点:

***也是最重要的:JSONP不提供错误处理。如果动态插入的代码正常运行,你可以得到返回,但是如果失败了,那么什么都不会发生。你无法获得一个404的错误,也不能取消这个请求。

另外一个重要的缺点是如果使用了不信任的服务会造成很大的安全隐患。

【编辑推荐】

  1. Jackson框架轻易转换JSON
  2. 在PHP语言中使用JSON
  3. 一个JSON实例:jQuery解析JSON数据
  4. 理解JSON:3分钟课程轻松搞定
  5. 用jquery解析JSON数据的方法
【责任编辑:QiHappy TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

16招轻松掌握PPT技巧

16招轻松掌握PPT技巧

GET职场加薪技能
共16章 | 晒书包

289人订阅学习

20个局域网建设改造案例

20个局域网建设改造案例

网络搭建技巧
共20章 | 捷哥CCIE

645人订阅学习

WOT2019全球人工智能技术峰会

WOT2019全球人工智能技术峰会

通用技术、应用领域、企业赋能三大章节,13大技术专场,60+国内外一线人工智能精英大咖站台,分享人工智能的平台工具、算法模型、语音视觉等技术主题,助力人工智能落地。
共50章 | WOT峰会

0人订阅学习

读 书 +更多

Java Web标签应用开发

Java Web程序员直接在JSP页面中书写Java代码的做法,使得页面中混杂有JavaScript、HTML、Java等多种语言的程序代码,可读性差,可复用性也...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客