什么是JSONP
- 請求方動態(tài)創(chuàng)建script標簽绳锅，src指向響應方冀自，同時傳一個查詢參數 榴嗅？callbackName=xxx
- 響應方根據查詢參數構造如：xxx.call(undefined,'你要的數據')這樣的響應
- 瀏覽器接收到響應化借，就會執(zhí)行xxx.call(undefined,'數據')
這就是JSONP
行業(yè)約定：
- callbackName ==> callback
- xxx ==>隨機數 比如：jp128884
let functionName= 'jp' + parseInt(Math.radom() * 10000)
window[functionName] = function(){}
delete window[radomName] //使用完后干掉這個函數，下次使用會生成新的
后端不需要知道前端的具體細節(jié)
后端返回主要數據若為一個JSON帜乞，JSON的左邊為回調函數部分司抱，右邊為）.即左邊一個padding，右邊一個padding黎烈，习柠，JSON + padding =JSONP
這個技術的名字起的很爛！怨喘！
換個好理解的名字可以稱之為： 動態(tài)標簽跨域請求
- 原生代碼實現(xiàn)JSONP
let script = document.createElement('script')
let functionName = 'jp' + parseInt(Math.random() * 10000,10)
script.src = '/pay?callback=' + functionName
window[functionName] = function(response){
console.log('收到數據為：' + response)
amount.innerText = amount.innerText - 1
delete window[functionName]
}
document.body.appendChild(script)
script.onload = function(e){
e.currentTarget.remove()
}
- jQuery實現(xiàn)JSONP
$.ajax({
url: "http://query.yahooapis.com/v1/public/yql",
// The name of the callback parameter, as specified by the YQL service
jsonp: "callback",
// Tell jQuery we're expecting JSONP
dataType: "jsonp",
// Tell YQL what we want and that we want JSON
data: {
q: "select title,abstract,url from search.news where query=\"cat\"",
format: "json"
},
// Work with the response
success: function( response ) {
console.log( response ); // server response
}
});
jQuery里把JSONP放在AJAX里面津畸，但實際上JSONP和AJAX沒有關系。
