美文网首页
jsonp跨域实现原理

jsonp跨域实现原理

作者: Ama_deus | 来源:发表于2018-05-22 19:51 被阅读0次

    跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。

    所谓同源是指,域名,协议,端口均相同

    我们想要调取不同的数据需要跨域,解决跨域问题显得十分的重要
    跨域的三种方式 1 jsonp跨域
    2 使用代理
    3 cors(后台)
    主要讲讲jsonp跨域的方式(简单,兼容好|只能用get跨域)
    实现原理:因为script标签具有跨域能力,所以我们将想要跨域的地址放入script标签中并发送一个回调函数,后台返回回调函数到前端就可以实现跨域
    首先我们要动态创建一个script标签 把回调函数拼接在想要跨域的地址后面
    具体代码
    前台
    function callback(data){
    alert("age:" + data.age + "name:" + data.name);
    }

    let url = "xxxxxx&callback=callback";
        let  obj = document.createElement('script');
        obj.attr("src",url);
        document.getElementByTagName('body')[0].appendchild(obj);
    

    后台
    <?php
    $data = array(
    'age' => 20,
    'name' => '张三',
    );

    $callback = $_GET['callback'];

    echo $callback."(".json_encode($data).")";

    接收数据

        $.ajax({
            type : "get",
            async: false,
            url : "xxxxx",
            dataType: "jsonp",
            jsonp:"callback", //请求php的参数名
            jsonpCallback: "callback",//要执行的回调函数
            success : function(data) {
                alert("age:" + data.age + "name:" + data.name);
            }
    
        });
    

    相关文章

      网友评论

          本文标题:jsonp跨域实现原理

          本文链接:https://www.haomeiwen.com/subject/ukntdftx.html