JSONP的應用
先前因為沒工作需要,不存在需要跨域訪問的應用,一直沒接觸過JSONP,只是了解個大概意思,即是插入一個SCRIPT標簽,設置src,讓瀏覽器加載并自動運行,但具體怎么過程,有什么常見的約定等等不甚了解,今天有機會接觸了,具體說一下.
1. 其實JSONP也是一個”hack”應用
由于以前的應用沒現在這么復雜,跨域訪問瀏覽器端沒提供標準的方法(可能那時還根本沒考慮過..),當各種應用不斷的豐富之后,需求也隨之而來了,既然需求來了,但瀏覽器沒提供直接的實現,此時就只能根據已有功能,玩些雕蟲小技,待轉幾個彎,兜幾個圈之后,JSONP就出來了.
2. hack的背后實現
瀏覽器加載標簽的靜態資源是可以跨域訪問的,如常見的 link:href, script:src,img:src等等,沒有安全限制,可直接訪問,JSONP正是利用了這個特點,加載不同域上的腳本文件.
待把腳本script標簽插入DOM上的head標簽內,并設置好src屬性時,瀏覽器就開始加載腳本,腳本下載完后直接運行返回的文本內容.
3. 我們需要的是數據而非源碼
hack的過程已經了解,但目前為止作用不大,因為瀏覽器連接返回后獲得資源就是JavaScript源碼,并會立即執行這些源碼,你無法異想天開的將這文本放到一個可控的eval里運行之后獲得結果.假如這源碼是任意的,那運行過程根本無法控制,而我們需要的是數據,而非源碼!
要想控制這些源碼,獲得腳本運行的控制權,把源碼轉換成我們需要的數據,就得有個約定.
4. 普遍的相關約定
既然瀏覽器一定會自動執行返回的腳本這個客觀事實改變不了,我們可以在返回的文本上做點處理,和服務器端作個約定,把個已在存在的回調函數寫在外面,再把數據當作參數傳遞,當瀏覽器運行返回源碼的時候,將調用這個回調函數,這樣,控制權又從瀏覽器傳回到我們的手中,數據即參數,也有了,可以為所欲為.
這過程中回調函數的名稱是要確定的,通常是在發起前把回調函數名稱以提交參數的形式寫在URL中,服務器再從提交參數中把這回調函數名稱輸出到客戶端.
如,存在一個全局回調函數 function jsonp_callback(data){ alert(data.a); }
發起時 : jsonp.connect(‘http://www.example.com/getdata.php?callback=jsonp_callback’);
//
在服務器端發現這個callback參數值為jsonp_callback,將輸出類似的文本
jsonp_callback( /**數據*/{a:’b'} );
瀏覽器端請求返回后將立即運行 jsonp_callback( /**數據*/{a:’b'} );