关键词：

JSONP |

跨域请求 |

JavaScript |

同源策略 |

CORS

摘要：本文深入解析JSONP技术的核心原理与实现机制，详细阐述JSONP如何通过脚本标签注入解决浏览器同源策略限制，实现跨域数据请求。文章从JSONP的基本概念入手，逐步分析其工作流程、实现方式、优缺点比较，并结合实际代码示例展示JSONP在JavaScript和jQuery中的具体应用。同时探讨JSONP与现代跨域解决方案CORS的对比，为开发者提供全面的技术参考。

JSONP技术概述

JSONP（JSON with Padding）是一种基于JSON的跨域数据请求技术，它通过巧妙利用HTML

服务器响应：

myCallback({ "foo": "bar" });

当脚本加载完成时，回调函数自动执行，实现了跨域数据的获取和处理。

JSONP的实现细节

在纯JavaScript环境中，JSONP的实现需要手动创建脚本元素并处理回调：

function jsonpRequest(url, callbackName) {

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = url + '?callback=' + callbackName;

document.head.appendChild(script);

}

// 全局回调函数

window.handleData = function(data) {

// 处理返回的数据

console.log('Received:', data);

};

// 发起请求

jsonpRequest('http://api.example.com/users', 'handleData');

在使用jQuery等现代JavaScript库时，JSONP的实现更加简洁：

$.ajax({

url: 'http://api.example.com/users',

dataType: 'jsonp',

success: function(data) {

// 成功回调

console.log('Data received:', data);

},

error: function(xhr, status, error) {

// 错误处理

console.error('Request failed:', error);

}

});

JSONP的技术优势与局限性

JSONP的主要优势在于其广泛的浏览器兼容性，包括对老旧浏览器的支持。由于基于标准的