序
同源策略是瀏覽器處于安全考慮,為通信設置了“相同的域、相同的端口、相同的協(xié)議”這一限制。這讓我們的ajax請求存在跨域無權限訪問的問題。
同時我們發(fā)現(xiàn)script標簽引入腳本的行為并不受同源策略的限制,但是script引入的文件會被立即執(zhí)行,如果其內容不符合js語法,則會報錯;
操作原理
針對以上情況,誕生了jsonp:
利用script標簽的src屬性來請求接口,并向接口傳遞一個回調函數(shù)(克服了同源問題)
接口將數(shù)據(jù)以
回調函數(shù)參數(shù)
的形式同回調函數(shù)一同傳回;此時傳回則是這樣形式的一個字符串:回調函數(shù)名(數(shù)據(jù))
,這樣就符合js語法了(克服了script標簽引入內容非js報錯的問題)
實例操作
紙上得來總覺淺,絕知此事要躬行。jsonp的原理我早就倒背入流了,但是看著覺得明白,但總覺得少了點什么沒抓住。所以,實際操刀試試吧。點擊下載源碼
下載代碼后,進入some-code/jsonp-demo文件夾,該文件夾的目錄為:
app.js
package.json
views