跨域SRJ
如果我訪問其他網(wǎng)站的服務(wù)器回窘，可以嗎贱案？
由于JSONP可以規(guī)避同源策略抛猖，因此可以
下面我們自己做兩個網(wǎng)站嘗試一下
請求方：ada.com （瀏覽器）
響應(yīng)方：jack.com （服務(wù)器）
Linux 或 mac直接
vi /etc/hosts
將script.src改成后端服務(wù)器的jack.com
script.src = 'http://jack.com:8002/pay'
跨域SRJ成功
代碼分離：
耦合和解耦
那我們讓前后端分離唄蛉抓，即解耦
后端改成
//獲取參數(shù).call（this庆尘，成功）
response.write(`${query.callbackName}.call(undefined,'success')`)
前端給參
//callbackName = 隨便
script.src = 'http://jack.com:8002/pay?callbackName=yyy'
JSONP:
上面代碼高亮的部分就是JSON（一個鍵必須是雙引號的對象）
JSON左邊的代碼就是左padding，右邊就是右padding巷送，所以JSONP=JSON +Padding
讓我們理一下過程
請求方：ada.com 的前端程序員（瀏覽器）
響應(yīng)方：jack.com 的后端程序員（服務(wù)器）
1.請求方創(chuàng)建 script驶忌，src 指向響應(yīng)方，同時傳一個查詢參數(shù) ?callbackName=yyy
2.響應(yīng)方根據(jù)查詢參數(shù)callbackName笑跛，構(gòu)造形如
yyy.call(undefined, '你要的數(shù)據(jù)')
yyy('你要的數(shù)據(jù)')
這樣的響應(yīng)
3.瀏覽器接收到響應(yīng)付魔，就會執(zhí)行 yyy.call(undefined, '你要的數(shù)據(jù)')
4.那么請求方就知道了他要的數(shù)據(jù)
這就是 JSONP
約定：
callbackName -> callback
yyy -> 隨機(jī)數(shù) 如 ada1213123123412()
JSONP方案
button.addEventListener('click', (e)=>{
let script = document.createElement('script')
let functionName = 'ada'+ parseInt(Math.random()*10000000 ,10)
window[functionName] = function(){ // 每次請求之前搞出一個隨機(jī)的函數(shù)
amount.innerText = amount.innerText - 1
}
script.src = 'http://jack.com:8002/pay?callback=' + functionName
document.body.appendChild(script)
script.onload = function(e){ // 狀態(tài)碼是 200~299 則表示成功
e.currentTarget.remove()
delete window[functionName] // 請求完了就干掉這個隨機(jī)函數(shù)
}
script.onload = function(e){ // 狀態(tài)碼大于等于 400 則表示失敗
e.currentTarget.remove()
delete window[functionName] // 請求完了就干掉這個隨機(jī)函數(shù)
}
})
Node部分：
if (path === '/pay') {
var amount = fs.readFileSync('./db', 'utf8')
var newAmount = amount - 1
fs.writeFileSync('./db', newAmount)
response.setHeader('Content-Type', 'application/javascript')
response.write(`${query.callbackName}.call(undefined,
'success'`)
response.end()
jQuery寫法
$.ajax({
url: "http://jack.com:8002/pay",
dataType: "jsonp",
success: function( response ) {
if(response === 'success'){
amount.innerText = amount.innerText - 1
}
}
})
JSONP 為什么不支持 POST？
因?yàn)? JSONP 是通過動態(tài)創(chuàng)建 Script 實(shí)現(xiàn)的飞蹂，而動態(tài)創(chuàng)建 Script只能用GET請求几苍，不能用POST請求
本文主要用于個人學(xué)習(xí)使用
