JavaScript 中怎么用 JSONP 传递动态回调函数名获取数据-js教程-PHP中文网

jsonp不支持运行时动态回调函数名，因其依赖服务端预先拼接约定函数名并返回执行代码；前端可通过生成唯一函数名、挂载全局、传参调用、执行后清理来模拟动态效果。

javascript 中怎么用 jsonp 传递动态回调函数名获取数据

JSONP 本身不支持“动态回调函数名”的运行时传递，因为它的核心机制依赖于服务端将数据包裹在**预先约定好的函数名**中返回，而这个函数名必须在请求发出前就确定，并且服务端要能识别并使用它。但你可以通过前端构造带 callback 参数的 URL，并配合全局函数注册，实现“看似动态”的效果。

为什么 callback 名必须提前知道

JSONP 的原理是创建一个 <script></script> 标签，src 指向类似 https://api.example.com/data?callback=handleUser 的地址。浏览器加载该脚本后，服务端返回一段 JavaScript 代码，例如：

handleUser({"id": 1, "name": "Alice"})

这行代码会立即执行，调用全局作用域下的 handleUser 函数。所以服务端必须知道这个函数名，才能正确拼接响应内容。它无法在客户端 JS 运行时“询问”当前用的是哪个函数名。

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

实现“动态回调”的常用做法

本质是：前端生成唯一函数名 → 挂到全局（如 window）→ 把该名字作为 callback 参数发给服务端 → 服务端原样返回调用 → 执行后清理函数。

用时间戳或随机字符串生成唯一函数名，比如 jsonp_cb_1712345678901
将该函数名对应的处理逻辑赋值给 window[funcName]
拼接 URL：url + '?callback=' + encodeURIComponent(funcName)
插入 script 标签发起请求
在回调函数内部，执行完业务逻辑后，主动删除 window[funcName] 避免内存泄漏

一个可复用的简易 JSONP 封装示例

以下代码不依赖任何库，支持传入任意回调函数（实际是传入处理逻辑，由封装自动注册命名函数）：

function jsonp(url, callback) {
  const funcName = 'jsonp_' + Date.now() + '_' + Math.floor(Math.random() * 1000);
<p>window[funcName] = function(data) {
callback(null, data);
delete window[funcName]; // 清理
};</p><p>const script = document.createElement('script');
script.src = url + (url.includes('?') ? '&' : '?') + 'callback=' + funcName;
script.onerror = () => {
callback(new Error('JSONP request failed'));
delete window[funcName];
};
document.head.appendChild(script);
}</p><p>// 使用方式
jsonp('<a href="https://www.php.cn/link/97d810f41d48561d74719865ce0841ef">https://www.php.cn/link/97d810f41d48561d74719865ce0841ef</a>', (err, data) => {
if (err) console.error(err);
else console.log(data);
});</p>