AngularJS中的JSONP實(shí)例解析
概念
首先呢，Json和JSONP是不一樣的哦。Json呢，是眾多數(shù)據(jù)存儲(chǔ)的其中一種格式，是數(shù)據(jù)書寫方式的其中一種。好比是大中華眾多詩(shī)體的一種(比如說是七言詩(shī)吧)。這種詩(shī)體規(guī)定了: 這種詩(shī)體要包含題目，每行詩(shī)句的字?jǐn)?shù)(7個(gè)字) 等等的文本格式。而Json所規(guī)定的文本格式是這樣子的
(Json格式示意圖)
而JSONP呢，它是一種特殊的通訊方式，使用它能夠輕松繞過瀏覽器的同源安全限制，達(dá)到加載來(lái)自不同源的資源(腳本, 圖片, 其他)的效果。比如說，您是一個(gè)王國(guó)的王子，你意外地喜歡上了附近一個(gè)小城鎮(zhèn)里面的一位漂亮年輕的姑娘(資源)，你想和她見面并進(jìn)一步往下發(fā)展(獲取資源)。但是呢，您的父親國(guó)王先生(瀏覽器)可不同意，國(guó)王認(rèn)為這個(gè)姑娘不是王室的女孩(非同源的資源)，配不上王子，把王子困在城堡里面的同時(shí)，還往城堡外放好多士兵監(jiān)察，禁止外人進(jìn)入(瀏覽器的同源安全限制)。但是王子對(duì)愛非常堅(jiān)持，他試過多種方式與這個(gè)姑娘聯(lián)系，比如說讓太監(jiān)歐巴帶封信給漂亮姑娘(PUT,GET,POST等等)，但是呢，每當(dāng)?shù)竭_(dá)城門的時(shí)候，士兵就會(huì)發(fā)現(xiàn)這封信的地址是給小姑娘的，于是屢屢禁止了太監(jiān)出去(獲取外部資源時(shí)，PUT,GET,POST不奏效)。于是王子想到了一種特殊的通訊方式，就是飛鴿傳書(JSONP)，小鴿子呢能夠飛躍城堡，從而避開士兵的監(jiān)察(繞過瀏覽器的同源安全限制)，來(lái)達(dá)到與姑娘通訊的效果(與跨域資源共享CORS的通訊實(shí)現(xiàn)啦!O(∩_∩)O)。最終，經(jīng)過九九八十一難之后，王子喜歡上了太監(jiā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)容寫在小鴿子身上的信，來(lái)回信(通過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)我們自己開發(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í)，還可能暴露用戶隱私
文章參考
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家有所幫助，同時(shí)也希望多多支持腳本之家！
- 使用AngularJS 跨站請(qǐng)求如何解決jsonp請(qǐng)求問題
- angular.js中解決跨域問題的三種方式
- 詳解基于angular-cli配置代理解決跨域請(qǐng)求問題
- Angular實(shí)現(xiàn)跨域(搜索框的下拉列表)
- 解析AngularJS中g(shù)et請(qǐng)求URL出現(xiàn)的跨域問題
- 詳解AngularJS如何實(shí)現(xiàn)跨域請(qǐng)求
- AngularJs解決跨域問題案例詳解(簡(jiǎn)單方法)
- AngularJS iframe跨域打開內(nèi)容時(shí)報(bào)錯(cuò)誤的解決辦法
- AngularJS實(shí)現(xiàn)的JSONP跨域訪問數(shù)據(jù)傳輸功能詳解
相關(guān)文章
jQuery插件boxScroll實(shí)現(xiàn)圖片輪播特效
本文給大家分享的是使用jQuery插件Boxscroll來(lái)實(shí)現(xiàn)簡(jiǎn)單的圖片輪播特效的代碼，非常簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-07-07
十個(gè)迅速提升JQuery性能讓你的JQuery跑得更快
jQuery正在成為Web開發(fā)人員首選的JavaScript庫(kù),作為Web開發(fā)者,除了要了解語(yǔ)言和框架的應(yīng)用技巧外如何提升語(yǔ)言的性能,本文提供即刻提升你的腳本性能的十個(gè)步驟 簡(jiǎn)單的幾步讓你的JQuery跑得更快 需要的朋友可以參考下2012-12-12
基于jquery實(shí)現(xiàn)彩色投票進(jìn)度條代碼解析
這篇文章主要介紹了基于jquery實(shí)現(xiàn)彩色投票進(jìn)度條代碼解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
jquery獲取當(dāng)前元素索引值用法實(shí)例
這篇文章主要介紹了jquery獲取當(dāng)前元素索引值用法,實(shí)例分析了jQuery獲取當(dāng)前元素索引在創(chuàng)建圖片輪播效果中的使用技巧,需要的朋友可以參考下2015-06-06
jQuery之網(wǎng)頁(yè)換膚實(shí)現(xiàn)代碼
用jQuery做網(wǎng)頁(yè)換膚確實(shí)是很一個(gè)很巧妙，很好的選擇，這是本人在學(xué)習(xí)jQuery中學(xué)的知識(shí)，感覺很有用，寫了下來(lái)，希望大家有更好的方法或者代碼不足的地方請(qǐng)諒解，本人也是初學(xué)者啊，希望大家互相勉勵(lì)互相學(xué)習(xí)。2011-04-04
這篇文章主要介紹了JS/JQuery顯示或隱藏文本方法,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了jQuery中focus事件用法,以實(shí)例形式分析了獲取焦點(diǎn)時(shí)focus事件的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
$.each是一個(gè)通用的迭代函數(shù)，可用于近似地迭代 對(duì)象和數(shù)組，這個(gè)函數(shù)與$().each是專用用于迭代和執(zhí)行jquery對(duì)象函數(shù)2014-03-03
在IE 瀏覽器中使用 jquery的fadeIn() 效果 英文字符字體加粗
在IE 瀏覽器中使用 jquery的fadeIn() 效果 英文字符字體加粗的解決方法分享。2011-06-06
這篇文章主要介紹了jQuery讀取XML文件的方法,結(jié)合實(shí)例形式分析了jQuery基于ajax針對(duì)xml文件的讀取操作相關(guān)技巧,需要的朋友可以參考下2017-02-02