JSONP全面分析

JSONP

JSONP是JSON with padding(填充式JSON或參數(shù)式JSON)的簡寫,是應用JSON的一種新方法,在后來的Web服務中非常流行。JSONP看起來與JSON差不多,只不過是被包含在函數(shù)調(diào)用中的JSON, 就像下面這樣。

callback({ "name": "Nicholas" });

JSONP由兩部分組成:回調(diào)函數(shù)和數(shù)據(jù)?;卣{(diào)函數(shù)是當響應到來時應該在頁面中調(diào)用的函數(shù)?;卣{(diào)函數(shù)的名字一般是在請求中指定的。而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的JSON數(shù)據(jù)。下面是一個典型的JSONP請求。

http://freegeoip.net/json/?callback=handleResponse

這個URL是在請求一個JSONP地理定位服務。通過查詢字符串來指定JSONP服務的回調(diào)參數(shù)是很常見的,就像上面的URL所示,這里指定的回調(diào)函數(shù)的名字叫handleResponse()。

JSONP是通過動態(tài)script元素來使用的,使用時可以為src屬性指定一個跨域URL。這里的script元素與img元素類似,都有能力不受限制地從其他域加載資源。因為JSONP是有效的JavaScript代碼,所以在請求完成后,即在JSONP響應加載到頁面中以后,就會立即執(zhí)行。來看一個例子。

function handleResponse(response){

alert("You’re at IP address " + response.ip + ", which is in " +response.city + ", " + response.region_name);

}

var script = document.createElement("script");

script.src = "http://freegeoip.net/json/?callback=handleResponse"; ? ? document.body.insertBefore(script,document.body.firstChild);

這個例子通過查詢地理定位服務來顯示你的IP地址和位置信息。

JSONP之所以在開發(fā)人員中極為流行,主要原因是它非常簡單易用。與圖像Ping相比,它的優(yōu)點在于能夠直接訪問響應文本,支持在瀏覽器與服務器之間雙向通信。不過,JSONP也有兩點不足。

首先,JSONP是從其他域中加載代碼執(zhí)行。如果其他域不安全,很可能會在響應中夾帶一些惡意代碼,而此時除了完全放棄JSONP調(diào)用之外,沒有辦法追究。因此在使用不是你自己運維的Web服務時,一定得保證它安全可靠。

其次,要確定JSONP請求是否失敗并不容易。雖然HTML5給script元素新增了一個onerror事件處理程序,但目前還沒有得到任何瀏覽器支持。為此,開發(fā)人員不得不使用計時器檢測指定時間內(nèi)是否接收到了響應。但就算這樣也不能盡如人意,畢竟不是每個用戶上網(wǎng)的速度和帶寬都一樣。

本文由web前端精髓為您提供

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容