zoukankan      html  css  js  c++  java
  • jsonp跨域总结

    同源限制: 浏览器不允许一个域的脚本请求另一个域的文档,通俗来说,不允许访问不同协议、不同域名或不同端口的文档

    跨域处理方法:

    1.jsonp

    前提: 浏览器虽然对ajax请求做出了限制,但script的链接没有限制,例如: <script src= 'xxx'>,我们可以轻松地链接到另一个域的文件

    原理:

    首先在客户端创建一个回调函数,将回调函数的名称(例如callback)传给服务端;

    服务端生成json数据data后,创建js文件,将callback(data)(data成了callback的参数)写入js文件

    客户端创建script文件,链接地址为此前生成的js文件地址;

    解析script文件,返回的callback(data)即调用callback函数(前面已创建),由此,我们获取了data,如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
        </body>
        <script> //创建callback函数
            function callBack(data){
                console.log(data)
            }
        </script>
        <script> //客户端返回的文件
            callBack({content: 'xx'})
        </script>
    </html>

    实际应用的例子如下:

    <script type="text/javascript">
    var url = "http://localhost:8080/html5/jsonp_data11.js";
    // 创建script标签,设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head,此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script);
    function callbackFun(data)
    {
        console.log(data.age);
        console.log(data.name);
    }  
    </script>

    也可以使用jquery

    $.ajax({
            type:"post",
            url:"http://localhost:8080/html5/JsonServlet",
            dataType:'jsonp',
            jsonp:'mycallback',
           jsonpCallback:'callbackFun',
           success:function(data) {
                 console.log(2222);
                 console.log(data.age);
           }
      });

    值得注意的是使用jsonp是一个前后端配合的过程,后台根据前端的请求也得做成相应调整,特别是使用jquery时, 有时回调函数名是jsonp属性的值,有时候追加到

    url后面。

    优点: 很好地解决了同源策略的限制

    缺点:

    1.只能GET;

    2.不会返回状态码;

    3.安全性不佳,毕竟返回一段js,对安全由一定威胁。

  • 相关阅读:
    Java 同步器
    Python: Soft_max 分类器
    【五年】Java打怪升级之路
    关于Csdn水区被占据一事 (2015-08-01)
    Jquery—Jquery中的(function($){...})(jQuery)
    AjaxAnyWhere 实现页面局部刷新,局部分页
    Erlang Port 小心换行
    基于Unity3D云人脸监測技术
    HTML中的超链接
    poj 1979 dfs
  • 原文地址:https://www.cnblogs.com/yanze/p/7487608.html
Copyright © 2011-2022 走看看