JSONP的基本思想是，網(wǎng)頁通過添加一個(gè)<script>元素绞幌，向服務(wù)器請(qǐng)求JSON數(shù)據(jù)，這種做法不受同源政策限制覆积；服務(wù)器收到請(qǐng)求后，將數(shù)據(jù)放在一個(gè)指定名字的回調(diào)函數(shù)里傳回來
當(dāng)通過<script>元素調(diào)用數(shù)據(jù)時(shí)熟呛，響應(yīng)內(nèi)容必須用javascript函數(shù)名和圓括號(hào)包裹起來宽档。而不是發(fā)送這樣一段JSON數(shù)據(jù)，這就是JSONP中P的意義所在
[1, 2, {"buckle": "my shoe"}]
JSONP看起來與JSON差不多庵朝，只不過是被包含在函數(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è)常見的參數(shù)名稱是callback笔链，為了讓使用到的服務(wù)支持類似特殊的需求段只，就需要在代碼上做一些修改了
JSONP由兩部分組成：回調(diào)函數(shù)和數(shù)據(jù)〖ǎ回調(diào)函數(shù)是當(dāng)響應(yīng)到來時(shí)應(yīng)該在頁面中調(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ù)。通過査詢字符串來指定JSONP服務(wù)的回調(diào)參數(shù)是很常見的姐赡，就像上面的URL所示莱预，這里指定的回調(diào)函數(shù)的名字叫handleResponse()
JSONP是通過動(dòng)態(tài)<script>元素來使用的，使用時(shí)可以為src屬性指定一個(gè)跨域URL项滑。這里的<script>元素與<img>元素類似依沮，都有能力不受限制地從其他域加載資源。因?yàn)镴SONP是有效的javascript代碼枪狂，所以在請(qǐng)求完成后危喉，即在JSONP響應(yīng)加載到頁面中以后，就會(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之所以在開發(fā)人員中極為流行州疾，主要原因是它非常簡單易用辜限，老式瀏覽器全部支持，服務(wù)器改造非常小严蓖。與圖像Ping相比薄嫡，它的優(yōu)點(diǎn)在于能夠直接訪問響應(yīng)文本氧急，支持在瀏覽器與服務(wù)器之間雙向通信
使用<script>元素進(jìn)行Ajax傳輸，不受同源策略的影響毫深，因此可以使用它們從其他的服務(wù)器請(qǐng)求數(shù)據(jù)吩坝；而且，包含JSON編碼數(shù)據(jù)的響應(yīng)體會(huì)自動(dòng)解碼(即執(zhí)行)
不過哑蔫，JSONP也有兩點(diǎn)不足：首先钉寝，JSONP是從其他域中加載代碼執(zhí)行。如果其他域不安全鸳址，很可能會(huì)在響應(yīng)中夾帶一些惡意代碼瘩蚪，而此時(shí)除了完全放棄JSONP調(diào)用之外，沒有辦法追究稿黍。因此在使用不是自己運(yùn)維的Web服務(wù)時(shí)疹瘦，一定得保證它安全可靠；其次巡球，要確定JSONP請(qǐng)求是否失敗并不容易言沐。雖然HTML5給<script>元素新增了一個(gè)onerror事件處理程序，但目前還沒有得到任何瀏覽器支持酣栈。為此险胰，開發(fā)人員不得不使用計(jì)時(shí)器檢測指定時(shí)間內(nèi)是否接收到了響應(yīng)。但就算這樣也不能盡如人意矿筝，畢竟不是每個(gè)用戶上網(wǎng)的速度和帶寬都一樣
