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数据,
    这样客户端就可以随意定制自己的函数来自动处理返回数据了。

     
  • 相关阅读:
    快速幂模板
    部分有关素数的题
    POJ 3624 Charm Bracelet (01背包)
    51Nod 1085 背包问题 (01背包)
    POJ 1789 Truck History (Kruskal 最小生成树)
    HDU 1996 汉诺塔VI
    HDU 2511 汉诺塔X
    HDU 2175 汉诺塔IX (递推)
    HDU 2077 汉诺塔IV (递推)
    HDU 2064 汉诺塔III (递推)
  • 原文地址:https://www.cnblogs.com/bjphp/p/8825111.html
Copyright © 2011-2022 走看看