JSONP

定义(前后端交互只能是字符）

利用src标签，引入我们即将要跨域的资源，利用回调函数来拿到原本跨域的数据

1.

在jsonp1.txt中

<script src="http://localhost/1903/jsonp/data/myjsonp1.txt"></script>
<script>
    //jsonp 通过scr标签引入资源
     fn()
</script>

在json1.html中

1 <script src="http://127.0.0.1/1903/jsonp/data/jsonp1.txt"></script>
2 <script>
3     // jsonp是通过script标签引入资源
4     
5     fn()//hello
6 </script>

2.

在jsonp2.html中

<?php

    // echo "console.log('hello')";

 //由于echo后面输出的是字符，所以需要加 ''

 echo "function fn(){ 5  console.log('HELLO') 6  }"; 7 8 ?>

 

在json2.html中

<script src="http://127.0.0.1/1903/jsonp/data/jsonp2.php"></script>
<script>
    // jsonp是通过script标签引入资源
    fn()

    // 发现：
7         // 只要是被script标签引入的文件，都会先解析，解析之后，将输出的字符，按照js代码执行，--->在HTML中写函数，在PHP中执行
</script>

3.

在js中定义函数，在php中执行函数。在php执行函数传参-->在HTML中的函数中接收-->php文件通过script的src引入进来，把php中echo的出来的东西当做js代码来执行，执行函数时候就把PHP中的数据带了过来。这时候实现跨域（HTML的地址和src的地址不一致）

 

在jsonp3.html中

<script>
    // jsonp是通过script标签引入资源
    
    // 发现：
    // 只要是被script标签引入的文件，都会先解析，解析之后，将输出的字符，按照js代码执行
    function fn(res){
        console.log(res)
    }
</script>
<script src="http://127.0.0.1/1903/jsonp/data/jsonp3.php"></script>

<?php
        $data="hello";
        //echo "fn(123)";

        echo "fn(".$data")";// hello is not defined
        //等同于 "fn(hello)" //hello是字符，外面的""是PHP，里面的是js的
        
        echo "fn('".$data."')";        //hello
        
    ?>

4.

<script>
    var oaaa=document.getElementById("aaa")
    var obbb=document.getElementById("bbb")
    var obtn=document.getElementById("btn")
    obtn.onclick=function(){
        var url="http://127.0.0.1/1903/jsonp/data/jsonp4.php";
        var oa=oaaa.value;
        var ob=obbb.value;
        jsonp(url,function(res){
            console.log(res)
        },{
            user:oa,
            pass:ob,
        });
    }
    function jsonp(url,callback,data){
        data=data?data:{};//data为参数，不需要声明
        let str="";
        for( let i in data){
            str=str+i+"="+data[i]+"&";
        }
        url=url+"?"+str.slice(0,str.length-1);

        //1.script标签
        var script=document.createElement("script");
        script.src=url;
        document.body.appendChild(script);
        //2.函数
        window.fn=function (res){
            callback(res);//hello php,这是接收到的数据:---
        }
    }
</script>

<?php

    $u = @$_GET["user"];
    $p = @$_GET["pass"];

    $data = "hello php,这是接收到的数据:".$u."---".$p;

    echo "fn('". $data ."')";//字符串拼接

?>

5.

<script>
    var oaaa=document.getElementById("aaa")
    var obbb=document.getElementById("bbb")
    var obtn=document.getElementById("btn")
    obtn.onclick=function(){
        var url="http://127.0.0.1/1903/jsonp/data/jsonp5.php";
        var oa=oaaa.value;
        var ob=obbb.value;
        jsonp(url,function(res){
            console.log(res)
        },{
            user:oa,
            pass:ob,
            // "cb表示后端规定的函数名所在的字段名"
            cb:"asmjdgajksd",
            // cloumnName表示前端的函数如何正确找到函数名；cloumnName和后台没关系，自己定义
            cloumnName:"cb"
        });
    
    }
    function jsonp(url,callback,data){
        data=data?data:{};//data为参数，不需要声明
        let str="";
        for( let i in data){
            str=str+i+"="+data[i]+"&";
        }
        url=url+"?"+str.slice(0,str.length-1);

        //1.script标签
        var script=document.createElement("script");
        script.src=url;
        document.body.appendChild(script);
        //2.函数
      　　 //data.cloumnName找到的是"fnName"，但是这个单子本身不是我们要找的，
　　　　　　　　上面的对//应的属性"cb"才是我们需要的。所以需要再解析一层data[data.cloumnName]
      　　 // 最后cloumnName与后台完全没关系，
      　　 // window[data["callback"]] = function(res){
        　 // window["asmjdgajksd"] = function(res){
          // window.asmjdgajksd = function(res){
        window[data[data.cloumnName]]=function (res){
            callback(res);//hello php,这是接收到的数据:---
        }
        
    }
</script>

<?php

    $u = @$_GET["user"];
    $p = @$_GET["pass"];
    $fnName = @$_GET["cb"];

    $data = "hello php,这是接收到的数据:".$u."---".$p;


    echo $fnName."('". $data ."')";

?>