天天看點

jsoup詳解 同源政策 script标簽的跨域能力 利用script擷取不同源的json 利用script擷取異域的jsonp 利用jQuery擷取jsonp 總結

json相信大家都用的多,jsonp我就一直沒有機會用到,但也經常看到,隻知道是“用來跨域的”,一直不知道具體是個什麼東西。今天總算搞明白了。下面一步步來搞清楚jsonp是個什麼玩意。

一個端口是2698,一個2701,按照定義它們是不同源的。

jsoup詳解 同源政策 script标簽的跨域能力 利用script擷取不同源的json 利用script擷取異域的jsonp 利用jQuery擷取jsonp 總結

在2698端口的網頁上添加一個按鈕,click事件随便發起兩個向端口為2701域的請求。

根據同源政策,很明顯會悲劇了。浏覽器會阻止,根本不會發起這個請求。(not allowed by access-control-allow-origin)

ok,原來jsonp是要解決這個問題的。

回到我們的2698端口的網頁,上面我們在click事件裡有一個對2701端口域的jquery檔案的請求,這次使用script标簽來請求。

當然,200,ok了

jsoup詳解 同源政策 script标簽的跨域能力 利用script擷取不同源的json 利用script擷取異域的jsonp 利用jQuery擷取jsonp 總結

同樣是端口2698的網頁發起對2701域的請求,放在script裡設定scr屬性的ok了,另一個方式就悲劇。利用script的跨域能力,這就是jsonp的基礎。

既然它叫jsonp,很明顯目的還是json,而且是跨域擷取。根據上面的分析,很容易想到:利用js構造一個script标簽,把json的url賦給script的scr屬性,把這個script插入到dom裡,讓浏覽器去擷取。實踐:

添加一個按鈕事件來測試一下:

jsoup詳解 同源政策 script标簽的跨域能力 利用script擷取不同源的json 利用script擷取異域的jsonp 利用jQuery擷取jsonp 總結

首先,第一個浏覽器,http://localhost:2701/home/somejson這個url的确是存在一個json的,而且在 2698網頁上用script标簽來請求這個2701這個url也是200ok的,但是最下面報js文法錯誤了。原來用script标簽加載完後,會立即 把響應當js去執行,很明顯{"email":"[email protected]","remark":"我來自遙遠的東方"}不是合法的js語句。

顯然,把上面的json放到一個回調方法裡是最簡單的方法。例如,變成這樣:

jsoup詳解 同源政策 script标簽的跨域能力 利用script擷取不同源的json 利用script擷取異域的jsonp 利用jQuery擷取jsonp 總結

如果存在jsonpcallback這個方法,那麼jsonpcallback({"email":"[email protected]","remark":"我來自遙遠的東方"})就是合法的js語句。

由于伺服器不知道用戶端的回調是什麼,不可能hard code成jsonpcallback,是以就帶一個querystring讓用戶端告訴服務端,回調方法是什麼,當然,querystring的key要遵從服務端的約定,上面的是”callback“。

添加回調函數:

把前面的方法稍微改改參數:

jsoup詳解 同源政策 script标簽的跨域能力 利用script擷取不同源的json 利用script擷取異域的jsonp 利用jQuery擷取jsonp 總結

200ok,伺服器傳回jsonpcallback({"email":"[email protected]","remark":"我來自遙遠的 東方"}),我們也寫了jsonpcallback方法,當然會執行。ok順利獲得了json。沒錯,到這裡就是jsonp的全部。

上面的方式中,又要插入script标簽,又要定義一個回調,略顯麻煩,利用jquery可以直接得到想要的json資料,同樣是上面的jsonp:

得到的結果跟上面類似。

一句話就是利用script标簽繞過同源政策,獲得一個類似這樣的資料,jsonpcallback是頁面存在的回調方法,參數就是想得到的json。

jsonpcallback({"email":"[email protected]","remark":"我來自遙遠的東方"})

繼續閱讀