首頁 > web前端 > js教程 > 主體

AngularJS中的JSONP實例解析

高洛峰
發布: 2016-12-03 10:44:37
原創
1122 人瀏覽過

概念

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

AngularJS中的JSONP實例解析

(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版本不同可能會有所不同吧)</script>

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

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

收到,讓網站變得脆弱的同時,也可能暴露用戶隱私

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板