前言：
本文是建立在了解jsonp的基礎(chǔ)上的，不了解jsonp的小伙伴可以先百度哦。使用Vue的小伙伴想用jsonp可以看看我之前寫的文章 傳送門
原生jsonp封裝思路：
- 隨機(jī)生成callback名
- 動(dòng)態(tài)生成script
- 根據(jù)傳入的params對(duì)象拼接字符串，得到完整的url
- 把url賦給生成的script，同時(shí)把script掛載到頁面上
- 通過window屬性的方法獲取jsonp結(jié)果，調(diào)用success回調(diào)函數(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function jsonp({url,params={},success}){
// 根據(jù)時(shí)間戳生成一個(gè)callback名
let callbackName = `jsonp_${new Date().getTime()}`;
// 創(chuàng)建script
let script = document.createElement('script');
// 字符串拼接生成基本url
let baseUrl = `${url}?callback=${callbackName}`;
// 取出params對(duì)象屬性并得到完整url
for(let item in params){
baseUrl += `&${item}=${params[item]}`;
}
// jsonp核心，通過script的跨域特性發(fā)出請(qǐng)求
script.src = baseUrl;
// 把創(chuàng)建的script掛載到DOM
document.body.appendChild(script);
// 給window添加屬性，用于獲取jsonp結(jié)果
window[callbackName] = (res)=>{
// 執(zhí)行success回調(diào)
success(res);
// 刪除window下屬性
delete window[callbackName];
// 得到結(jié)果后刪除創(chuàng)建的script
document.body.removeChild(script);
}
}
jsonp({
url:'http://192.168.191.1:8000/bookIfoTotal',
params:{
name:'tom',
age:21
},
success(res){
console.log(res);
}
})
</script>
</body>
</html>
總結(jié)：jsonp作為跨域的一種方法還是比較簡單實(shí)用的，雖然只支持get方式，但是用于查詢數(shù)據(jù)已經(jīng)足夠了。
附上測試結(jié)果：
jsonp
