JSONP原理

什么是 JSONP

JSONP 让网页从别的地址（跨域的地址）那获取资料，即跨域读取数据

JSONP 实现跨域访问的原理

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>

<script>
    let num = "BNTang";
</script>

<script>
    console.log(num);
</script>
</body>
</html>

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

index.js

let num = "BNTang";

function demo() {
    console.log(num);
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>

<script src="index.js"></script>
<script>
    demo();
</script>
</body>
</html>

通过 src 属性导入其它资源的本质就是将资源拷贝到 script 标签中
script 的 src 属性不仅能导入本地资源, 还能导入远程资源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<button>点我</button>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script>
    $("button").click(function () {
        console.log("点击了按钮");
    });
</script>
</body>
</html>

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

20-jsonp.php

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<script src="http://127.0.0.1:80/Jquery/20-jsonp.php"></script>
<script>
    console.log(num);
</script>
</body>
</html>