1. 同源策略是瀏覽器處于安全考慮,為通信設(shè)置了“相同的域、相同的端口、相同的協(xié)議”這一限制。這讓我們的ajax請求存在跨域無權(quán)限訪問的問題。

  2. 同時我們發(fā)現(xiàn)script標(biāo)簽引入腳本的行為并不受同源策略的限制,但是script引入的文件會被立即執(zhí)行,如果其內(nèi)容不符合js語法,則會報錯;

操作原理

針對以上情況,誕生了jsonp:

  1. 利用script標(biāo)簽的src屬性來請求接口,并向接口傳遞一個回調(diào)函數(shù)(克服了同源問題)

  2. 接口將數(shù)據(jù)以回調(diào)函數(shù)參數(shù)的形式同回調(diào)函數(shù)一同傳回;此時傳回則是這樣形式的一個字符串:回調(diào)函數(shù)名(數(shù)據(jù)),這樣就符合js語法了(克服了script標(biāo)簽引入內(nèi)容非js報錯的問題)

實例操作

紙上得來總覺淺,絕知此事要躬行。jsonp的原理我早就倒背入流了,但是看著覺得明白,但總覺得少了點(diǎn)什么沒抓住。所以,實際操刀試試吧。點(diǎn)擊下載源碼

下載代碼后,進(jìn)入some-code/jsonp-demo文件夾,該文件夾的目錄為:

app.js

package.json

views

    網(wǎng)友評論