這篇文章主要介紹了AngularJS如何實(shí)現(xiàn)的JSONP跨域訪問數(shù)據(jù)傳輸功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)公司一直秉承“誠信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！專注中小微企業(yè)官網(wǎng)定制，網(wǎng)站制作、網(wǎng)站建設(shè)，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。

js有什么特點(diǎn)

1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺(tái)下運(yùn)行，擁有著跨平臺(tái)特性；3、js屬于一種弱類型腳本語言，對(duì)使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進(jìn)行類型轉(zhuǎn)換，簡(jiǎn)單又容易上手；4、js語言安全性高，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對(duì)象的腳本語言，js不僅可以創(chuàng)建對(duì)象，也能使用現(xiàn)有的對(duì)象。

具體如下：

JSON(JavaScript Object Notation)和JSONP(JSON with Padding)雖然只有一個(gè)字母的差別，但其實(shí)他們根本不是一回事兒

JSON是一種數(shù)據(jù)交換格式，而JSONP是一種依靠開發(fā)人員的聰明才智創(chuàng)造出的一種非官方跨域數(shù)據(jù)交互協(xié)議。我們拿最近比較火的諜戰(zhàn)片來打個(gè)比方，JSON是地下黨們用來書寫和交換情報(bào)的“暗號(hào)”，而JSONP則是把用暗號(hào)書寫的情報(bào)傳遞給自己同志時(shí)使用的接頭方式。看到?jīng)]？一個(gè)是描述信息的格式，一個(gè)是信息傳遞雙方約定的方法。

瀏覽器是存在同源策略這個(gè)機(jī)制的，在全局層面禁止了頁面加載或執(zhí)行與自身來源不同的域的任何腳本。

JSONP是一種可以繞過瀏覽器的安全限制，從不同的域請(qǐng)求數(shù)據(jù)的方法。

Web頁面上調(diào)用js文件時(shí)則不受是否跨域的影響（不僅如此，我們還發(fā)現(xiàn)凡是擁有”src”這個(gè)屬性的標(biāo)簽都擁有跨域的能力，比如<script>、<img>、<iframe>）；

如果想通過純web端（ActiveX控件、服務(wù)端代理、屬于未來的HTML5之Websocket等方式不算）跨域訪問數(shù)據(jù)就只有一種可能，那就是在遠(yuǎn)程服務(wù)器上設(shè)法把數(shù)據(jù)裝進(jìn)js格式的文件里，供客戶端調(diào)用和進(jìn)一步處理；JSON的純字符數(shù)據(jù)格式可以簡(jiǎn)潔的描述復(fù)雜數(shù)據(jù)，被js原生支持，所以在web客戶端通過與調(diào)用腳本一模一樣的方式，來調(diào)用跨域服務(wù)器上動(dòng)態(tài)生成的js格式文件（一般以JSON為后綴），顯而易見，服務(wù)器之所以要?jiǎng)討B(tài)生成JSON文件，目的就在于把客戶端需要的數(shù)據(jù)裝入進(jìn)去。為了便于客戶端使用數(shù)據(jù)，逐漸形成了一種非正式傳輸協(xié)議，人們把它稱作JSONP，該協(xié)議的一個(gè)要點(diǎn)就是允許用戶傳遞一個(gè)callback參數(shù)給服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來包裹住JSON數(shù)據(jù)，這樣客戶端就可以隨意定制自己的函數(shù)來自動(dòng)處理返回?cái)?shù)據(jù)了。

JSONP的原理是通過<script>標(biāo)簽發(fā)起一個(gè)GET請(qǐng)求來取代XHR請(qǐng)求。JSONP生成一個(gè)<script>標(biāo)簽并插到DOM中，然后瀏覽器會(huì)接管并向src屬性所指向的地址發(fā)送請(qǐng)求。

當(dāng)服務(wù)器返回請(qǐng)求時(shí)，響應(yīng)結(jié)果會(huì)被包裝成一個(gè)JavaScript函數(shù)，并由該請(qǐng)求所對(duì)應(yīng)的回調(diào)函數(shù)調(diào)用。

AngularJS在http服務(wù)中提供了一個(gè)JSONP輔助函數(shù)。通過http服務(wù)中提供了一個(gè)JSONP輔助函數(shù)。通過http服務(wù)的jsonp方法可以發(fā)送請(qǐng)求，如下所示：

$http .jsonp("https://api.github.com?callback=JSON_CALLBACK") .success(function(data) {
 // 數(shù)據(jù)
});

當(dāng)請(qǐng)求被發(fā)送時(shí)，AngularJS會(huì)在DOM中生成一個(gè)如下所示的<script>標(biāo)簽：

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

注意，JSON_CALLBACK被替換成了一個(gè)特地為此請(qǐng)求生成的自定義函數(shù)。當(dāng)支持JSOPN的服務(wù)器返回?cái)?shù)據(jù)時(shí)，數(shù)據(jù)會(huì)被包裝在由AngularJS生成的具名函數(shù)angular.callbacks._0中在這個(gè)例子中，GitHub服務(wù)器會(huì)返回包含在回調(diào)函數(shù)中的JSON數(shù)據(jù)，響應(yīng)看起來如下所示： 

// 簡(jiǎn)寫
angular.callbacks._0({
  'meta': {
   'X-RateLimit-Limit': '60',
   'status': 200
  },
  'data': {
   'current_user_url': 'https://api.github.com/user'
  }
})

當(dāng)AngularJS調(diào)用指定的回調(diào)函數(shù)時(shí)會(huì)對(duì)$http的promise對(duì)象進(jìn)行resolve。當(dāng)我們自己開發(fā)支持JSONP的后端服務(wù)時(shí)，要確保響應(yīng)的數(shù)據(jù)被包含在請(qǐng)求所指定的回調(diào)函數(shù)中。使用JSONP需要意識(shí)到潛在的安全風(fēng)險(xiǎn)。首先，服務(wù)器會(huì)完全開放，允許后端服務(wù)調(diào)用應(yīng)用中的任何JavaScript。不受我們控制的外部站點(diǎn)（或者蓄意攻擊者）可以隨時(shí)更改腳本，使我們的整個(gè)站點(diǎn)變得脆弱。服務(wù)器或中間人有可能會(huì)將額外的JavaScript邏輯返回給頁面，從而將用戶的隱私數(shù)據(jù)暴露出來。由于請(qǐng)求是由<script>標(biāo)簽發(fā)送的，所以只能通過JSONP發(fā)送GET請(qǐng)求。并且腳本的異常也很難處理。使用JSONP一定要謹(jǐn)慎，同時(shí)只跟信任并可以控制的服務(wù)器進(jìn)行通信。

一句話就是利用script標(biāo)簽繞過同源策略，獲得一個(gè)類似這樣的數(shù)據(jù)，jsonpcallback是頁面存在的回調(diào)方法，參數(shù)就是想得到的json。

Jquery中jsonp的使用

myUrl = "http://localhost:8090/api/test";
$.ajax({
 type:"GET",
 url:myUrl,
 dataType:"jsonp",
 jsonp:"callback",
 jsonpCallback:"jsonpCallback",
 success:function(data){
  alert(data.msg);
 }
});
function jsonpCallback(data){
 alert(data);
}

1.jsonp只能使用get請(qǐng)求，解決同源問題，返回javascript代碼，因?yàn)檎?qǐng)求javascript文件是沒有同源問題的。
2.當(dāng)請(qǐng)求數(shù)據(jù)類型為jsonp時(shí)，會(huì)將callback=jsonpCallback加在url上，http://localhost:8090/api/testcallback=jsonpCallback
3.前臺(tái)javascript中定義jsonpCallback函數(shù)，此函數(shù)必須定義在window下，也就是全局的函數(shù)，否則找不到。
4.后臺(tái)獲取請(qǐng)求的callback參數(shù)值jsonpCallback，返回字符串"jsonpCallback(result)"，result為返回結(jié)果。
5.請(qǐng)求返回的是script tag，首先會(huì)調(diào)用jsonpCallback函數(shù)，不管是否找到該函數(shù)，都會(huì)調(diào)用success函數(shù)。
6.如果沒有定義jsonp和jsonpCallback，jsonp默認(rèn)為"callback",jsonpCallback會(huì)是Jquery自動(dòng)生成的函數(shù)名。

angularJS中jsonp的使用

myUrl = "http://localhost:8090/api/test?callback=JSON_CALLBACK";
$http.jsonp(myUrl).success(
 function(data){
  alert(data);
 }
);

1.angularJS中使用$http.jsonp函數(shù)
2.指定callback和回調(diào)函數(shù)名，函數(shù)名為JSON_CALLBACK時(shí)，會(huì)調(diào)用success回調(diào)函數(shù)，JSON_CALLBACK必須全為大寫。
3.也可以指定其它回調(diào)函數(shù)，但必須是定義在window下的全局函數(shù)。
4.url中必須加上callback
5.當(dāng)callback為JSON_CALLBACK時(shí)，只會(huì)調(diào)用success，即使window中有JSON_CALLBACK函數(shù)，也不會(huì)調(diào)用該函數(shù)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“AngularJS如何實(shí)現(xiàn)的JSONP跨域訪問數(shù)據(jù)傳輸功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

新聞標(biāo)題：AngularJS如何實(shí)現(xiàn)的JSONP跨域訪問數(shù)據(jù)傳輸功能
當(dāng)前URL：http://chinadenli.net/article24/ipsdce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、網(wǎng)站建設(shè)、做網(wǎng)站、App開發(fā)、營銷型網(wǎng)站建設(shè)、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)