什麼是jsonp
JSONP(JSON with Padding)是JSON的一種“使用模式”，是一種非官方跨域數據交互協議，可用於解決主流瀏覽器的跨域數據訪問的問題。用 JSONP 抓到的資料並不是 JSON，而是任意的填充JSON數據的JavaScript。
爲什麼要使用jsonp
1.Ajax直接請求普通文件存在跨域無權限訪問的問題
2.web頁面上調用js文件時不受是否跨域的影響，凡是有src屬性的標籤，都具有跨域的能力
3.當前階段如果想通過純web端（ActiveX控件、服務端代理、屬於未來的HTML5之Websocket等方式不算）跨域訪問數據就只有一種可能，那就是在遠程服務器上設法把數據裝進js格式的文件裏，供客戶端調用和進一步處理
4.JSON可以簡潔的描述複雜數據，還被js原生支持
如何使用jsonp
1.在客戶端寫好回調函數，並且將回調函數的名稱連同其他需要的參數名拼接在域名後面，填入src
2.服務端接收到請求，將數據進行解析，並將JSON數據填入回調函數的參數列表中，返回給客戶端
3.客戶端收到服務端的響應，執行函數，執行完畢將script代碼塊清除
4.設置超時處理，如果script請求超時，那麼將函數清除。
封裝好的jsonp代碼
function jsonp(url,params,callback,time){
//構造一個函數到window上
var body = document.body;
var fnName = "_jsonpFn"+Math.random().toString().replace(".","");
window[fnName] = function(data){ //發回數據回調的內容
callback(data);//用戶寫的函數
//執行完畢之後,刪除該函數
delete window[fnName];
body.removeChild(script);
};
//創建動態標籤
var script = document.createElement('script')
//這裏的script和img一樣，都有能力不受限制的從其他域加載資源,在加載的時候，就會向服務器發起請求
let str=''
for(let key in params){
str+=key+"="+params[key]+"&";
}
// console.log(str);
str+='callback='+fnName;
script.src = url+'?'+str;
//先綁定函數再請求
body.insertBefore(script,document.body.firstChild);
//設置超時處理
if(time){
var timer = window.setTimeout(function(){
//jsonp的超時處理，移除回調函數
body.removeChild(script);
clearTimeout(timer);
},time)
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 id="result">bbbb </h1>
</body>
<script src="./1.js"></script>
<script>
//地址,傳遞的參數,回調函數,超時時間
jsonp(
"http://localhost:8080/user/",
{
x:'11',
y:'20'
},
function(data){
document.getElementById('result').innerHTML=JSON.stringify(data);
},
3000
);
</script>
</html>
爲什麼jsonp只支持get請求
因爲jsonp是一種請求一段JS腳本數據並且執行的玩法，在src中沒有設置請求方式的餘地
jsonp和ajax和axios的區別是什麼？
ajax是請求，jsonp是協議
2.實質不同
ajax的核心是通過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加