跨域請求—JSONP實作跨域

Jsonp是實作跨域GET請求的最常用的方法，簡單有效地實作了不用域之間的資料交換。最常用來解決普通Ajax請求不能跨域通路的情況。

什麼是JSONP

Src跨域能力

在HTML頁面使用img，script，iframe等有src屬性的标簽時，從來沒有考慮過資源url的跨域問題。

例如：

不用下載下傳jquery檔案，就可以直接使用jquery代碼。

圖檔也能夠直接加載。

Jsonp

利用script的src跨域能力，将需要跨域請求的資料通過src的url請求到的JS類型檔案傳遞過來，請求的資料仍以我們最常用的JSON資料。

對于資料的處理通過在用戶端定義一個callback函數進行資料的處理，并将這個callback函數名作為url參數傳遞給服務端，服務端将在傳回的JS檔案中實作調用callback函數，并以JSON資料對象作為callback函數執行個體的參數，這樣在用戶端擷取到JS檔案之後會執行callback函數。

這種擷取資料的方式就是JSONP。

JSONP的實作

通過動态生成script，并将callback函數名作為src請求的參數傳遞給服務端。

var callBack= function(data){
        alert(data);
    };
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "url?callback=callBack";
document.getElementsByTagName('head')[].appendChild(script);
           

動态script添加成功之後，服務端收到url請求，接收到參數callback=callBack，就會将要傳回的JSON資料作為callBak函數的參數，執行調用callBak。

callBack({/*json data*/})
           

用戶端收到傳回的JS檔案，執行其中代碼，執行callBack({/json data/})執行個體，由于callBack函數在之前已經定義，是以callBack({/json data/})執行個體将會執行相應資料處理。就完成了Jsonp的跨域資料請求。

jQuery 實作Jsonp跨域

$.ajax({
         type: "GET",
         url: "url",
         dataType: "jsonp",
         jsonp: "callback",
         success: function(data){
         /*處理資料*/
         },
         error: function(){
         }
});
           

也可以通過jsonpCallback傳遞函數名，預設情況下jQuery會自動生成一個随機函數名，并将傳回的資料通過success函數來處理。

JSONP實作跨域請求的方式核心是根據script的src跨域能力，而AJAX是通過XmlHttpRequest。兩者已有本質上差別，不過JSONP确是實作跨域的有效方法。