Ajax - 手写JSONP跨域实现及原理详解

最新推荐文章于 2022-03-31 17:32:40 发布

九月清晨柳成荫

最新推荐文章于 2022-03-31 17:32:40 发布

阅读量572

点赞数 1

分类专栏： Web前端文章标签： JSONP JSONP封装

本文链接：https://blog.csdn.net/qq_40885085/article/details/103605097

版权

本文详细介绍了JSONP的实现原理，强调其作为跨域请求的欺骗手段，利用允许跨域加载JS文件的特点。文章指出JSONP的优点是良好的浏览器兼容性，特别是对低版本IE的支持，但仅支持GET请求且错误处理不如XMLHttpRequest。文章通过实例展示了JSONP的实现过程，包括服务端处理、函数防覆盖策略和避免多余script标签的方法，最后提供了完整的JSONP封装代码。

摘要由CSDN通过智能技术生成

JSONP实现原理

jsonp，其实就是单纯为了实现跨域请求而创造的一个欺骗(trick)。

虽然，因为同源策略的影响，不能通过XMLHttpRequest请求不同域上的数据(Cross -origin reads)。但是，在页面上引入不同域上的js脚本文件却是可以的(Cross -origin embedding)。因此，在js文件载入完毕之后，触发回调，可以将需要的data作为参数传入
注意，实现方式(需前后端配合)

优点

兼容性好(兼容低版本IE)

缺点

JSONP只支持GET请求，XMLHttpRequest相对于JSONP有着更好的错误处理机制。

实现

1.服务端采用的是Node，服务端处理请求方法如下

router.get('/', function(req, res, next) {
    console.log('收到客户端的请求：', req.query);
    // 传回到客户端的数据
    let data = JSON.stringify({
        'status':200,
        'result':{
            'name':'柳成荫',
            'site':'123456'
        }
    });
    // 获取方法名称 - 这是客户端传过来的方法名参数
    // 因为这个方法名必须是客户端有的，必须要客户端告诉服务端是哪个方法
    let methodName = req.query.callback;
    let methodStr