JSONP（JSON with Padding）是一种用于实现跨域数据交换的技术。在跨域限制下，来自不同源（域名、端口、协议）的脚本无法互相访问。JSONP巧妙地利用此限制，通过创建动态脚本标签的方式来规避它。
工作原理
JSONP工作原理分三步：
- 客户端发出请求： 客户端脚本向服务器发送一个HTTP请求，请求中包含一个回调函数名。
- 服务器响应带有填充： 服务器接收到请求后，将JSON数据包装在一个指定的回调函数中，然后作为响应发送给客户端。
- 客户端执行响应： 客户端收到响应后，将执行包装后的JSONP代码。由于回调函数是在客户端定义的，因此它可以在跨域的情况下访问服务器返回的数据。
代码演示
客户端代码：
// 定义回调函数
function callback(data) {
// 处理服务器返回的数据
console.log(data);
}
// 发送HTTP请求
var script = document.createElement("script");
script.src = "https://example.com/jsonp?callback=callback";
document.head.appendChild(script);服务器代码：
<?php
// 获取回调函数名
$callback = $_GET["callback"];
// 准备JSON数据
$data = ["name" => "John Doe", "age" => 30];
// 输出JSONP代码
echo "$callback(" . json_encode($data) . ");";
?>优点和缺点
优点：
- 实现跨域数据交换，无需修改服务器端代码。
- 使用简单，适合于非敏感数据传输。
缺点：
- 仅适用于GET请求，不支持POST和PUT等其他HTTP方法。
- 安全性较弱，容易受到JSONP劫持攻击。
替代方案
CORS（跨域资源共享）是一种更安全且功能更全面的跨域解决方案。然而，它需要服务器端支持。如果您需要传输敏感数据或需要更灵活的跨域功能，CORS是一个更好的选择。
最佳实践
- 使用安全的回调函数： 定义一个唯一的回调函数名，以避免与其他脚本冲突。
- 设置跨域标头： 在服务器响应中设置CORS标头，以允许客户端的源代码访问数据。
- 验证JSONP响应： 在客户端对JSONP响应进行验证，以确保数据是有效的并且来自预期的来源。
- 谨慎使用JSONP： 对于安全敏感的数据，考虑使用CORS或其他更安全的跨域技术。
