jsonp 原理和使用
2022-09-23 本文已影响0人
AAA_si
原理
主要就是利用了 script 标签的src没有跨域限制来完成的。
执行的过程
（1）前端定义一个解析函数，例如 jsonpCallback=function（res）{}
（2）通过params的形式包装script的请求参数，并且声明执行函数（如 cb=jsonpCallback）
（3）后端获取到前端声明的执行函数（jsonpCallback），并以携带参数并且调用执行函数的方式传递给前端
（4）前端zaiscript标签返回资源的时候就回执行jsonpCallback，并以回调函数的方式拿到返回的数据了
优缺点
缺点：只能进行GET请求，需要后台配合
优点：兼容性好，在一些古老的浏览器中都可以运行
简单使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题栏文档</title>
</head>
<body>
<script type="text/javascript">
function jsonp(res) {
console.log(res) // 后台返回的数据
}
</script>
// 这是后台配合 整理出来的文件地址 我们加上callback 回调函数
<script src="https://xxx.com/aaa/aa/a.js?callback='jsonp'" type="text/javascript"></script>
</body>
</html>
上述就是利用<script>标签跨域get引入js脚本实现跨域请求即JSONP
封装使用
<script>
function JSONP({ url, params = {},callbackKey = 'cb', callback }) {
// 定义本地的唯一callbackId，若是没有的话则初始化为1
JSONP.callbackId = JSONP.callbackId || 1;
let callbackId = JSONP.callbackId;
// 把要执行的回调加入到JSON对象中，避免污染window
JSONP.callbacks = JSONP.callbacks || [];
JSONP.callbacks[callbackId] = callback;
// 把这个名称加入到参数中: 'cb=JSONP.callbacks[1]'
params[callbackKey] = `JSONP.callbacks[${callbackId}]`;
// 得到'id=1&cb=JSONP.callbacks[1]'
const paramString = Object.keys(params).map(key => {
return `${key}=${encodeURIComponent(params[key])}`
}).join('&')
// 创建 script 标签
const script = document.createElement('script');
script.setAttribute('src', `${url}?${paramString}`);
document.body.appendChild(script);
// id自增，保证唯一
JSONP.callbackId++;
}
JSONP({
url: 'http://localhost:8080/api/jsonps',
params: {
a: '2&b=3',
b: '4'
},
callbackKey: 'cb',
callback (res) {
console.log(res)
}
})
JSONP({
url: 'http://localhost:8080/api/jsonp',
params: {
id: 1
},
callbackKey: 'cb',
callback (res) {
console.log(res)
}
})
</script>
上述就是利用<script>标签跨域get引入js脚本实现跨域请求 多个jsonp请求
⚠️ encodeURI和encodeURIComment的区别
encodeURL()不会对本身属于URI的字符进行编码，例如：“/”,“：”，“#”，“？”
encodeURIcomment() 则会对他发现的任何的非标准字符进行编码，同时使用decodeURIcomment()来解码。
