跨域（三）——JSONP

一、什么是JSONP?

百度百科：JSONP(JSON with Padding)是JSON的 一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

二、JSONP的实现思路很简单

1、前端创建script标记，设置src，添加到head中（当然也可以往body中添加）。

2, 后台返回一个js变量jsonp，这个jsonp就是请求后的JSON数据。

3, 回调完成后删除script标记（还有一些清理工作如避免部分浏览器内存泄露等）。

三、简单代码例子

服务器端：

<?php
$obj=array('chicken'=>2,'duck'=>3);//$ob是待传递对象
$callback=$_GET['callback'];//获取传入的函数名
if(!$callback){
    $callback='jsoncallback';//如果没传入就使用的默认函数名
}
//输出一段JS格式的代码，调用用传入的函数名，参数为需要传递的$obj对象
echo "alert('我是小偷，哈哈');".$callback.'('.json_encode($obj).');';
?>

客户端：

<div>
鸡<span id="chicken"></span>只
<br/>
鸭<span id="duck"></span>只
</div>
<script type="text/javascript">
//回调函数定义
function mycallback(obj){
  //输出传递过来的对象
  document.getElementById('chicken').innerHTML=obj.chicken;
  document.getElementById('duck').innerHTML=obj.duck;
};

window.onload=function(){
  //创建SCRIPT标签
  var script=document.createElement("script");
  //设置URL
  script.src="http://127.0.0.1:8081//langtao/steal.php?callback=alert('我是强盗');mycallback";
  //把标签放入文档中以便生效
  document.body.appendChild(script);
  document.body.removeChild(script);
};
</script>

<!--<script>
$.ajax({
dataType:'jsonp',
data:'id=1',
jsonp:'callback',
url:'http://127.0.0.1:8081//langtao/steal.php',
success:function(obj){
    document.getElementById('chicken').innerHTML=obj.chicken;
    document.getElementById('duck').innerHTML=obj.duck;
},
});
</script>-->

<!--<script>
$.getJSON(
  "http://127.0.0.1:8081//langtao/steal.php?callback=?",
  function(obj){
    document.getElementById('chicken').innerHTML=obj.chicken;
    document.getElementById('duck').innerHTML=obj.duck;
  }
);
</script>-->

 

四、安全问题

JSONP虽然易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。