到底什么是JSONP？它和JSON到底有什么關(guān)系冠息？這是我碰到JSONP時(shí)腦海里的浮現(xiàn)的第一個(gè)問題。先看看維基百科上是怎么解釋的：
JSONP(JSON with Padding)是數(shù)據(jù)格式JSON的一種“使用模式”孕索，可以讓網(wǎng)頁從別的網(wǎng)域要數(shù)據(jù)逛艰。
并不知道在說什么，JSON with Padding搞旭？也太抽象了散怖。。肄渗。既然說“可以讓網(wǎng)頁從別的網(wǎng)域要數(shù)據(jù)”镇眷，那就是說JSONP的使用場(chǎng)景是需要跨域的，先試著碼一碼吧翎嫡。
假設(shè)我有一個(gè)賬戶欠动，每當(dāng)我點(diǎn)擊付款按鈕，就會(huì)從賬戶中扣款1元惑申。
發(fā)送請(qǐng)求有兩種方案：
通過<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('失敗')
}
})
通過<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)簽更具有可行性，畢竟你得需要有一張真的圖片來騙過瀏覽器圈驼，僅僅用來發(fā)送請(qǐng)求也太不合算了人芽。
先寫一個(gè)服務(wù)器來模擬一下所需環(huán)境，當(dāng)然我還需要一個(gè)數(shù)據(jù)庫(kù)碗脊，在當(dāng)前目錄下創(chuàng)建啼肩。（這個(gè)數(shù)據(jù)庫(kù)先用來模擬第三方網(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)前余額顯示在頁面。
這種技術(shù)叫做 SRJ - Server Rendered JavaScript
所以矢劲，利用<script>標(biāo)簽沒有跨域限制的“漏洞”赦拘，可以與第三方網(wǎng)址進(jìn)行通信。也就是維基百科所說的“讓網(wǎng)頁從別的網(wǎng)域要數(shù)據(jù)”芬沉。
等等躺同，通信剛剛實(shí)現(xiàn)了阁猜，“要數(shù)據(jù)”怎么實(shí)現(xiàn)？接著碼蹋艺。剃袍。。
既然<script>標(biāo)簽沒有跨域限制捎谨，那么我只需指定src到任何我想要請(qǐng)求數(shù)據(jù)的路徑就可以了民效。
第三個(gè)方案：JSONP
先設(shè)定一個(gè)場(chǎng)景：
請(qǐng)求方：aaa.com 的前端程序員（瀏覽器）
響應(yīng)方：bbb.com 的后端程序員（服務(wù)器）
- 請(qǐng)求創(chuàng)建 script，src 指向響應(yīng)方涛救，同時(shí)傳一個(gè)查詢參數(shù)?callbackName=yyy
- 響應(yīng)方根據(jù)查詢參數(shù)callbackName畏邢，構(gòu)造形如
i. yyy.call(undefied,'你要的數(shù)據(jù)')
ii. yyy('你要的數(shù)據(jù)')
這樣的響應(yīng) - 瀏覽器接收到響應(yīng)，就會(huì)執(zhí)行yyy.call(undefined,'你要的數(shù)據(jù)')
- 那么請(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ù)了臂寝。
看來給<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是通過動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽實(shí)現(xiàn)的，動(dòng)態(tài)創(chuàng)建的<script>標(biāo)簽只能用get萝挤，不能用post御毅。
所以說，通過動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽怜珍，并利用其src屬性提供一個(gè)callback參數(shù)構(gòu)造回調(diào)函數(shù)來接收數(shù)據(jù)端蛆，從而達(dá)到與第三方網(wǎng)址建立通信的目的，這就是JSONP啦酥泛。
