偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

JSONP跨域原理和jQuery.getJSON用法

開(kāi)發(fā) 前端
JSONP是一個(gè)非官方的協(xié)議,它允許在服務(wù)器端集成Script tags返回至客戶端,通過(guò)javascript callback的形式實(shí)現(xiàn)跨域訪問(wèn)(這僅僅是JSONP簡(jiǎn)單的實(shí)現(xiàn)形式)。本文主要介紹JSONP跨域原理,一起來(lái)看。

JSONP是一個(gè)非官方的協(xié)議,它允許在服務(wù)器端集成Script tags返回至客戶端,通過(guò)javascript callback的形式實(shí)現(xiàn)跨域訪問(wèn)(這僅僅是JSONP簡(jiǎn)單的實(shí)現(xiàn)形式)。JSON系統(tǒng)開(kāi)發(fā)方法是一種典型的面向數(shù)據(jù)結(jié)構(gòu)的分析和設(shè)計(jì)方法,以活動(dòng)為中心,一連串的活動(dòng)的順序組合成一個(gè)完整的工作進(jìn)程。

之所以會(huì)有跨域這個(gè)問(wèn)題的產(chǎn)生根本原因是瀏覽器的同源策略限制,理解同源策略的限制同源策略是指阻止代碼獲得或者更改從另一個(gè)域名下獲得的文件或者信息。也就是說(shuō)我們的請(qǐng)求地址必須和當(dāng)前網(wǎng)站的地指相同。同源策略通過(guò)隔離來(lái)實(shí)現(xiàn)對(duì)資源的保護(hù)。這個(gè)策略的歷史非常悠久從Netscape Navigator 2.0時(shí)代就開(kāi)始了。

解決這個(gè)限制的一個(gè)相對(duì)簡(jiǎn)單的辦法就是在服務(wù)器端發(fā)送請(qǐng)求,服務(wù)器充當(dāng)一個(gè)到達(dá)第三方資源的代理中繼。雖然是用廣泛但是這個(gè)方法卻不夠靈活。

另一個(gè)辦法就是使用框架(frames),將第三方站點(diǎn)的資源包含進(jìn)來(lái),但是包含進(jìn)來(lái)的資源同樣要受到同源策略的限制。

有一個(gè)很巧妙的辦法就是在頁(yè)面中使用動(dòng)態(tài)代碼元素,代碼的源指向服務(wù)地址并在自己的代碼中加載數(shù)據(jù)。當(dāng)這些代碼加載執(zhí)行的時(shí)候,同源策略就不會(huì)起到限制。但是如果代碼試圖下載文件的時(shí)候執(zhí)行還是會(huì)失敗,幸運(yùn)的是,我們可以使用JSON(JavaScript Object Notation)來(lái)改進(jìn)這個(gè)應(yīng)用。

JSON和JSONP

與XML相比,JSON是一個(gè)輕量級(jí)的數(shù)據(jù)交換格式。JSON對(duì)于JavaScript開(kāi)發(fā)人員充滿魅力的原因在于JSON本身就是Javascript中的對(duì)象。

例如一個(gè)ticker對(duì)象

var ticker = {symbol:'IBM',price:100}

而JSON串就是 {symbol:'IBM',price:100}

這樣我們就可以在函數(shù)的參數(shù)中傳遞JSON數(shù)據(jù)。我們很容易掌握在函數(shù)中使用動(dòng)態(tài)的JSON參數(shù)數(shù)據(jù),但是我們的目的并不是這個(gè)。

通過(guò)使我們的函數(shù)能夠加載動(dòng)態(tài)的JSON數(shù)據(jù),我們就能夠處理動(dòng)態(tài)的數(shù)據(jù),這項(xiàng)技術(shù)叫做 Dynamic Javascript Insertion。

我們看下面的例子:

index.html中

  1. <script type="text/javascript">  
  2. function showPrice(data){  
  3. alert("Symbol:" + data.symbol + ", Price:" + data.price);  
  4. }  
  5. var url = "ticker.js"//Outer JS URL  
  6. var script = document.createElement('script');  
  7. script.setAttribute('src', url);  
  8. //load javascript  
  9. document.getElementsByTagName('head')[0].appendChild(script);  
  10. </script>  
  11. ticker.js中  
  12. var data = {symbol:'IBM', price:100};  
  13. showPrice(data); 

上面的代碼通過(guò)動(dòng)態(tài)加入Javascript代碼,來(lái)執(zhí)行函數(shù)加載數(shù)據(jù)。

正如之前提到過(guò)的,同源策略對(duì)于動(dòng)態(tài)插入的代碼不適用。也就是你可以從不同的域中加載代碼,來(lái)執(zhí)行在他們代碼中的JSON數(shù)據(jù)。

這就是JSONP(JSON with Padding)。注意,使用這種方法時(shí),你必須在頁(yè)面中定義回調(diào)函數(shù),就像上例中的showPrice一樣。

我們通常所說(shuō)的JSONP服務(wù)(遠(yuǎn)程JSON服務(wù)),實(shí)際上就是一種擴(kuò)展的支持在用戶定義函數(shù)中包含返回?cái)?shù)據(jù)的能力。這種方法依賴于必須接受一個(gè)回調(diào)函數(shù)的名字作為參數(shù)。

然后執(zhí)行這個(gè)函數(shù),處理JSON數(shù)據(jù),并顯示在客戶頁(yè)面上。

JQuery的JSONP支持

從JQery 1.2以后,就開(kāi)始支持JSONP的調(diào)用。在另外的一個(gè)域名中指定好回調(diào)函數(shù)名稱,你就可以用下面的形式來(lái)就加載JSON數(shù)據(jù)。

url?callback=?

示例:

  1. jQuery.getJSON(url + "&callbak=?"function(data)  
  2. {  
  3. alert("Symbol:" + data.symbol + ", Price:" + data.price);  
  4. }); 

jquery會(huì)在window對(duì)象中加載一個(gè)全局的函數(shù),當(dāng)代碼插入時(shí)函數(shù)執(zhí)行,執(zhí)行完畢后就會(huì)被移除。同時(shí)jquery還對(duì)非跨域的請(qǐng)求進(jìn)行了優(yōu)化,如果這個(gè)請(qǐng)求是在同一個(gè)域名下那么他就會(huì)像正常的Ajax請(qǐng)求一樣工作。

上例中我們?cè)趧?dòng)態(tài)插入到頁(yè)面的代碼中使用了靜態(tài)的json數(shù)據(jù),雖然完成了依次JSONP返回,但仍不是JSONP服務(wù),因?yàn)椴恢С衷赨RL中定義回調(diào)函數(shù)名稱。下面是一個(gè)將其變成JSONP服務(wù)的一個(gè)方法

服務(wù)器端使用PHP。

首先我們來(lái)定義接口的規(guī)范,就像這樣:http://www.mydomain.com/jsonp/ticker?symbol=IBM&amp;callback=showPrice
symbol是請(qǐng)求條件,callback是回調(diào)函數(shù)名稱。

在頁(yè)面文件中,我們使用JQuery的支持:

  1. //JQuery JSONP Support  
  2. var url = "http://www.mydomain.com/api/suggest.php?symbol=IBM&callback=?";  
  3. jQuery.getJSON(url, function(data){  
  4. alert("Symbol:" + data.symbol + ", Price:" + data.price);  
  5. }); 

在suggest.php中

  1. $jsondata = "{symbol:'IBM', price:120}";  
  2. echo $_GET['callback'].'('.$jsondata.')'

再舉個(gè).NET webservice 的例子

客戶端

  1. $.getJSON(  
  2. "http://192.168.0.66/services/WebService1.asmx/ws?callback=?",  
  3. { name: "ff", time: "2pm" },  
  4. function(data) { alert(decodeURI(data.msg)) }  
  5. ); 

服務(wù)器端

  1. [WebMethod]  
  2. public void ws(string name,string time) {  
  3. HttpRequest Request = HttpContext.Current.Request;  
  4. string callback = Request["callback"];  
  5. HttpResponse Response = HttpContext.Current.Response;  
  6. Response.Write(callback + "({msg:'this is"+name+"jsonp'})");  
  7. Response.End();  

現(xiàn)在,如果我們想制作一些mashup,或者將第三方的資源整合到一個(gè)頁(yè)面中,我們就很容易想到JSONP的解決方法了。

注意:

JSONP是一個(gè)非常強(qiáng)大的構(gòu)建mashp的方法,可是不是一個(gè)解決跨域訪問(wèn)問(wèn)題的***藥。它也有一些缺點(diǎn):

***也是最重要的:JSONP不提供錯(cuò)誤處理。如果動(dòng)態(tài)插入的代碼正常運(yùn)行,你可以得到返回,但是如果失敗了,那么什么都不會(huì)發(fā)生。你無(wú)法獲得一個(gè)404的錯(cuò)誤,也不能取消這個(gè)請(qǐng)求。

另外一個(gè)重要的缺點(diǎn)是如果使用了不信任的服務(wù)會(huì)造成很大的安全隱患。

【編輯推薦】

  1. Jackson框架輕易轉(zhuǎn)換JSON
  2. 在PHP語(yǔ)言中使用JSON
  3. 一個(gè)JSON實(shí)例:jQuery解析JSON數(shù)據(jù)
  4. 理解JSON:3分鐘課程輕松搞定
  5. 用jquery解析JSON數(shù)據(jù)的方法
責(zé)任編輯:于鐵 來(lái)源: HTML5論壇
相關(guān)推薦

2012-03-27 15:23:15

JSONPAJAX

2009-05-21 14:47:38

WEB開(kāi)發(fā)JsonAjax

2010-01-06 13:39:51

擴(kuò)展Jquery的Js

2021-06-25 09:04:39

Cors跨域JSONP vs CO

2017-05-25 09:45:35

2012-06-05 10:15:43

jQuery

2011-04-21 16:09:17

JavascriptCookie

2017-03-12 19:51:38

js實(shí)用跨域

2019-01-23 08:48:50

跨域協(xié)議端口

2021-11-03 06:57:41

瀏覽器Jsonp安全

2021-07-08 07:01:53

瀏覽器安全前端

2019-04-10 10:32:16

CORSNginx反向代理

2016-11-01 21:51:03

phpjavascript

2019-04-16 10:05:11

2020-12-18 09:36:01

JSONP跨域面試官

2021-04-27 15:20:41

人工智能機(jī)器學(xué)習(xí)技術(shù)

2021-06-15 07:32:59

Cookie和Sess實(shí)現(xiàn)跨域

2024-05-20 09:28:44

Spring客戶端瀏覽器

2021-05-06 20:51:52

跨域http協(xié)議

2009-12-08 14:43:04

WCF跨域
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)