瀏覽器跨域問題 jsonp jsonp詳解

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

首先基於安全的原因，瀏覽器是存在同源策略這個機制的，同源策略阻止從乙個源載入的文件或指令碼獲取或設定另乙個源載入的文件的屬性。看起來不知道什麼意思，實踐一下就知道了。

乙個埠是2698，乙個2701，按照定義它們是不同源的。

在2698埠的網頁上新增乙個按鈕，click事件隨便發起兩個向埠為2701域的請求。

})根據同源策略，很明顯會悲劇了。瀏覽器會阻止，根本不會發起這個請求。（not allowed by access-control-allow-origin）

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

不知道大家知不知道cdn這個東西，例如微軟的cdn，使用它，我們的網頁可以不提供jquery，由微軟的**幫我們提供：

回到我們的2698埠的網頁，上面我們在click事件裡有乙個對2701埠域的jquery檔案的請求，這次使用script標籤來請求。

當然，200，ok了

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

既然它叫jsonp，很明顯目的還是json，而且是跨域獲取。根據上面的分析，很容易想到：利用js構造乙個script標籤，把json的url賦給script的scr屬性，把這個script插入到dom裡，讓瀏覽器去獲取。實踐：

function createscript(src)

新增乙個按鈕事件來測試一下：

首先，第乙個瀏覽器，http://localhost:2701/home/somejson這個url的確是存在乙個json的，而且在 2698網頁上用script標籤來請求這個2701這個url也是200ok的，但是最下面報js語法錯誤了。原來用script標籤載入完後，會立即把響應當js去執行，很明顯不是合法的js語句。

顯然，把上面的json放到乙個**方法裡是最簡單的方法。例如，變成這樣：

如果存在jsonpcallback這個方法，那麼jsonpcallback()就是合法的js語句。

由於伺服器不知道客戶端的**是什麼，不可能hard code成jsonpcallback，所以就帶乙個querystring讓客戶端告訴服務端，**方法是什麼，當然，querystring的key要遵從服務端的約定，上面的是」callback「。

新增**函式：

function jsonpcallback(json)

把前面的方法稍微改改引數：

200ok，伺服器返回jsonpcallback()，我們也寫了jsonpcallback方法，當然會執行。ok順利獲得了json。沒錯，到這裡就是jsonp的全部。

上面的方式中，又要插入script標籤，又要定義乙個**，略顯麻煩，利用jquery可以直接得到想要的json資料，同樣是上面的jsonp：

$("#getjsonpbyjquery").click(function () 
})})

得到的結果跟上面類似。

一句話就是利用script標籤繞過同源策略，獲得乙個類似這樣的資料，jsonpcallback是頁面存在的**方法，引數就是想得到的json。

jsonpcallback()

add 原生js:

click

瀏覽器跨域問題 jsonp jsonp詳解

瀏覽器跨域問題

瀏覽器跨域問題

瀏覽器跨域

相關推薦