一、什么是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"> //回调函数定义 functionmycallback(obj){ //输出传递过来的对象 document.getElementById('chicken').innerHTML=obj.chicken; document.getElementById('duck').innerHTML=obj.duck; }; window.onload=function(){ //创建SCRIPT标签 varscript=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是非常合适的选择。