一看就懂：jsonp詳解_jquery

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

同源策略

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

1、隨便建兩個網頁

一個連接埠是2698，一個2701，依照定義它們是不同來源的。

2.用jQuery發起不同來源的請求
在2698埠的網頁上新增一個按鈕，Click事件隨便發起兩個向連接埠為2701網域的請求。

複製程式碼 程式碼如下:

$("#getOtherDomainThings").click(function () {
    $.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", function (data) {
        console.log(data)
    })

    $.get("http://localhost:2701/home/index", function (data) {
        console.log(data)
    })
})

根據同源策略，很明顯會悲劇了。瀏覽器會阻止，根本不會發起這個請求。 （not allowed by Access-Control-Allow-Origin）

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

script標籤的跨域能力
我不知道大家知不知道CDN這個東西，例如微軟的CDN，使用它，我們的網頁可以不提供jQuery，由微軟的網站幫我們提供：

複製程式碼 程式碼如下:

回到我們的2698端口的網頁，上面我們在Click事件裡有一個對2701端口域的jQuery文件的請求，這次使用script標籤來請求。

複製程式碼 程式碼如下:

當然，200，OK了

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

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

複製程式碼 程式碼如下:

function CreateScript(src) {
    $("<script>/script>").attr("src", src).appendTo("body")<br /> }<br /> </script>

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

複製程式碼 程式碼如下:

$("#getOtherDomainJson").click(function () {
    $.get('http://localhost:2701/home/somejson', function (data) {
        console.log(data)
    })
})

首先，第一個瀏覽器，http://localhost:2701/home/somejson這個Url的確是存在一個json的，而且在2698網頁上用script標籤來請求這個2701這個Url也是200OK的，但是最下面報js語法錯誤了。原來用script標籤載入完後，會立即 把回應當js去執行，很明顯{"Email":"zhww@outlook.com","Remark":"我來自遙遠的東方"}不是合法的js語句。

利用script取得異域的jsonp

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

如果有jsonpcallback這個方法，那麼jsonpcallback({"Email":"zhww@outlook.com","Remark":"我來自遙遠的東方"})就是合法的js語句。

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

新增回呼函數：

複製程式碼 程式碼如下:

function jsonpcallback(json) {
    console.log(json)
}

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

複製程式碼 程式碼如下:

$("#getJsonpByHand").click(function () {
    CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")
})

200OK，伺服器回傳jsonpcallback({"Email":"zhww@outlook.com","Remark":"我來自遙遠的 東方"})，我們也寫了jsonpcallback方法，當然會執行。 OK順利獲得了json。沒錯，到這裡就是jsonp的全部。

利用jQuery取得jsonp
上面的方式中，又要插入script標籤，又要定義一個回調，略顯麻煩，利用jQuery可以直接得到想要的json數據，同樣是上面的jsonp：

複製程式碼 程式碼如下:

$("#getJsonpByJquery").click(function () {
    $.ajax({
        url: 'http://localhost:2701/home/somejsonp',
        dataType: "jsonp",
        jsonp: "callback",
        success: function (data) {
            console.log(data)
        }
    })
})

得到的結果跟上面類似。

總結

一句話就是利用script標籤繞過同源策略，得到一個類似這樣的數據，jsonpcallback是頁面存在的回呼方法，參數就是想得到的json。

複製程式碼 程式碼如下:

jsonpcallback({"Email":"zhww@outlook.com","Remark":"我來自遙遠的東方"})

ADD 原生js:

複製程式碼 程式碼如下:

點選按鈕>

    函數 $(str){
        回傳 document.getElementById(str)
    }
    函數 CreateScript(src) {
        var Scrip=document.createElement('script');
        Scrip.src=src;
        document.body.appendChild(Scrip);
    }
    函數 jsonpcallback(json) {
            console.log(json);//物件 { email="中國", email2="中國222"}
    }
    $('btn').onclick=function(){
      CreateScript("http://localhost:51335/somejson?callback=jsonpcallback")   
    }
腳本>