【JavaScript】JSONP

最新推荐文章于 2024-05-25 13:46:03 发布

好久不见的流星

最新推荐文章于 2024-05-25 13:46:03 发布

阅读量1.2k

点赞数 28

分类专栏： JavaScript 文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/yanyc0411/article/details/136221845

版权

JavaScript 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

文章目录

在 Web 开发中，由于浏览器的同源策略，跨域请求数据成为一个常见的挑战。JSONP（JSON with Padding）是一种通过动态创建 script 标签来实现跨域请求的技术，被广泛用于处理跨域数据获取。本篇博客将介绍 JSONP 的原理、用法以及一些注意事项。

1. 同源策略和跨域请求

同源策略是浏览器出于安全考虑实施的限制，它要求页面上所有的资源请求（如脚本、样式、图片、XHR等）必须同源，即协议、域名、端口号必须相同。这就导致了在 Web 开发中经常遇到的跨域问题。

跨域请求通常会受到浏览器的阻止，但 JSONP 利用 script 标签的跨域特性，巧妙地绕过了这个限制。

2. JSONP的原理

JSONP 的原理非常简单，它利用 script 标签的跨域特性，通过动态创建 script 标签来请求跨域的数据，并将数据包裹在一个回调函数中，以实现数据的传递。

前端页面动态创建 script 标签，指定跨域的 API 地址，并在 URL 中传递一个回调函数的名称
服务端接收到请求后，将数据包裹在回调函数中返回给前端
前端页面中预定义的回调函数被调用，从而获取到跨域返回的数据

下面是一个简单的 JSONP 请求的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSONP Example</title>
</head>
<body>

<script>
  function handleData(data) {
    console.log('Data received:', data);
  }
</script>

<script src="https://api.example.com/data?callback=handleData"></script>

</body>
</html>

在上面的例子中，handleData 函数是前端页面预定义的回调函数，它会在服务端返回数据时被调用。

3. JSONP的使用步骤

使用 JSONP 一般需要以下几个步骤：

3.1 预定义回调函数

在前端页面中预定义一个回调函数，该函数将在服务端返回数据时被调用。

function handleData(data) {
  console.log('Data received:', data);
}

3.2 动态创建`script`标签

通过 JavaScript 代码动态创建 script 标签，设置其 src 属性为跨域的 API 地址，并在 URL 中传递回调函数的名称。

const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleData';
document.body.appendChild(script);

3.3 服务端返回数据

服务端接收到请求后，将数据包裹在预定义的回调函数中返回给前端。

// Express框架示例
app.get('/data', (req, res) => {
  const callbackName = req.query.callback;
  const data = { message: 'Hello, JSONP!' };

  // 返回数据时调用预定义的回调函数
  res.send(`${callbackName}(${JSON.stringify(data)})`);
});

4. 注意事项

使用 JSONP 时需要注意以下几点：

安全性问题： JSONP 请求是通过 script 标签加载的，因此可能存在安全风险，如被注入恶意脚本。要确保服务端返回的数据是可信的
只支持GET请求： JSONP 只支持 GET 请求，不支持 POST 等其他类型的请求
依赖于服务端支持： 服务端需要支持 JSONP，即在返回数据时将数据包裹在预定义的回调函数中

5. 总结

JSONP 作为一种简单而又实用的跨域数据获取技术，广泛应用于 Web 开发中。通过动态创建 script 标签，JSONP 绕过了同源策略的限制，实现了在前端页面中获取跨域数据的目的。在使用 JSONP 时，需要注意安全性问题和服务端的支持。希望通过本篇博客，你对 JSONP 的原理和使用有了更深入的了解，并能够在实际项目中灵活应用这一跨域数据获取的神奇利器。

好久不见的流星

关注

28
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】JSONP

在前端页面中预定义一个回调函数，该函数将在服务端返回数据时被调用。JSONP 作为一种简单而又实用的跨域数据获取技术，广泛应用于 Web 开发中。通过动态创建script标签，JSONP 绕过了同源策略的限制，实现了在前端页面中获取跨域数据的目的。在使用 JSONP 时，需要注意安全性问题和服务端的支持。希望通过本篇博客，你对 JSONP 的原理和使用有了更深入的了解，并能够在实际项目中灵活应用这一跨域数据获取的神奇利器。
复制链接

扫一扫