快捷導(dǎo)航

借助script進(jìn)行Http跨域請(qǐng)求:JSONP實(shí)現(xiàn)原理及代碼

更新時(shí)間：2013年03月19日 14:51:09 作者：

script元素的src屬性能設(shè)置URL并發(fā)起HTTP GET請(qǐng)求實(shí)現(xiàn)腳本操作HTTP可以跨域通信而不受限與同源策略，接下來(lái)為大家詳細(xì)介紹下Http跨域請(qǐng)求實(shí)現(xiàn)，感興趣的你可以參考下哈

復(fù)制代碼代碼如下:

 
response( 
[1, 2, {"hello", "world"}] 
) 

為了可行期間, 我們必須通過(guò)某種方式告訴服務(wù), 它正在從一個(gè)<script>元素調(diào)用, 必須返回一個(gè)jsonp響應(yīng), 而不是普通的json, 這個(gè)可以通過(guò)在url中添加一個(gè)查詢參數(shù)來(lái)實(shí)現(xiàn): 例如, 追加"?json"(或者&json)

在實(shí)踐中, 支持jsonp的服務(wù)不會(huì)強(qiáng)制指定客戶端必須實(shí)現(xiàn)的回調(diào)函數(shù)名稱, 比如response. 相反它們使用查詢參數(shù)的值, 允許客戶端指定一個(gè)函數(shù)名,然后使用函數(shù)名去填充響應(yīng).

復(fù)制代碼代碼如下:

 
//根據(jù)指定的url發(fā)送一個(gè)json請(qǐng)求 
//然后把解析得到的響應(yīng)數(shù)據(jù)傳遞給回調(diào)函數(shù) 
//在url中添加一個(gè)名為jsonp的查詢參數(shù), 用于指定該請(qǐng)求的回調(diào)函數(shù)的名稱 
function getJSONP(url, callback){ 
//為本次請(qǐng)求創(chuàng)建一個(gè)唯一的回調(diào)函數(shù)名稱 
var cbnum = "cb"+getJSONP.counter++; 
var cbname = "getJSONP."+cbnum; //作為jsonp函數(shù)的屬性 
//將回調(diào)函數(shù)名稱以表單編碼的形式添加到url查詢部分中 
if(url.indexOf("?") === -1){ 
url += "?jsonp="+cbname; 
}else{ 
url += "&jsonp="+cbname; 
} 
//創(chuàng)建<script>用于發(fā)送請(qǐng)求 
var script = document.createElement("script"); 
//定義被腳本執(zhí)行的回調(diào)函數(shù) 
getJSONP[cbnum] = function(response){ 
try{ 
callback(response); //處理響應(yīng) 
} 
finally{ 
//刪除該函數(shù), 并移除相應(yīng)script元素 
delete getJSONP[cbnum]; 
script.parentNode.removeChild(script); 
} 
} 
//立即觸發(fā)http請(qǐng)求 
script.src = url; 
document.body.appendChild(script); 
} 
getJSONP.counter = 0; 