原理
主要就是利用了 script 標簽的src沒有跨域限制來完成的。
執(zhí)行的過程
（1）前端定義一個解析函數(shù)，例如 jsonpCallback=function（res）{}
（2）通過params的形式包裝script的請求參數(shù)，并且聲明執(zhí)行函數(shù)（如 cb=jsonpCallback）
（3）后端獲取到前端聲明的執(zhí)行函數(shù)（jsonpCallback），并以攜帶參數(shù)并且調(diào)用執(zhí)行函數(shù)的方式傳遞給前端
（4）前端zaiscript標簽返回資源的時候就回執(zhí)行jsonpCallback，并以回調(diào)函數(shù)的方式拿到返回的數(shù)據(jù)了
優(yōu)缺點
缺點：只能進行GET請求，需要后臺配合
優(yōu)點：兼容性好，在一些古老的瀏覽器中都可以運行
簡單使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題欄文檔</title>
</head>
<body>
<script type="text/javascript">
function jsonp(res) {
console.log(res) // 后臺返回的數(shù)據(jù)
}
</script>
// 這是后臺配合 整理出來的文件地址 我們加上callback 回調(diào)函數(shù)
<script src="https://xxx.com/aaa/aa/a.js?callback='jsonp'" type="text/javascript"></script>
</body>
</html>
上述就是利用<script>標簽跨域get引入js腳本實現(xiàn)跨域請求即JSONP
封裝使用
<script>
function JSONP({ url, params = {},callbackKey = 'cb', callback }) {
// 定義本地的唯一callbackId，若是沒有的話則初始化為1
JSONP.callbackId = JSONP.callbackId || 1;
let callbackId = JSONP.callbackId;
// 把要執(zhí)行的回調(diào)加入到JSON對象中，避免污染window
JSONP.callbacks = JSONP.callbacks || [];
JSONP.callbacks[callbackId] = callback;
// 把這個名稱加入到參數(shù)中: '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('&')
// 創(chuàng)建 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腳本實現(xiàn)跨域請求 多個jsonp請求
?? encodeURI和encodeURIComment的區(qū)別
encodeURL()不會對本身屬于URI的字符進行編碼，例如：“/”,“：”，“#”，“？”
encodeURIcomment() 則會對他發(fā)現(xiàn)的任何的非標準字符進行編碼，同時使用decodeURIcomment()來解碼。
