首页 > 代码库 > 跨域（三）——JSONP
跨域（三）——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){ //输出传递过来的对象的usn属性 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是非常合适的选择。
跨域（三）——JSONP
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。