zoukankan      html  css  js  c++  java
  • JSONP解决跨域请求

    当ajax请求url的地址不在当前域名下,就会出现错误,

    同源策略,也叫跨域禁止策略; 同源策略,也叫跨域禁止策略;
    阻止从一个域上加载的脚本,获取或操作另一个域上的资源;
    但是,公司内部系统的数据交互就无法进行:
    公司OA系统 :http://oa.baidu.cn
    公司ERP系统 :http://erp.baidu.cn
    公司ESM系统 :http://esm.baidu.cn
    而Web页面上调用js文件时则不受是否跨域的影响
    (不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如script、img、iframe);
    src 的能力就是把远程的数据资源加载到本地(图片、JS代码等);

    前台代码:
    <script src="ajax.js"> </script>
    <script>
        //提前写好函数,调用函数需要传参
        function cb(msg){
            console.log(msg);
        }
    </script>
    <!--src加载进来的代码就是一个JS的函数调用,cb函数调用  -->
    <script src="http://bbs.com/1.php"></script>
    后台代码:
    $arr = ['a'=>1,'b'=>'san','c'=>'wu','d'=>4]
    $str = json_encode($arr);
    //返回字符串,JS代码的函数调用
    //要返回的数据作为函数传参传递
    echo "cb(".$str.")";

    修改前后台代码,增加灵活性;

    前台代码:

    <script src="ajax.js"> </script>
    <script>
        //提前写好函数,调用函数需要传参
        function callback(msg){
            console.log(msg);
        }
    </script>
    <!--src加载进来的代码就是一个JS的函数调用,cb函数调用  -->
    <!--地址get传参,告知后台函数调用名称 -->
    <script src="http://bbs.com/1.php?cb=callback"></script>

    后台PHP代码:

    $arr = ['a'=>1,'b'=>'san','c'=>'wu','d'=>4
    $str = json_encode($arr);
    //返回字符串,JS代码的函数调用
    //要返回的数据作为函数传参传递
    //接受参数拼接,作为函数调用名称
    echo $_GET['cb']."($str)";

    如何使用 如何使用JSONP:

    <body>
       <input type="button" id="btu" value="点击">
    </body>
    <script src="ajax.js"> </script>
    <script>
        //提前写好函数,调用函数需要传参
        function callback(msg){
            console.log(msg);
        }
        //动态添加script标签及src属性
        $('btu').onclick = function(){
            var sc = document.createElement('script');
            sc.src = "http://bbs.com/2.php?cb=callback";
            document.getElementsByTagName('head')[0].appendChild(sc);
        }
    </script>

    就是在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理;
    在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系;
    为了便于使用及交流,逐渐形成了一种 非正式传输协议 非正式传输协议,人们把它称作 JSONP ;
    该协议的一个要点就是允许用户传递一个callback参数给服务端,
    然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,
    这样客户端就可以随意定制自己的函数来自动处理返回数据了。

     
  • 相关阅读:
    P1064 金明的预算方案
    P1062 数列
    P2258 子矩阵
    P1095 守望者的逃离
    P1201 [USACO1.1]贪婪的送礼者Greedy Gift Givers
    P1203 [USACO1.1]坏掉的项链Broken Necklace
    P1478 陶陶摘苹果(升级版)
    P2485 [SDOI2011]计算器
    逆元模板
    CloudStack 物理网络架构
  • 原文地址:https://www.cnblogs.com/bjphp/p/8825111.html
Copyright © 2011-2022 走看看