JSONP（JSON with Padding）是一种经典的跨域数据获取方案，其核心原理是通过动态创建<script>标签绕过浏览器的同源策略限制。以下是JSONP方案的详细解析：
一、JSONP的核心原理
1. 基于<script>标签的跨域能力
HTML的<script>标签不受同源策略限制，允许加载不同域的JavaScript文件。JSONP利用这一特性，将跨域请求伪装成脚本资源加载。例如：
<script src="http://api.example.com/data?callback=handleResponse"></script>
2. 服务端动态生成回调函数
服务端收到请求后，需将数据包裹在客户端指定的回调函数中返回。例如，若请求参数为callback=handleResponse，服务端响应内容应为：
handleResponse({ "name": "John", "age": 30 });
浏览器执行此脚本时，数据通过回调函数传递给前端。
二、JSONP的实现步骤
1. 客户端动态创建<script>标签
通过JavaScript生成<script>元素，并将包含回调函数名的URL赋值给src属性：
function jsonp(url, callback) {
const script = document.createElement('script');
script.src = `${url}?callback=${callback}`;
document.body.appendChild(script);
}
2. 定义全局回调函数
在客户端预先定义与URL参数匹配的回调函数，用于接收数据：
function handleResponse(data) {
console.log(data); // 处理跨域数据
}
3. 服务端响应处理
服务端需解析URL中的callback参数，返回以该函数名包裹的JSON数据。例如PHP实现：
$data = ['status' => 'success', 'data' => $result];
echo $_GET['callback'] . '(' . json_encode($data) . ')';
三、JSONP的优缺点分析
优点：
o 兼容性极佳：支持所有老旧浏览器（如IE6）；
o 无需复杂配置：仅需前后端约定回调函数名即可实现跨域。
缺点：
1. 仅支持GET请求
受限于<script>标签的加载方式，无法发送POST请求或设置自定义请求头。
2. 安全性风险
o 可能遭受XSS攻击（如服务端返回恶意脚本）；
o 回调函数名可被篡改，导致数据泄露。
3. 错误处理困难
无法通过try/catch捕获网络错误或超时，需依赖超时检测等辅助手段。
四、jQuery对JSONP的封装
jQuery简化了JSONP的调用流程，自动处理回调函数生成与清理：
$.ajax({
url: 'http://api.example.com/data',
dataType: 'jsonp',
success: function(data) {
console.log(data);
},
error: function() {
console.error('请求失败');
}
});
jQuery会自动替换callback=?中的占位符为随机函数名（如jQuery123456），并在请求完成后销毁该函数。
五、适用场景与替代方案
适用场景：
o 需兼容老旧浏览器的项目；
o 简单的跨域数据获取（如第三方统计、公开API调用）。
替代方案：
o CORS：现代项目首选，支持所有HTTP方法及安全头控制；
o 代理服务器：通过Nginx反向代理隐藏跨域请求。
JSONP作为早期跨域解决方案，在特定场景下仍有价值，但需权衡其安全风险。建议新项目优先采用CORS等更安全的方案。