到底什么是JSONP？它和JSON到底有什么關(guān)系外邓？這是我碰到JSONP時(shí)腦海里的浮現(xiàn)的第一個(gè)問(wèn)題。先看看維基百科上是怎么解釋的：
JSONP(JSON with Padding)是數(shù)據(jù)格式JSON的一種“使用模式”，可以讓網(wǎng)頁(yè)從別的網(wǎng)域要數(shù)據(jù)秉版。
并不知道在說(shuō)什么，JSON with Padding茬祷？也太抽象了清焕。。。既然說(shuō)“可以讓網(wǎng)頁(yè)從別的網(wǎng)域要數(shù)據(jù)”秸妥，那就是說(shuō)JSONP的使用場(chǎng)景是需要跨域的滚停，先試著碼一碼吧。
假設(shè)我有一個(gè)賬戶粥惧，每當(dāng)我點(diǎn)擊付款按鈕键畴，就會(huì)從賬戶中扣款1元。
發(fā)送請(qǐng)求有兩種方案：
- 通過(guò)
<img>標(biāo)簽造get請(qǐng)求
button.addEventListener('click', (e)=>{
let image = document.createElement('img')
image.src = '/pay'
image.onload = function(){ // 狀態(tài)碼是 200~299 則表示成功
alert('成功')
}
image.onload = function(){ // 狀態(tài)碼大于等于 400 則表示失敗
alert('失敗')
}
})
- 通過(guò)
<script>標(biāo)簽造get請(qǐng)求
button.addEventListener('click', (e)=>{
let script = document.createElement('script')
script.src = '/pay'
document.body.appendChild(script)
script.onload = function(e){ // 狀態(tài)碼是 200~299 則表示成功
e.currentTarget.remove()
}
script.onload = function(e){ // 狀態(tài)碼大于等于 400 則表示失敗
e.currentTarget.remove()
}
})
顯然突雪，<script>標(biāo)簽更具有可行性起惕，畢竟你得需要有一張真的圖片來(lái)騙過(guò)瀏覽器，僅僅用來(lái)發(fā)送請(qǐng)求也太不合算了咏删。
先寫一個(gè)服務(wù)器來(lái)模擬一下所需環(huán)境惹想，當(dāng)然我還需要一個(gè)數(shù)據(jù)庫(kù)，在當(dāng)前目錄下創(chuàng)建督函。（這個(gè)數(shù)據(jù)庫(kù)先用來(lái)模擬第三方網(wǎng)址）
touch db
后端代碼長(zhǎng)這樣：
...
if(path === '/pay'){ //如果用戶點(diǎn)擊付款會(huì)向這個(gè)路徑發(fā)送請(qǐng)求
let amount = fs.readFileSync('./db', 'utf8')
amount -= 1
fs.writeFileSync('./db', amount)
response.setHeader('Content-Type', 'application/javascript')
response.write('amount.innerText = ' + amount)
response.end()
}
...
上面代碼嘀粱，當(dāng)我點(diǎn)擊付款按鈕，會(huì)將我數(shù)據(jù)庫(kù)中記錄的余額減1辰狡，然后再將當(dāng)前余額顯示在頁(yè)面锋叨。
這種技術(shù)叫做 SRJ - Server Rendered JavaScript
所以，利用<script>標(biāo)簽沒(méi)有跨域限制的“漏洞”宛篇，可以與第三方網(wǎng)址進(jìn)行通信娃磺。也就是維基百科所說(shuō)的“讓網(wǎng)頁(yè)從別的網(wǎng)域要數(shù)據(jù)”。
等等些己，通信剛剛實(shí)現(xiàn)了豌鸡，“要數(shù)據(jù)”怎么實(shí)現(xiàn)？接著碼段标。涯冠。。
既然<script>標(biāo)簽沒(méi)有跨域限制逼庞，那么我只需指定src到任何我想要請(qǐng)求數(shù)據(jù)的路徑就可以了蛇更。
第三個(gè)方案：JSONP
先設(shè)定一個(gè)場(chǎng)景：
請(qǐng)求方：aaa.com 的前端程序員（瀏覽器）
響應(yīng)方：bbb.com 的后端程序員（服務(wù)器）
1. 請(qǐng)求創(chuàng)建 script，src 指向響應(yīng)方赛糟，同時(shí)傳一個(gè)查詢參數(shù)?callbackName=yyy
2. 響應(yīng)方根據(jù)查詢參數(shù)callbackName派任，構(gòu)造形如
i. yyy.call(undefied,'你要的數(shù)據(jù)')
ii. yyy('你要的數(shù)據(jù)')
這樣的響應(yīng)
3. 瀏覽器接收到響應(yīng)，就會(huì)執(zhí)行yyy.call(undefined,'你要的數(shù)據(jù)')
4. 那么請(qǐng)求方就知道了他要的數(shù)據(jù)
這樣應(yīng)該就可以拿到我想要的數(shù)據(jù)了璧南。
那么前端代碼長(zhǎng)這樣：
button.addEventListener('click', (e)=>{
let script = document.createElement('script')
let functionName = 'yyy'+ parseInt(Math.random()*10000000 ,10)
window[functionName] = function(){ // 每次請(qǐng)求之前搞出一個(gè)隨機(jī)的函數(shù)
amount.innerText = amount.innerText - 0 - 1
}
script.src = '/pay?callback=' + functionName
document.body.appendChild(script)
script.onload = function(e){ // 狀態(tài)碼是 200~299 則表示成功
e.currentTarget.remove()
delete window[functionName] // 請(qǐng)求完了就干掉這個(gè)隨機(jī)函數(shù)
}
script.onload = function(e){ // 狀態(tài)碼大于等于 400 則表示失敗
e.currentTarget.remove()
delete window[functionName] // 請(qǐng)求完了就干掉這個(gè)隨機(jī)函數(shù)
}
})
后端代碼長(zhǎng)這樣：
...
if (path === '/pay'){
let amount = fs.readFileSync('./db', 'utf8')
amount -= 1
fs.writeFileSync('./db', amount)
let callbackName = query.callback
response.setHeader('Content-Type', 'application/javascript')
response.write(`
${callbackName}.call(undefined, 'success')
`)
response.end()
}
...
程序員們約定這樣寫：
callbackName -> callback
（文中為了方便理解用了callbackName代替）
這樣的話就真正達(dá)到雙方的通訊目的了掌逛，后端根據(jù)前端提供的callback參數(shù)構(gòu)造一個(gè)函數(shù)調(diào)用，把數(shù)據(jù)返回給第一個(gè)參數(shù)司倚，.call就拿到數(shù)據(jù)了豆混。
看來(lái)給<script>標(biāo)簽的src屬性加callback參數(shù)就是JSONP啦篓像。
如果使用jQuery，JSONP的請(qǐng)求方式就更簡(jiǎn)單啦：
$.ajax({
url: "http://bbb.com:8002/pay",
dataType: "jsonp",
success: function( response ) {
if(response === 'success'){
amount.innerText = amount.innerText - 1
}
}
})
$.jsonp()
吐槽一下：和ajax又有個(gè)鬼的關(guān)系皿伺。员辩。。
另外鸵鸥，JSONP是通過(guò)動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽實(shí)現(xiàn)的奠滑，動(dòng)態(tài)創(chuàng)建的<script>標(biāo)簽只能用get，不能用post妒穴。
所以說(shuō)宋税，通過(guò)動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽，并利用其src屬性提供一個(gè)callback參數(shù)構(gòu)造回調(diào)函數(shù)來(lái)接收數(shù)據(jù)讼油，從而達(dá)到與第三方網(wǎng)址建立通信的目的弃甥，這就是JSONP啦。
