zoukankan      html  css  js  c++  java
  • 跨域(三)——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是非常合适的选择。

  • 相关阅读:
    AIMS 2013中的性能报告工具不能运行的解决办法
    读懂AIMS 2013中的性能分析报告
    在线研讨会网络视频讲座 方案设计利器Autodesk Infrastructure Modeler 2013
    Using New Profiling API to Analyze Performance of AIMS 2013
    Map 3D 2013 新功能和新API WebCast视频下载
    为Autodesk Infrastructure Map Server(AIMS) Mobile Viewer创建自定义控件
    ADN新开了云计算Cloud和移动计算Mobile相关技术的博客
    JavaScript修改css样式style
    文本编辑神器awk
    jquery 开发总结1
  • 原文地址:https://www.cnblogs.com/aaron-shu/p/4170304.html
Copyright © 2011-2022 走看看