JSONP（JSON with Padding）是一种用于跨域数据请求的技术。由于浏览器的同源策略，JavaScript 默认不能直接访问不同源的数据。但通过使用 JSONP 技术，可以实现在前端页面中向其他域名发送请求，并获取数据。
实现原理
JSONP 的实现原理是利用 <script> 标签的跨域特性。我们可以通过动态创建一个 <script> 标签来加载需要获取的数据。被请求的服务器会将数据包装成一个函数调用，并返回给客户端。客户端接收到响应后，就可以执行这个函数，从而取得数据。
创建 JSONP
下面是一个简单的创建 JSONP 的示例：
-------- ---------- --------- - ----- ------ - -------------------------------- ---------- - --- - ------------ - -------- --------------------------------- - -------- ---------------- - ----------------- - ------------------------------------- -------------
在上面的代码中，我们定义了一个 jsonp 函数，它接收两个参数：URL 和回调函数的名称。该函数动态创建了一个 <script> 标签，并将 URL 和回调函数作为 GET 参数拼接到 URL 中。然后将该标签添加到文档的 <body> 元素中。被请求的服务器会将数据包装成一个函数调用，并将其返回给客户端。客户端会在全局作用域中创建一个名为 handleData 的函数，该函数接收服务器返回的数据作为参数。
注意事项
- 回调函数必须在全局作用域中定义，否则服务器无法正确地调用它。
- 服务器端需要将数据包装成一个函数调用，并将其返回给客户端。通常情况下，函数名由客户端指定，以便在获取数据后立即执行回调函数。
- JSONP 只支持 GET 请求。
结论
JSONP 是一种非常有用的技术，在前端开发中被广泛应用。通过动态创建 <script> 标签，我们可以轻松地向其他域名发送请求，并获取数据。虽然它具有某些限制，但是 JSONP 在一些特定的场景中仍然是最好的选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25536