原生的js实现jsonp的跨域封装

最新推荐文章于 2022-08-17 22:28:57 发布

办公研究所

最新推荐文章于 2022-08-17 22:28:57 发布

阅读量208

点赞数

分类专栏：前端经验

前端经验专栏收录该内容

39 篇文章

订阅专栏

本文详细解析了JSONP跨域请求的工作原理，通过创建script标签绕过同源策略限制，实现跨域数据获取。并提供了一个简易的JSONP封装函数示例，展示如何构造请求及回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、原理

jsonp是利用浏览器请求script文件时不受同源策略的限制而实现的，伪造一个script标签，将请求数据的url赋值给script的src属性，并将该标签添加到html中，浏览器会自动发送请求，返回的一般时一段js代码，即函数的调用代码。

该种跨域的请求方式需要后台配合返回响应的函数执行数据

资源网站大全 https://55wd.com 我的007办公资源网站 https://www.wode007.com

二、封装代码

function jsonp (url, data, callback) {
    let scriptTag = document.createElement('script')
    let params = ''
    for (key in data) {
        params += key + '=' + data[key] + '&'
    }
    params.length === 0 ? scriptTag.src = url + '?' + 'fn=' + callback : scriptTag.src = url + '?' + params + 'fn=' +callback
    document.querySelector('head').appendChild(scriptTag)
}
function myCallback(){
    alert('success')
}    
jsonp ('123', {name:'lhy'}, 'myCallback')

这里需要后台返回的参数名为fn