成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JSONP原理及JQUERY JSONP的使用

suosuopuo / 2520人閱讀

摘要：同源策略在中有一個(gè)很重要的安全性限制，被稱為同源策略。然而，當(dāng)進(jìn)行一些比較深入的前端編程的時(shí)候，不可避免地需要進(jìn)行跨域操作，這時(shí)候同源策略就顯得過(guò)于苛刻。

JSONP原理 JSON和JSONP

　　JSON(JavaScript Object Notation)是一種輕量級(jí)的數(shù)據(jù)交換格式。對(duì)于JSON大家應(yīng)該是很了解了吧，不是很清楚的朋友可以去json.org上了解下，簡(jiǎn)單易懂。

　　JSONP是JSON with Padding的略稱。它是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Scripttags返回至客戶端，通過(guò)javascriptcallback的形式實(shí)現(xiàn)跨域訪問(wèn)（這僅僅是JSONP簡(jiǎn)單的實(shí)現(xiàn)形式）。

　　JSONP就像是JSON+Padding一樣(Padding這里我們理解為填充)，我們先看下面的小例子然后再詳細(xì)介紹。

同源策略

在JavaScript中,有一個(gè)很重要的安全性限制，被稱為“Same-OriginPolicy”（同源策略）。這一策略對(duì)于JavaScript代碼能夠訪問(wèn)的頁(yè)面內(nèi)容做了很重要的限制，即JavaScript只能訪問(wèn)與包含它的文檔在同一域下的內(nèi)容。

根據(jù)這個(gè)策略，在baidu.com下的頁(yè)面中包含的JavaScript代碼，不能訪問(wèn)在google.com域名下的頁(yè)面內(nèi)容；甚至不同的子域名之間的頁(yè)面也不能通過(guò)JavaScript代碼互相訪問(wèn)。對(duì)于Ajax的影響在于，通過(guò)XMLHttpRequest實(shí)現(xiàn)的Ajax請(qǐng)求，不能向不同的域提交請(qǐng)求，例如，在abc.example.com下的頁(yè)面，不能向def.example.com提交Ajax請(qǐng)求，等等。然而，當(dāng)進(jìn)行一些比較深入的前端編程的時(shí)候，不可避免地需要進(jìn)行跨域操作，這時(shí)候“同源策略”就顯得過(guò)于苛刻。

然而html中有一些元素是不存在跨域問(wèn)題的如:script,iframe等元素,利用這些元素,就能很好的解決這個(gè)問(wèn)題.

JSONP的實(shí)現(xiàn)方式

利用在頁(yè)面中創(chuàng)建 //通過(guò)加載example2的JS文件來(lái)達(dá)到函數(shù)調(diào)用和數(shù)據(jù)傳遞

?example2.com的test.js內(nèi)容如下

//回調(diào)函數(shù)
callback({name:"張三"});

以上這種方法只是一個(gè)簡(jiǎn)單實(shí)現(xiàn)原因的例子,現(xiàn)實(shí)中我們的數(shù)據(jù)和回調(diào)也不會(huì)都寫死在JS中的,所以我們要想辦法將這些靜態(tài)的東西動(dòng)態(tài)生成就可以了.只要將example1.com srcipt 地址改為一個(gè)能動(dòng)態(tài)生成JS調(diào)用方法的服務(wù)地址即可.如:

test.do Controller直接返回如下

callback(數(shù)據(jù)庫(kù)客戶信息的JSON對(duì)象);

例子如下:當(dāng)然對(duì)的調(diào)用,你也可以動(dòng)態(tài)來(lái)創(chuàng)建script標(biāo)簽完成,這樣就更靈活一些.

假若要實(shí)現(xiàn)一個(gè)需求,某個(gè)網(wǎng)站a.com上顯示的客戶信息來(lái)自于其它網(wǎng)站b.com,顯然通過(guò)AJAX請(qǐng)求去取數(shù)據(jù)是不能做到的,因?yàn)榇嬖谕床呗?

A網(wǎng)站的前臺(tái)實(shí)現(xiàn):



createScript("http://B.com/search.do?&callback=displayCustomer");

B網(wǎng)站的后臺(tái)實(shí)現(xiàn):

@Controller
public classJsonpRest {
????@RequestMapping(value = "/test.do",method = RequestMethod.GET)
??? public @ResponseBody Stringlist(HttpServletRequest request) {
??????? returnrequest.getParameter("callback")+"({name:"張三",age:18})";
??? }
}

JSONP的優(yōu)點(diǎn)是：

它不像XMLHttpRequest對(duì)象實(shí)現(xiàn)的Ajax請(qǐng)求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運(yùn)行，不需要XMLHttpRequest或ActiveX的支持；并且在請(qǐng)求完畢后可以通過(guò)調(diào)用callback的方式回傳結(jié)果。

JSONP的缺點(diǎn)則是：

它只支持GET請(qǐng)求而不支持POST等其它類型的HTTP請(qǐng)求；它只支持跨域HTTP請(qǐng)求這種情況，不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行JavaScript調(diào)用的問(wèn)題。

沒(méi)有關(guān)于 JSONP調(diào)用的錯(cuò)誤處理。如果動(dòng)態(tài)腳本插入有效，就執(zhí)行調(diào)用；如果無(wú)效，就靜默失敗。失敗是沒(méi)有任何提示的。例如，不能從服務(wù)器捕捉到404 錯(cuò)誤，也不能取消或重新開(kāi)始請(qǐng)求。不過(guò)，等待一段時(shí)間還沒(méi)有響應(yīng)的話，就不用理它了。

JQUERY對(duì)JSONP的支持

從JQery 1.2以后，就開(kāi)始支持JSONP的調(diào)用。JQuery對(duì)前臺(tái)做了很好的處理如自動(dòng)生成全局回調(diào)函數(shù)等,但后臺(tái)還需要開(kāi)發(fā)人員自己實(shí)現(xiàn).

$.getJSON("http://跨域的dns/xxx.do?callback=?",function(json){?? ? ? ? ?
? ??// 業(yè)務(wù)邏輯執(zhí)行代碼
});

請(qǐng)求URL?
http://xxx.com/rest.do?callba..._1332575486681&_=1393510789026

$.ajax({
? ? ? ?url:"http://xxx.com/rest.do",
? ? ? ? dataType:"jsonp", ??//必須指定

? ? ? ? jsonp : "c", ? ? ? ?//若不指定則默認(rèn)為callback

? ? ? ??jsonpCallback:"test",//若不指定則Jquery自己生成隨機(jī)的名稱
? ? ? ? success:function(data){
? ? ? ? ? ??//業(yè)務(wù)邏輯執(zhí)行代碼
? ? ? ? }
});

請(qǐng)求URL?http://xxx.com/rest.do?c=test&_=1393510789026

當(dāng)dataType為JSONP時(shí),JQUERY會(huì)為用戶生成一個(gè)全局函數(shù)名稱為jsonpCallback參數(shù)的值,這個(gè)函數(shù)內(nèi)部調(diào)用了success方法JQUERY的實(shí)現(xiàn)原理及步驟

以GET方式請(qǐng)求目標(biāo)地址,并在URL中拼接以jsonp參數(shù)值為key,以jsonpCallback值為value的參數(shù)

請(qǐng)求返回回調(diào)函數(shù)數(shù)據(jù)

觸發(fā)調(diào)用全局的回調(diào)函數(shù),在全局函數(shù)回調(diào)中調(diào)用success方法并將數(shù)據(jù)傳遞給success方法

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96388.html

相關(guān)文章

  • 前端培訓(xùn)-中級(jí)階段（11、12）- 跨域請(qǐng)求原理以及實(shí)現(xiàn)（2019-08-22期）

    摘要：上節(jié)我們講了同源策略，這節(jié)我們講講如何跨域。當(dāng)這些從的腳本執(zhí)行出錯(cuò)，因?yàn)檫`背了同源策略為了保證用戶信息不被泄露，錯(cuò)誤信息不會(huì)顯示出來(lái)，取而代之只會(huì)返回一個(gè)。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開(kāi)課啦（每...

    binaryTree 評(píng)論0 收藏0

  • JSONP原理及實(shí)現(xiàn)跨域方式

    摘要：同源策略限制了我們無(wú)法通過(guò)原生的對(duì)象獲取到數(shù)據(jù)。的原理其實(shí)不復(fù)雜瀏覽器的同源策略把跨域請(qǐng)求都禁止了的標(biāo)簽是例外，可以突破同源策略從其他來(lái)源獲取數(shù)據(jù)由上可得，我們可以通過(guò)標(biāo)簽引入文件，然后通過(guò)一系列操作獲取數(shù)據(jù)。上面三點(diǎn)便是實(shí)現(xiàn)跨域的原理。 今天做頁(yè)面時(shí)，后臺(tái)給了個(gè)接口：https://a.a.com/a/a.json,我頁(yè)面的上線地址是：http://b.b.com。顯而易見(jiàn)，因?yàn)闉g覽...

    The question 評(píng)論0 收藏0

  • 帶你實(shí)現(xiàn)一個(gè) JSONP 實(shí)例

    摘要：前提是的方法名與引入的文件方法名一致。簡(jiǎn)單描述就是先定義一個(gè)方法，然后引入外部調(diào)用這個(gè)方法并攜帶數(shù)據(jù)。 JSONP 被用于跨域獲取數(shù)據(jù)。在講解它之前，先講講它與 JSON 之間的區(qū)別 什么是JSON？ JSON 是一種基于文本的數(shù)據(jù)交換方式，或者叫做數(shù)據(jù)描述格式。 其優(yōu)點(diǎn)是： 1、基于純文本，跨平臺(tái)傳遞極其簡(jiǎn)單； 2、Javascript 原生支持，后臺(tái)語(yǔ)言幾乎全部支持； 3、輕量級(jí)數(shù)...

    verano 評(píng)論0 收藏0

  • PHP筆試面試題精選（一）

    摘要：，跨站腳本攻擊。實(shí)際發(fā)的請(qǐng)求就是，用于表示這是一個(gè)請(qǐng)求。，用于告知服務(wù)器根據(jù)這個(gè)參數(shù)獲取回調(diào)函數(shù)的名稱，通常約定就叫。，回調(diào)函數(shù)的名稱，也是前面參數(shù)的值，可省略，會(huì)自動(dòng)生成。 本次課程主要圍繞 PHP 面試和筆試中經(jīng)常會(huì)出現(xiàn)的一些知識(shí)點(diǎn)，但是面試官會(huì)在筆試題基礎(chǔ)上深入擴(kuò)展，那么你知道如何更好的回答讓面試官滿意嗎？題目收集自騰訊，迅雷，美圖等公司的筆試面試題，以及本人面試經(jīng)歷中印象中的知...

    JohnLui 評(píng)論0 收藏0

  • JSONP原理剖析

    摘要：運(yùn)行一下頁(yè)面，成功彈出提示窗口，的執(zhí)行全過(guò)程順利完成到這里為止的話，相信你已經(jīng)能夠理解的客戶端實(shí)現(xiàn)原理了吧剩下的就是如何把代碼封裝一下，以便于與用戶界面交互，從而實(shí)現(xiàn)多次和重復(fù)調(diào)用。 先說(shuō)說(shuō)JSONP是怎么產(chǎn)生的： 其實(shí)網(wǎng)上關(guān)于JSONP的講解有很多，但卻千篇一律，而且云里霧里，對(duì)于很多剛接觸的人來(lái)講理解起來(lái)有些困難，小可不才，試著用自己的方式來(lái)闡釋一下這個(gè)問(wèn)題，看看是否有幫助。 1、...

    DangoSky 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<