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