藉助script進行Http跨域請求:JSONP實現原理及代碼

<script>元素的src屬效能設定URL並發起HTTP GET請求, 使用<script>元素實現指令碼操作HTTP可以跨域通訊而不受限與同源策略. 通常, 使用基於<script>的Ajax傳輸協議時, 伺服器響應採用JSON編碼的資料格式, 當執行指令碼時候, JavaScript解析器能夠自動將其解碼. 由於它使用JSON資料格式, 因此這種Ajax傳輸協議也叫做"JSONP". 所以使用jsonp技術, 只需要設定<script>的src屬性, 並且插入到document中, 然後瀏覽器就會發送一個http請求以下載src屬性所執行的url.

當使用<script>元素調用資料時, 響應內容必須用JavaScript函數名和圓括弧包裹起來(也就是只能作為函數的參數), 而不是直接的一段json資料:
複製代碼 代碼如下:
response(
[1, 2, {"hello", "world"}]
)

為了可行期間, 我們必須通過某種方式告訴服務, 它正在從一個<script>元素調用, 必須返回一個jsonp響應, 而不是普通的json, 這個可以通過在url中添加一個查詢參數來實現: 例如, 追加"?json"(或者&json)

在實踐中, 支援jsonp的服務不會強制指定用戶端必須實現的回呼函數名稱, 比如response. 相反它們使用查詢參數的值, 允許用戶端指定一個函數名,然後使用函數名去填充響應.
複製代碼 代碼如下:
//根據指定的url發送一個json請求
//然後把解析得到的響應資料傳遞給回呼函數
//在url中添加一個名為jsonp的查詢參數, 用於指定該請求的回呼函數的名稱
function getJSONP(url, callback){
//為本次請求建立一個唯一的回呼函數名稱
var cbnum = "cb"+getJSONP.counter++;
var cbname = "getJSONP."+cbnum; //作為jsonp函數的屬性
//將回呼函數名稱以表單編碼的形式添加到url查詢部分中
if(url.indexOf("?") === -1){
url += "?jsonp="+cbname;
}else{
url += "&jsonp="+cbname;
}
//建立<script>用於發送請求
var script = document.createElement("script");
//定義被指令碼執行的回呼函數
getJSONP[cbnum] = function(response){
try{
callback(response); //處理響應
}
finally{
//刪除該函數, 並移除相應script元素
delete getJSONP[cbnum];
script.parentNode.removeChild(script);
}
}
//立即觸發http請求
script.src = url;
document.body.appendChild(script);
}
getJSONP.counter = 0;