AngularJS中的JSONP實例解析
概念
首先呢，Json和JSONP是不一樣的哦。Json呢，是眾多數(shù)據(jù)存儲的其中一種格式，是數(shù)據(jù)書寫方式的其中一種。好比是大中華眾多詩體的一種(比如說是七言詩吧)。這種詩體規(guī)定了: 這種詩體要包含題目，每行詩句的字數(shù)(7個字) 等等的文本格式。而Json所規(guī)定的文本格式是這樣子的
(Json格式示意圖)
而JSONP呢，它是一種特殊的通訊方式，使用它能夠輕松繞過瀏覽器的同源安全限制，達到加載來自不同源的資源(腳本, 圖片, 其他)的效果。比如說，您是一個王國的王子，你意外地喜歡上了附近一個小城鎮(zhèn)里面的一位漂亮年輕的姑娘(資源)，你想和她見面并進一步往下發(fā)展(獲取資源)。但是呢，您的父親國王先生(瀏覽器)可不同意，國王認為這個姑娘不是王室的女孩(非同源的資源)，配不上王子，把王子困在城堡里面的同時，還往城堡外放好多士兵監(jiān)察，禁止外人進入(瀏覽器的同源安全限制)。但是王子對愛非常堅持，他試過多種方式與這個姑娘聯(lián)系，比如說讓太監(jiān)歐巴帶封信給漂亮姑娘(PUT,GET,POST等等)，但是呢，每當?shù)竭_城門的時候，士兵就會發(fā)現(xiàn)這封信的地址是給小姑娘的，于是屢屢禁止了太監(jiān)出去(獲取外部資源時，PUT,GET,POST不奏效)。于是王子想到了一種特殊的通訊方式，就是飛鴿傳書(JSONP)，小鴿子呢能夠飛躍城堡，從而避開士兵的監(jiān)察(繞過瀏覽器的同源安全限制)，來達到與姑娘通訊的效果(與跨域資源共享CORS的通訊實現(xiàn)啦!O(∩_∩)O)。最終，經(jīng)過九九八十一難之后，王子喜歡上了太監(jiān)(∑(っ °Д °;)っ 人生處處充滿驚喜...)
具體的實現(xiàn)方法
要達到這種通訊效果，王子(發(fā)送請求的方式)和姑娘(服務(wù)端)都要有所準備。
王子在發(fā)送JSONP請求的時候，首先需要一只鴿子吧(使用Jsonp), 再來呢，需要一封信綁在鴿子上(地址欄中的callback參數(shù))
$http.jsonp("...})
當姑娘接到小鴿子帶來的信之后呢，也要把內(nèi)容寫在小鴿子身上的信，來回信(通過callback參數(shù)，把響應(yīng)內(nèi)容包裝成一個JavaScript參數(shù)，并由該請求對應(yīng)的回調(diào)函數(shù)來進行調(diào)用)
包裝數(shù)據(jù)的方法
res.send(【callback函數(shù)】+ '('+ JSON.stringify(result) + ')');
其他細節(jié)
使用JSONP的時候，AngularJS會生成一個 <script> 標簽并插入到DOM中進行請求，響應(yīng)成功之后會把該節(jié)點刪除(刪除節(jié)點這點具體Angular版本不同可能會有所不同吧)
其中,CALLBACK會被替換成一個特地為此請求生成的自定義函數(shù)，即是由
$http.jsonp("變成
<script src=">
因此當我們自己開發(fā)JSONP的后端服務(wù)時，要確保響應(yīng)數(shù)據(jù)被包含在請求指定的回調(diào)函數(shù)中
注意事項
使用JSOPN有潛在的安全隱患，因為JSONP允許后端服務(wù)調(diào)用應(yīng)用的JavaScript，使站點變得脆弱的同時，還可能暴露用戶隱私
文章參考
以上就是本文的全部內(nèi)容，希望對大家有所幫助，同時也希望多多支持腳本之家！
相關(guān)文章
通過JQuery實現(xiàn)win8一樣酷炫的動態(tài)磁貼效果(示例代碼)
相信大家喜歡這個界面無非也是喜歡它的動態(tài)磁貼。剛好今天研究了一下如何通過JQuery在網(wǎng)頁上模仿這種效果，就貼出來給大家噴一下。雖然是一些很低級的技術(shù)，但是也希望有需要的朋友可以參考下2013-07-07
基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之數(shù)據(jù)支持json字符串、list集合
這篇文章主要介紹了基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之數(shù)據(jù)支持json字符串、list集合的相關(guān)者，小編推薦使用返回list集合的方法，具體原因大家可以根據(jù)本文學習下2016-08-08
JQuery、AJAX都是Javascript的一個框架，各有各自不同的功能，下面為大家介紹下jquery和ajax的關(guān)系，不了解的朋友可以參考下2013-11-11
jquery的ajax提交form表單的兩種方法小結(jié)(推薦)
下面小編就為大家?guī)硪黄猨query的ajax提交form表單的兩種方法小結(jié)(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考2016-05-05
這篇文章主要介紹了jQuery分組選擇器簡單用法,結(jié)合實例形式分析了使用jQuery分組選擇器動態(tài)設(shè)置頁面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
本文是對jqgrid 編輯添加功能進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
jQuery Selectors(選擇器)的使用(四-五、內(nèi)容篇&可見性篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法，我將以實例方式進行講述，以簡單，全面為基礎(chǔ)，不會涉及很深，我的學習方法：先入門，后進階！2009-12-12
這篇文章主要介紹通過Jquery如何給基本控件的取值、賦值,需要的朋友可以參考下2014-05-05
以下是用jquery控制ASP.NET中的兩個asp:listbox控件中選擇項的移動。2009-11-11
Jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象,Map()方法詳解以及數(shù)組中查詢某值是否存在
今天小編就為大家分享一篇關(guān)于Jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象|Map()方法詳解以及數(shù)組中查詢某值是否存在，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01