在Ajax中使用JSONP接收JSON数据的核心方法是利用HTML <script> 标签的跨域特性，通过动态创建脚本元素并调用后端指定的回调函数来传递数据，从而绕过浏览器的同源策略限制。
JSONP（JSON with Padding）虽然是一种古老的跨域解决方案，但在2026年的前端开发语境下，理解其原理对于排查遗留系统问题、理解CORS（跨域资源共享）的演进历史依然至关重要，尽管现代开发中CORS已成为主流，但在某些特定场景如老旧第三方API集成或特定CDN资源加载时，JSONP依然是不可忽视的技术手段。
JSONP跨域原理与核心机制拆解
要深入理解如何实现,首先要明白为什么需要它，浏览器出于安全考虑，严格执行同源策略，禁止Ajax请求不同域名、端口或协议的数据。<script> 标签的 src 属性不受同源策略限制，可以加载任意域的脚本文件，JSONP正是利用了这一“漏洞”来实现数据交换。
数据交互流程详解
整个流程并非简单的数据拉取,而是一场精心设计的“函数调用”舞蹈。
第一步：前端定义回调函数
客户端首先需要在全局作用域（通常是 window 对象）中定义一个函数，这个函数的名字是随机的或特定的，用于接收后端返回的数据，定义一个名为 handleJsonpResponse 的函数，它接受一个参数，这个参数就是后端准备返回的数据。
第二步：动态创建Script标签
JavaScript代码动态创建一个 <script> 元素，将其 src 属性指向目标API地址，关键在于URL参数中必须包含一个查询参数，通常命名为 callback，其值为刚才定义的回调函数名。https://api.example.com/data?callback=handleJsonpResponse。
第三步：后端包装并返回
服务器接收到请求后,解析出 callback 参数，它不会直接返回纯JSON数据，而是将JSON数据包裹在回调函数调用中，假设后端数据是 {"name": "Test"}，且回调名为 handleJsonpResponse，后端返回的内容实际上是：handleJsonpResponse({"name": "Test"})。
第四步：执行回调与数据解析
浏览器加载该脚本,执行其中的代码，由于代码是函数调用形式，之前定义的 handleJsonpResponse 函数被触发，参数即为JSON对象，前端即可在函数内部处理业务逻辑。
原生JavaScript实现JSONP的具体步骤
在实际操作中,虽然jQuery等库提供了封装好的方法，但掌握原生实现有助于理解底层逻辑，以下是构建一个健壮JSONP请求的标准路径。
封装JSONP请求函数
一个标准的JSONP封装需要处理动态函数名生成、脚本插入、超时控制以及错误处理。
- 生成唯一回调名：为了避免函数名冲突，通常使用时间戳或随机字符串作为回调函数名，`const callbackName = ‘jsonp_’ + Date.now();`
- 挂载回调函数：将生成的函数名挂载到 `window` 对象上，`window[callbackName] = function(data) { … };`
- 构建URL：将回调名拼接到API URL中，`const url = `${apiUrl}?callback=${callbackName}`;`
- 创建并插入Script：`const script = document.createElement(‘script’); script.src = url; document.head.appendChild(script);`
- 清理工作：在回调函数执行后，必须从 `window` 对象中移除该函数，并从DOM中移除 `