成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JSONP原理及JQUERY JSONP的使用

suosuopuo / 2550人閱讀

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

JSONP原理 JSON和JSONP

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

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

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

同源策略

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

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

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

JSONP的實現(xiàn)方式

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

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

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

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

test.do Controller直接返回如下

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

例子如下:當(dāng)然對 createScript("http://B.com/search.do?&callback=displayCustomer");

B網(wǎng)站的后臺實現(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)點是：

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

JSONP的缺點則是：

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

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

JQUERY對JSONP的支持

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

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

請求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自己生成隨機的名稱
? ? ? ? success:function(data){
? ? ? ? ? ??//業(yè)務(wù)邏輯執(zhí)行代碼
? ? ? ? }
});

請求URL?http://xxx.com/rest.do?c=test&_=1393510789026

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/96388.html

相關(guān)文章

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

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

    binaryTree 評論0 收藏0

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

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

    The question 評論0 收藏0

  • 帶你實現(xiàn)一個 JSONP 實例

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

    verano 評論0 收藏0

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

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

    JohnLui 評論0 收藏0

  • JSONP原理剖析

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

    DangoSky 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<