什么是JSONP

Asynchronous JavaScript and XML(Ajax)是目前 Web 开发关键技术之一,允许客户端 JavaScript 通过 HTTP 与服务器进行交互。

 

0

浏览器的安全模型规定了 XMLHttpRequest、frames 等必须在相同域名下才能进行通信。这就是所谓的“同源策略限制”。

 

为了 Web 应用的安全,同源策略并不是坏东西,但当我们真的需要请求其他域名下的数据时,这个策略确实造成了麻烦。

 

克服该限制的方法:

 

1、还是请求自己的服务器,让服务器做代理,把请求转发给真正的第三方服务器。这个方案的使用比较普遍,但一看上去就挺浪费的。

 

2、Flash。服务器上要部署一个 crossdomain.xml 文件,并将功能在 Flash 中开发,以达到跨域目的。但是要学习 AS 开发语言,成本较高。

 

3、通过 <script src=””> 标签,进行脚本插入。标签中的脚本源指向第三方服务器,因为同源策略并不阻止标签中引进第三方服务器的脚本。通过 JSON 可以改进该方案。缺点在于:难调试、被不信任的服务使用时会存在危险。

 

 

JSONP 属于第 3 种方案。

 

JSONP(JSON with Padding)是一个非官方的协议,他的实现方式简单,但需要一点服务端的配合。大致就是:让客户端决定要回调的 Javascript 函数名,在第三方服务端将 JSON 数据拼装到回调函数名中,返回的就是参数为 JSON 数据的函数调用脚本,浏览器加载脚本,并执行,达到获取第三方数据的目的。下面是最初级的实现代码。

 

客户端代码:

 

<script type=”text/javascript”>

function jsonpCallback(result) {

alert(result.a);

alert(result.b);

alert(result.c);

for(var i in result) {

alert(i+”:”+result[i]); //循环输出a:1,b:2,etc.

}

}

</script>

<script type=”text/javascript” src=”http://crossdomain.com/services.php?callback=jsonpCallback”></script>

 

服务端 services.php 代码:

 

<?php

//服务端返回JSON数据

$data = array(‘a’=>1,’b’=>2,’c’=>3,’d’=>4,’e’=>5);

$result = json_encode($data);

 

$callback = $_GET[‘callback’];

echo $callback . “(” . $result . “)”; //动态执行回调函数

 

 

jQuery中的 $.getJSON $.ajax $.get 也有用到 JSONP,不知道大家注意到没。

 

 

 

我之前没特别注意这个技术,遇到了,就写下,算是入个门。有经验的同学可以给大家分享下。

打赏此文

如果您觉得本站的内容对您有所帮助,您可以扫描下面的二维码小额支付请我喝杯茶,感谢!打赏记录
支付宝
微信
承诺:凡打赏捐助的朋友,留言备注自己的邮箱,在打赏捐助时间点的6个月内,本站会每周邮件推送原创专业技术博文,供大家学习和参考!

留下评论

All fields marked (*) are required