JSONP解决跨域问题

同源策略、跨域概念：详见博文同源策略、跨域

1.什么是JSONP?

JSONP让网页从别的地址（跨域的地址）那获取资料，即跨域读取数据。本质上就是script标签

2.JSONP实现跨域访问的原理

2.1、在同一界面中可以定义多个script标签
2.2、同一个界面中多个script标签中的数据可以相互访问

<script>
let test= 2;
   function demo() {
       console.log("demo");
   }
</script>
<script>
   console.log(test);//打印2
   demo();//打印demo
</script>

2.3、可以通过script的src属性导入其它资源

2.4、通过src属性导入其它资源的本质就是将资源拷贝到script标签中

<!--本地资源-->
<script src="03.JSONP.js"></script>

03.JSONP.文件中写的为：

let test= 2;
function test2() {
        console.log("lalala");
}

相当于

<script>
    let test= 2;
    function test2() {
        console.log("lalala");
    }
</script>

2.5、script的src属性不仅能导入本地资源, 还能导入远程资源

<!--远程资源:jquery文件-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--使用远程资源-->
<script>
    $("button").click(function () {
        console.log("button");
    });
</script>

2.6、由于script的src属性没有同源限制, 所以可以通过script的src属性来请求跨域数据

<script src="http://127.0.0.1:80/08.Network/03.JSONP.php"></script>
<script>
    console.log(php);//789
</script>

03.JSONP.php文件中写的代码为：

<?php
echo "let php=789;";

因此，上面的代码相当于

<script src="http://127.0.0.1:80/08.Network/03.JSONP.php">
	let php=789;
</script>
<script>
    console.log(php);//789
</script>

3.JSONP使用

<script>
let oScript = document.createElement("script");//创建script元素
oScript.src="ttp://127.0.0.1:80/08.Network/03.JSONP.php?cb=test";//给script标签添加src属性
document.body.appendChild(oScript);//将元素添加到body的最后
/*JS动态创建的script标签默认就是异步的,不用等到前面的标签加载完就可以执行后面的script标签，当服务器返回数据时，test函数已经定义好了*/
function test(data) {
    console.log(data);
}
</script>

03.JSONP.php文件：
$cb = $_GET['cb'];//test
echo $cb."(666);";//test(666)