JSONP瀏覽器安全模型規(guī)定
JSONP (JSON with Padding) 是資料格式 JSON 的一種“使用模式”，可以讓網(wǎng)頁從別的網(wǎng)域獲取資料。另一個(gè)解決這個(gè)問題的新方法是跨來源資源共享。
瀏覽器安全模型規(guī)定，XMLHttpRequest、框架（frame）等只能在一個(gè)域中通信。從安全角度考慮，這個(gè)規(guī)定很合理；但是，也確實(shí)給分布式（面向服務(wù)、混搭等等本周提到的概念）Web開發(fā)帶來了麻煩。
為了實(shí)現(xiàn)跨域通信，通常的解決方案有3種：
本地代理：
需要一些硬件設(shè)施（沒有服務(wù)器的客戶端無法運(yùn)行），并且?guī)捄蜐摲鼤r(shí)間也要加倍（遠(yuǎn)程服務(wù)器－代理服務(wù)器－客戶端）。
Flash：
遠(yuǎn)程主機(jī)中需要部署一個(gè)crossdomain.xml文件，而且，F(xiàn)lash作為一門專有技術(shù)，其前途尚不明朗；換句話說，開發(fā)人員很可能要學(xué)習(xí)一種目標(biāo)不確定的編程語言。
Script標(biāo)簽：
無法確切知道內(nèi)容是否有效，沒有標(biāo)準(zhǔn)的實(shí)現(xiàn)方法，又可能被認(rèn)為是一種“安全風(fēng)險(xiǎn)”。
在此，我建議使用一種新技術(shù)，也是一種獨(dú)立于標(biāo)準(zhǔn)的方法，即通過script標(biāo)簽來跨域獲取數(shù)據(jù)，名為JSON with Padding，或者就叫JSONP。JSONP的原理很簡(jiǎn)單，但需要服務(wù)器端給予相應(yīng)配合。大致來說，JSONP的實(shí)現(xiàn)思路就是在客戶端編程時(shí)作好使用JSON數(shù)據(jù)的準(zhǔn)備，然后再通過圓括號(hào)將這些數(shù)據(jù)括起來以創(chuàng)建一條有效的JavaScript語句（可能是一次有效的函數(shù)調(diào)用）。
也就是說，客戶端可以使用一個(gè)用于命名jsonp的查詢參數(shù)來決定可以獲取的數(shù)據(jù)。最簡(jiǎn)單的情況下，如果jsonp參數(shù)為空，則返回的數(shù)據(jù)就是被括在圓括號(hào)中的JSON。
下面，我們就以del.icio.us的JSON API為例，來說明JSONP的原理。該API有一個(gè)“script tag”變量（即，可以將下面的URL作為script標(biāo)簽的src屬性值，用以加載del.icio.us這個(gè)API提供的數(shù)據(jù)?！g者注）如下所示：
http://del.icio.us/feeds/json/bob/mochikit+interpreter:
- if(typeof(Delicious) == 'undefined') Delicious = {};
- Delicious.posts = [{
- "u": "http://mochikit.com/examples/interpreter/index.html",
- "d": "Interpreter - JavaScript Interactive Interpreter",
- "t": [
- "mochikit","webdev","tool","tools",
- "javascript","interactive","interpreter","repl"
- ]
- }]
如果用JSONP的方式來表示，那么與此具有相同語義的URL應(yīng)該是這樣的：
http://del.icio.us/feeds/json/bob/mochikit+interpreter?
jsonp=if(typeof(Delicious)%3D%3D%27undefined%27)
Delicious%3D%7B%7D%3BDelicious.posts%3D
單純看這個(gè)URL似乎沒有什么，但我們可以要求服務(wù)器在數(shù)據(jù)有效時(shí)給出通知。因此，我可以編寫一個(gè)用于跟蹤數(shù)據(jù)的小系統(tǒng)：
- var delicious_callbacks = {};
- function getDelicious(callback, url) {
- var uid = (new Date()).getTime();
- delicious_callbacks[uid] = function () {
- delete delicious_callbacks[uid];
- callback();
- };
- url += "?jsonp=" + encodeURIComponent("delicious_callbacks[" + uid + "]");
- // 手工輸入代碼，向文檔中插入script標(biāo)簽
- };
- getDelicious(doSomething, "http://del.icio.us/feeds/json/bob/mochikit+interpreter");
根據(jù)以上假設(shè)，用于獲取數(shù)據(jù)的URL應(yīng)該如下所示：
http://del.icio.us/feeds/json/bob/mochikit+interpreter?jsonp=delicious_callbacks%5B12345%5D
- delicious_callbacks[12345]([{
- "u": "http://mochikit.com/examples/interpreter/index.html",
- "d": "Interpreter - JavaScript Interactive Interpreter",
- "t": [
- "mochikit","webdev","tool","tools",
- "javascript","interactive","interpreter","repl"
- ]
- }])
可見，由于使用圓括號(hào)括住了返回的數(shù)據(jù)，這就相當(dāng)于把一個(gè)JSONP請(qǐng)求轉(zhuǎn)化成了一次函數(shù)調(diào)用，或者得到了一個(gè)純粹的JSON直接量。服務(wù)器所要配合做的，就是在JSON數(shù)據(jù)的開頭添加一小段文本（即回調(diào)函數(shù)的名稱?！g者注）并將JSON數(shù)據(jù)放在括號(hào)中！
當(dāng)然，接下來最好是使用Mochikit、Dojo等框架來抽象JSONP，從而讓自己省去動(dòng)手編寫DOM以插入script標(biāo)簽的麻煩。
沒錯(cuò)，JSONP只是解決了標(biāo)準(zhǔn)化的問題。假如遠(yuǎn)程主機(jī)想通過script標(biāo)簽向頁面中注入惡意代碼，而不是返回JSON數(shù)據(jù)，那么頁面安全可能會(huì) 隨時(shí)受到威脅。不過，一旦實(shí)現(xiàn)了JSONP，那么對(duì)開發(fā)人員來說肯定是一件省時(shí)省力的大好事，在此基礎(chǔ)上各種一般化的抽象、教程及文檔也會(huì)應(yīng)運(yùn)而生的。