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>

image-20211111233450399

分析一下如上通过 script 的 src 来解决跨域的请求路径：

通过如上分析的请求路径发现，端口号不同源，这就很显然通过 script 的 src 属性解决了跨域访问数据的问题了

End

posted @ 2021-11-11 23:26  BNTang  阅读(38)  评论(0)    收藏  举报