JSON(JavaScript Object Notation)和JSONP(JSON with Padding)雖然只有一個字母的差別，但其實他們根本不是一回事兒

JSON是一種資料交換格式，而JSONP是一種依靠開發人員的聰明才智創造出的一種非官方跨域資料互動協議。我們拿最近比較火的諜戰片來打個比方，JSON是地下黨們用來書寫和交換情報的“暗號”，而JSONP則是把用暗號書寫的情報傳遞給自己同志時使用的接頭方式。看到沒？一個是描述資訊的格式，一個是資訊傳遞雙方約定的方法。

瀏覽器是存在同源策略這個機制的，在全域性層面禁止了頁面載入或執行與自身來源不同的域的任何指令碼。

JSONP是一種可以繞過瀏覽器的安全限制，從不同的域請求資料的方法。

Web頁面上呼叫js檔案時則不受是否跨域的影響（不僅如此，我們還發現凡是擁有”src”這個屬性的標籤都擁有跨域的能力，比如<script>、<img>、<iframe>）；

如果想通過純web端（ActiveX控制元件、服務端代理、屬於未來的HTML5之Websocket等方式不算）跨域訪問資料就只有一種可能，那就是在遠端伺服器上設法把資料裝進js格式的檔案裡，供客戶端呼叫和進一步處理；JSON的純字元資料格式可以簡潔的描述複雜資料，被js原生支援，所以在web客戶端通過與呼叫指令碼一模一樣的方式，來呼叫跨域伺服器上動態生成的js格式檔案（一般以JSON為字尾），顯而易見，伺服器之所以要動態生成JSON檔案，目的就在於把客戶端需要的資料裝入進去。為了便於客戶端使用資料，逐漸形成了一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許使用者傳遞一個callback引數給服務端，然後服務端返回資料時會將這個callback引數作為函式名來包裹住JSON資料，這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了。

JSONP的原理是通過<script>標籤發起一個GET請求來取代XHR請求。JSONP生成一個<script>標籤並插到DOM中，然後瀏覽器會接管並向src屬性所指向的地址傳送請求。

當伺服器返回請求時，響應結果會被包裝成一個JavaScript函式，並由該請求所對應的回撥函式呼叫。

AngularJS在http服務中提供了一個JSONP輔助函式。通過
http服務的jsonp方法可以傳送請求，如下所示：

$http .jsonp("https://api.github.com?callback=JSON_CALLBACK") .success(function
 
(data) { 

　　// 資料
});

當請求被髮送時，AngularJS會在DOM中生成一個如下所示的<script>標籤：

<script src="https://api.github.com?callback=angular.callbacks._0" type="text/javascript"></script> 

注意，JSON_CALLBACK被替換成了一個特地為此請求生成的自定義函式。當支援JSOPN的伺服器返回資料時，資料會被包裝在由AngularJS生成的具名函式angular.callbacks._0中在這個例子中，GitHub伺服器會返回包含在回撥函式中的JSON資料，響應看起來如下所示：　

// 簡寫　　

　　angular.callbacks._0({ 

　　　　'meta': {
　　　　　　'X-RateLimit-Limit': '60',
　　　　　　'status': 200
　　　　},
　　　　'data': {
　　　　　　'current_user_url': 'https://api.github.com/user'
　　　　}
　　}) 

當AngularJS呼叫指定的回撥函式時會對$http的promise物件進行resolve。當我們自己開發支援JSONP的後端服務時，要確保響應的資料被包含在請求所指定的回撥函式中。使用JSONP需要意識到潛在的安全風險。首先，伺服器會完全開放，允許後端服務呼叫應用中的任何JavaScript。不受我們控制的外部站點（或者蓄意攻擊者）可以隨時更改指令碼，使我們的整個站點變得脆弱。伺服器或中間人有可能會將額外的JavaScript邏輯返回給頁面，從而將使用者的隱私資料暴露出來。由於請求是由<script>標籤傳送的，所以只能通過JSONP傳送GET請求。並且指令碼的異常也很難處理。使用JSONP一定要謹慎，同時只跟信任並可以控制的伺服器進行通訊。

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

Jquery中jsonp的使用

myUrl = "http://localhost:8090/api/test";

$.ajax({
　　type:"GET",
　　url:myUrl,
　　dataType:"jsonp",
　　jsonp:"callback",
　　jsonpCallback:"jsonpCallback",
　　success:function(data){
　　　　alert(data.msg);
　　}
});

function jsonpCallback(data){
　　alert(data);
}

1.jsonp只能使用get請求，解決同源問題，返回javascript程式碼，因為請求javascript檔案是沒有同源問題的。
2.當請求資料型別為jsonp時，會將callback=jsonpCallback加在url上，http://localhost:8090/api/testcallback=jsonpCallback
3.前臺javascript中定義jsonpCallback函式，此函式必須定義在window下，也就是全域性的函式，否則找不到。
4.後臺獲取請求的callback引數值jsonpCallback，返回字串"jsonpCallback(result)"，result為返回結果。
5.請求返回的是script tag，首先會呼叫jsonpCallback函式，不管是否找到該函式，都會呼叫success函式。
6.如果沒有定義jsonp和jsonpCallback，jsonp預設為"callback",jsonpCallback會是Jquery自動生成的函式名。

angularJS中jsonp的使用

myUrl = "http://localhost:8090/api/test?callback=JSON_CALLBACK";

$http.jsonp(myUrl).success(
　　function(data){
　　　　alert(data);
　　}
);

1.angularJS中使用$http.jsonp函式
2.指定callback和回撥函式名，函式名為JSON_CALLBACK時，會呼叫success回撥函式，JSON_CALLBACK必須全為大寫。
3.也可以指定其它回撥函式，但必須是定義在window下的全域性函式。
4.url中必須加上callback
5.當callback為JSON_CALLBACK時，只會呼叫success，即使window中有JSON_CALLBACK函式，也不會呼叫該函式。