AngularJS中的JSONP執行個體解析_jquery

概念

      首先呢，Json和JSONP是不一樣的哦。Json呢，是眾多資料存放區的其中一種格式，是資料書寫方式的其中一種。好比是大中華眾多詩體的一種(比如說是七言詩吧)。這種詩體規定了: 這種詩體要包含題目，每行詩句的字數(7個字) 等等的文字格式設定。而Json所規定的文字格式設定是這樣子的

(Json格式示意圖)

　  而JSONP呢，它是一種特殊的通訊方式，使用它能夠輕鬆繞過瀏覽器的同源安全限制，達到載入來自不同源的資源(指令碼, 圖片, 其他)的效果。比如說，您是一個王國的王子，你意外地喜歡上了附近一個小城鎮裡面的一位漂亮年輕的姑娘(資源)，你想和她見面並進一步往下發展(擷取資源)。但是呢，您的父親國王先生(瀏覽器)可不同意，國王認為這個姑娘不是王室的女孩(非同源的資源)，配不上王子，把王子困在城堡裡面的同時，還往城堡外放好多士兵監察，禁止外人進入(瀏覽器的同源安全限制)。但是王子對愛非常堅持，他試過多種方式與這個姑娘聯絡，比如說讓太監歐巴帶封信給漂亮姑娘(PUT,GET,POST等等)，但是呢，每當到達城門的時候，士兵就會發現這封信的地址是給小姑娘的，於是屢屢禁止了太監出去(擷取外部資源時，PUT,GET,POST不奏效)。於是王子想到了一種特殊的通訊方式，就是飛鴿傳書(JSONP)，小鴿子呢能夠飛躍城堡，從而避開士兵的監察(繞過瀏覽器的同源安全限制)，來達到與姑娘通訊的效果(與跨域資源共用CORS的通訊實現啦!O(∩_∩)O)。最終，經過九九八十一難之後，王子喜歡上了太監(∑(っ °Д °;)っ 人生處處充滿驚喜...)

具體的實現方法

    要達到這種通訊效果，王子(發送請求的方式)和姑娘(服務端)都要有所準備。

　王子在發送JSONP請求的時候，首先需要一隻鴿子吧(使用Jsonp), 再來呢，需要一封信綁在鴿子上(地址欄中的callback參數)

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

　　當姑娘接到小鴿子帶來的信之後呢，也要把內容寫在小鴿子身上的信，來回信(通過callback參數，把響應內容封裝成一個JavaScript參數，並由該請求對應的回呼函數來進行調用)

　　封裝資料的方法

res.send(【callback函數】+ '('+ JSON.stringify(result) + ')');

　其他細節

    使用JSONP的時候，AngularJS會產生一個 <script> 標籤並插入到DOM中進行請求，響應成功之後會把該節點刪除(刪除節點這點具體Angular版本不同可能會有所不同吧)

　　其中,CALLBACK會被替換成一個特地為此請求產生的自訂函數，即是由

$http.jsonp("https://api.github.com?callback=CALLBACK")...) 變成

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

   因此當我們自己開發JSONP的後端服務時，要確保響應資料被包含在請求指定的回呼函數中

 　注意事項

   使用JSOPN有潛在的安全隱患，因為JSONP允許後端服務調用應用的JavaScript，使網站變得脆弱的同時，還可能暴露使用者隱私

　 文章參考

  《AngularJS權威教程》

以上就是本文的全部內容，希望對大家有所協助，同時也希望多多支援雲棲社區！