JSONP的基本思想是缚窿，網(wǎng)頁(yè)通過(guò)添加一個(gè)<script>元素，向服務(wù)器請(qǐng)求JSON數(shù)據(jù)焰扳，這種做法不受同源政策限制倦零；服務(wù)器收到請(qǐng)求后，將數(shù)據(jù)放在一個(gè)指定名字的回調(diào)函數(shù)里傳回來(lái)
當(dāng)通過(guò)<script>元素調(diào)用數(shù)據(jù)時(shí)吨悍，響應(yīng)內(nèi)容必須用javascript函數(shù)名和圓括號(hào)包裹起來(lái)扫茅。而不是發(fā)送這樣一段JSON數(shù)據(jù)，這就是JSONP中P的意義所在
[1, 2, {"buckle": "my shoe"}]
JSONP看起來(lái)與JSON差不多育瓜，只不過(guò)是被包含在函數(shù)調(diào)用中的JSON葫隙，它會(huì)發(fā)送這樣一個(gè)包裹后的JSON響應(yīng)：
handleResponse([l, 2, {"buckle": "my shoe"}])
包裹后的響應(yīng)會(huì)成為<script>元素的內(nèi)容，它先判斷JSON編碼后的數(shù)據(jù)躏仇，然后把它傳遞給handleResponse()函數(shù)
在實(shí)踐中恋脚，支持JSONP的服務(wù)不會(huì)強(qiáng)制指定客戶端必須實(shí)現(xiàn)的回調(diào)函數(shù)名稱，比如handleResponse焰手。相反糟描，它們使用査詢參數(shù)的值，允許客戶端指定一個(gè)函數(shù)名书妻，然后使用函數(shù)名去填充響應(yīng)船响。許多支持JSONP的服務(wù)都能分辨出這個(gè)參數(shù)名顶籽。另一個(gè)常見(jiàn)的參數(shù)名稱是callback注暗，為了讓使用到的服務(wù)支持類似特殊的需求，就需要在代碼上做一些修改了
JSONP由兩部分組成：回調(diào)函數(shù)和數(shù)據(jù)扫沼〕绾牵回調(diào)函數(shù)是當(dāng)響應(yīng)到來(lái)時(shí)應(yīng)該在頁(yè)面中調(diào)用的函數(shù)缤剧。回調(diào)函數(shù)的名字一般是在請(qǐng)求中指定的域慷。而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的JSON數(shù)據(jù)
[http://freegeoip.net/json/?callback=handleResponse](http://freegeoip.net/json/?callback=handleResponse)
這個(gè)URL是在請(qǐng)求一個(gè)JSONP地理定位服務(wù)荒辕。通過(guò)査詢字符串來(lái)指定JSONP服務(wù)的回調(diào)參數(shù)是很常見(jiàn)的，就像上面的URL所示犹褒，這里指定的回調(diào)函數(shù)的名字叫handleResponse()
JSONP是通過(guò)動(dòng)態(tài)<script>元素來(lái)使用的抵窒，使用時(shí)可以為src屬性指定一個(gè)跨域URL。這里的<script>元素與<img>元素類似叠骑，都有能力不受限制地從其他域加載資源李皇。因?yàn)镴SONP是有效的javascript代碼，所以在請(qǐng)求完成后，即在JSONP響應(yīng)加載到頁(yè)面中以后掉房，就會(huì)立即執(zhí)行
|
1
2
3
4
5
|
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](http://freegeoip.net/json/?callback=handLeResponse)"``; document.body.insertBefore(script, document.body.firstChild);
|
JSONP之所以在開(kāi)發(fā)人員中極為流行茧跋，主要原因是它非常簡(jiǎn)單易用，老式瀏覽器全部支持卓囚，服務(wù)器改造非常小瘾杭。與圖像Ping相比，它的優(yōu)點(diǎn)在于能夠直接訪問(wèn)響應(yīng)文本哪亿，支持在瀏覽器與服務(wù)器之間雙向通信
使用<script>元素進(jìn)行Ajax傳輸粥烁，不受同源策略的影響，因此可以使用它們從其他的服務(wù)器請(qǐng)求數(shù)據(jù)蝇棉；而且讨阻，包含JSON編碼數(shù)據(jù)的響應(yīng)體會(huì)自動(dòng)解碼(即執(zhí)行)
不過(guò)，JSONP也有兩點(diǎn)不足：首先篡殷，JSONP是從其他域中加載代碼執(zhí)行钝吮。如果其他域不安全，很可能會(huì)在響應(yīng)中夾帶一些惡意代碼贴唇，而此時(shí)除了完全放棄JSONP調(diào)用之外搀绣，沒(méi)有辦法追究飞袋。因此在使用不是自己運(yùn)維的Web服務(wù)時(shí)戳气，一定得保證它安全可靠；其次巧鸭，要確定JSONP請(qǐng)求是否失敗并不容易瓶您。雖然HTML5給<script>元素新增了一個(gè)onerror事件處理程序，但目前還沒(méi)有得到任何瀏覽器支持纲仍。為此呀袱，開(kāi)發(fā)人員不得不使用計(jì)時(shí)器檢測(cè)指定時(shí)間內(nèi)是否接收到了響應(yīng)。但就算這樣也不能盡如人意郑叠，畢竟不是每個(gè)用戶上網(wǎng)的速度和帶寬都一樣
