在前端开发中，我们通常需要跨域请求数据。不过，由于同源策略 (Same Origin Policy) 的限制，直接通过 AJAX 请求跨域资源是不被允许的。此时，JSONP 就成了一个非常实用的解决方案。
什么是 JSONP?
JSONP (JSON with Padding) 可以看做是一种利用 <script> 标签跨域获取 JSON 数据的技术。具体来说，它会创建一个 <script> 标签，该标签的 src 属性指向带有 JSON 数据的 URL，并且在 URL 上附加一个回调函数名作为参数。服务器返回的数据将会被包装在该回调函数中，从而可以通过全局作用域访问到数据。
为什么要使用 JSONP?
使用 JSONP 有以下优点：
- 跨域请求：JSONP 能够绕过浏览器的同源策略，实现跨域请求数据。
- 兼容性好：几乎所有的浏览器都支持 JSONP 请求。
- 简单易用：只需要在页面上添加一个
<script>标签即可完成请求，无需进行复杂的设置和参数配置。
JSONP 的缺点
虽然 JSONP 很方便，但也存在一些缺点：
- 安全问题：由于 JSONP 是通过创建
<script>标签实现的，因此无法避免潜在的安全隐患。比如，如果回调函数名可以被用户控制的话，就有可能存在 XSS 攻击。 - 只能发送 GET 请求：由于 JSONP 是通过
<script>标签来请求数据的，它只能发送 GET 请求，无法发送 POST 等其他类型的请求。
如何使用 JSONP?
下面是一个简单的 JSONP 请求示例：
-------- -------------------- - ------------------ - ----- ------ - --------------------------------- ---------- - ------------------------------------------------------- ----------------------------------
上述示例中，我们定义了一个名为 handleResponse 的回调函数，并将其传递给服务端。服务端返回数据时，将数据包裹在 handleResponse 回调函数中，并将其作为响应内容返回给客户端。客户端接收到响应后，即可直接使用 handleResponse 函数内部的数据。
总结
JSONP 是一种非常实用的跨域请求技术，具有兼容性好、简单易用等优点。但同时也存在一些安全问题和局限性。当需要通过跨域请求获取数据时，可以考虑使用 JSONP 技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/10249