聊一聊 JSONP

JSONP

說到 JSONP 就要說到同源策略（Same Origin Policy), 同源策略是瀏覽器最核心的也是最基本的安全功能。

瀏覽器的同源策略，限制了來自不一樣源的 「document」 或腳本，對當前 「document」 讀寫或設置某些屬性。

通俗的說法就是外來的腳本沒法碰到自家的文檔。

影響 「源」 的因素有四個： 主機名 host，子域名、端口、協議。

JSONP(JSON with padding). 這是一種從遠端服務器抓取數據的方式。原理是經過建立一個 script 標籤，所轄的外部文件包含一段 JSON 數據，數據是由服務器返回的，做爲參數包裝在一個函數調用中。script 標籤獲取腳本文件不受跨域的限制（一樣具備跨域加載數據能力的標籤還有：img、iframe、link等標籤，均不受同源策略的限制），全部的瀏覽器都支持這種技術。

首先，在 head 裏添加 script 標籤

<script src="http://example.com/data.json"></script>

預先定義全局函數，等待返回數據中的方法調用

window.jsonCallback = function(result) {
    // 處理返回結果的相關邏輯
}

請求的文件裏的數據是,一個方法還有做爲參數的數據，數據加載到瀏覽器後，腳本會被執行，隨之方法會被調用（方法已經定義好）

jsonCallback({"data":"foo"});

好在，jQ 已經把它包了起來

jQuery.getJSON("http://example.com/data.json", function() {
    // 處理返回結果的相關邏輯
})