原生js实现jsonp请求函数封装

在Js中，实现JSONP封装主要是为了绕过跨域请求的限制。JSONP允许你在不同源之间安全地传输数据，通过动态创建<script>标签来实现。

代码如下：

function jsonp(url, callback) {
    // 生成唯一的回调函数名
    var callbackName = 'jsonp_callback_' + Date.now() + '_' + Math.random().toString(36).substr(2);
    
    // 创建script标签
    var script = document.createElement('script');
    
    // 定义全局回调函数
    window[callbackName] = function(data) {
        // 清理工作
        delete window[callbackName];
        document.body.removeChild(script);
        callback(null, data); // 第一个参数为错误，第二个为数据
    };
    
    // 错误处理
    script.onerror = function() {
        delete window[callbackName];
        document.body.removeChild(script);
        callback(new Error('JSONP request failed'));
    };
    
    // 设置src，将回调函数名作为参数传递
    var src = url + (url.indexOf('?') > -1 ? '&' : '?') + 'callback=' + callbackName;
    script.src = src;
    
    // 添加到文档中开始加载
    document.body.appendChild(script);
}

函数解析

参数：

url: 请求的URL地址
callback: 请求完成后的回调函数

工作原理：

创建唯一的回调函数名避免冲突
在全局对象上定义回调函数
创建script标签并设置src
服务器返回JavaScript代码调用该回调函数
回调执行后清理资源

适用场景：

跨域数据请求 - 主要用途，绕过同源策略
老旧浏览器支持 - 兼容不支持CORS的浏览器
简单数据获取 - 获取JSON格式数据

具体应用：

// 使用示例
jsonp('https://api.example.com/data?param=value', function(err, data) {
    if (err) {
        console.error('请求失败:', err);
        return;
    }
    console.log('获取到的数据:', data);
});

注意事项

安全性：JSONP容易受到XSS攻击，只能信任的源使用
仅限GET：JSONP只支持GET请求
错误处理：需要完善的错误处理机制
现代替代：在现代应用中优先考虑CORS
性能：大量使用可能影响页面性能

现代替代方案

对于现代Web开发，建议优先使用：

Fetch API + CORS
Axios 等HTTP库
WebSocket 实时通信

这个JSONP实现适合在需要兼容老旧浏览器或特定跨域场景下使用。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/course/34_2151