JSONP - 初探网页跨域请求

2023-10-01 20:28:53

JSONP 是什么？

JSONP（JSON with Padding）是一种跨域请求的技术，它是利用<script>标签的特性来实现跨域请求的。

在浏览器中，<script>标签可以加载和执行外部脚本。这些外部脚本可以来自与当前页面相同的域名，也可以来自不同的域名。这就是 JSONP 的原理：当一个页面需要向另一个域名的服务器发送请求时，它可以创建一个<script>标签，并把请求参数作为参数传递给<script>标签。当这个<script>标签被执行时，它就会向服务器发送请求，服务器返回的响应内容会以 JSON 格式包装在一个回调函数中。这个回调函数会被浏览器自动执行，从而实现跨域请求。

JSONP 的实现方式

JSONP 的实现方式很简单，只需要以下几步：

创建一个<script>标签，并把请求参数作为参数传递给<script>标签。
把<script>标签添加到页面中。
服务器返回的响应内容会以 JSON 格式包装在一个回调函数中。
这个回调函数会被浏览器自动执行，从而实现跨域请求。

以下是一个 JSONP 的示例代码：

<script src="https://example.com/api/v1/users?callback=myCallback"></script>

<script>
function myCallback(data) {
  console.log(data);
}
</script>

在这个示例中，我们首先创建一个<script>标签，并把请求参数callback=myCallback作为参数传递给<script>标签。然后把<script>标签添加到页面中。服务器返回的响应内容会以 JSON 格式包装在一个名为myCallback的回调函数中。这个回调函数会被浏览器自动执行，从而实现跨域请求。