先前因?yàn)闆]工作需要,不存在需要跨域訪問的應(yīng)用,一直沒接觸過JSONP,只是了解個(gè)大概意思,即是插入一個(gè)SCRIPT標(biāo)簽,設(shè)置src,讓瀏覽器加載并自動運(yùn)行,但具體怎么過程,有什么常見的約定等等不甚了解,今天有機(jī)會接觸了,具體說一下.

　　1. 其實(shí)JSONP也是一個(gè)”hack”應(yīng)用

　　由于以前的應(yīng)用沒現(xiàn)在這么復(fù)雜,跨域訪問瀏覽器端沒提供標(biāo)準(zhǔn)的方法(可能那時(shí)還根本沒考慮過..),當(dāng)各種應(yīng)用不斷的豐富之后,需求也隨之而來了,既然需求來了,但瀏覽器沒提供直接的實(shí)現(xiàn),此時(shí)就只能根據(jù)已有功能,玩些雕蟲小技,待轉(zhuǎn)幾個(gè)彎,兜幾個(gè)圈之后,JSONP就出來了.

　　2. hack的背后實(shí)現(xiàn)

　　瀏覽器加載標(biāo)簽的靜態(tài)資源是可以跨域訪問的,如常見的 link:href, script:src,img:src等等,沒有安全限制,可直接訪問,JSONP正是利用了這個(gè)特點(diǎn),加載不同域上的腳本文件.

　　待把腳本script標(biāo)簽插入DOM上的head標(biāo)簽內(nèi),并設(shè)置好src屬性時(shí),瀏覽器就開始加載腳本,腳本下載完后直接運(yùn)行返回的文本內(nèi)容.

　　3. 我們需要的是數(shù)據(jù)而非源碼

　　hack的過程已經(jīng)了解,但目前為止作用不大,因?yàn)闉g覽器連接返回后獲得資源就是JavaScript源碼,并會立即執(zhí)行這些源碼,你無法異想天開的將這文本放到一個(gè)可控的eval里運(yùn)行之后獲得結(jié)果.假如這源碼是任意的,那運(yùn)行過程根本無法控制,而我們需要的是數(shù)據(jù),而非源碼!
　　要想控制這些源碼,獲得腳本運(yùn)行的控制權(quán),把源碼轉(zhuǎn)換成我們需要的數(shù)據(jù),就得有個(gè)約定.

　　4. 普遍的相關(guān)約定
　　既然瀏覽器一定會自動執(zhí)行返回的腳本這個(gè)客觀事實(shí)改變不了,我們可以在返回的文本上做點(diǎn)處理,和服務(wù)器端作個(gè)約定,把個(gè)已在存在的回調(diào)函數(shù)寫在外面,再把數(shù)據(jù)當(dāng)作參數(shù)傳遞,當(dāng)瀏覽器運(yùn)行返回源碼的時(shí)候,將調(diào)用這個(gè)回調(diào)函數(shù),這樣,控制權(quán)又從瀏覽器傳回到我們的手中,數(shù)據(jù)即參數(shù),也有了,可以為所欲為.
　　這過程中回調(diào)函數(shù)的名稱是要確定的,通常是在發(fā)起前把回調(diào)函數(shù)名稱以提交參數(shù)的形式寫在URL中,服務(wù)器再從提交參數(shù)中把這回調(diào)函數(shù)名稱輸出到客戶端.

　　如,存在一個(gè)全局回調(diào)函數(shù) function jsonp_callback(data){ alert(data.a); }

　　發(fā)起時(shí) : jsonp.connect(‘http://www.example.com/getdata.php?callback=jsonp_callback’);

　　//
　　在服務(wù)器端發(fā)現(xiàn)這個(gè)callback參數(shù)值為jsonp_callback,將輸出類似的文本

　　jsonp_callback( /**數(shù)據(jù)*/{a:’b'} );

　　瀏覽器端請求返回后將立即運(yùn)行 jsonp_callback( /**數(shù)據(jù)*/{a:’b'} );

it知識庫：JSONP的應(yīng)用，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。