本文實例講述了AngularJS實現的JSONP跨域訪問數據傳輸功能。分享給大家供大家參考，具體如下：

大家會自然想到只有一個字母之差的JSON吧~

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方法可以發送請求，如下所示：

$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>