有關json與jsonp的區(qū)別(json才是目的,jsonp只是手段)介紹如下所示: 一言以蔽之,json返回的是一串數據;而jsonp返回的是腳本代碼(包含一個函數調用); JSON其實就是JavaScript中的一個對象,跟var obj={}在質上完全一樣,只是在量上可以無限擴展。簡單地講,json其實就是JavaScript中的對象(Object)和數組(Array,其實也是對象)這倆好基友在那兒你嵌我我嵌你地套上n多層,以此模擬出許多復雜的數據結構。 json易于人閱讀和編寫,也易于機器解析和生成,相對網絡傳輸速率較高,功能型網站前后端往往要頻繁大量交換數據,而json憑借其強大的表現力和高顏值漸漸地成為理想的前后端數據交換語言。那xml前輩呢,我覺得應該會像微軟的xp那樣功成身退。 同源(不懂同源策略的童鞋請自行百度)下的前后端數據交換格式確定使用json了,那么問題來了,如果我想獲取別人網站上提供的數據腫么做到呢?也就是跨域讀取數據問題(不要鉆牛角說你不需要讀取其他網站的數據,相信我,你早晚得需要),json行不行呢?答案是No Way,為什么呢,因為json只是普通的文本格式,能讓你這樣就輕松拿到那服務端就沒有任何安全和保密性可言了,這樣的話互聯網世界非亂套不可,這個問題那些牛X的規(guī)范制定者早就想到了,所以使用了同源策略來限制文件獲取。最后的結果就是只有像img、script、iframe這類可以指定src屬性的標簽有跨域獲取別人網站上數據(圖片,腳本,源文件其實都是數據)的能力。比如:
看來直接獲取json是行不通了,那有沒有其他方法能拿到數據呢?于是乎jsonp就這樣被聰明的開發(fā)者給發(fā)現了,為什么說是發(fā)現而不是發(fā)明呢,因為并沒有涉及到任何新技術,就像發(fā)現ajax一樣。 jsonp原理是這樣的,網站A需要獲取網站B的數據,網站B說我給你們一個方法,【1. 你們使用<script src="http://www.B.com/open.js"></script>標簽先獲取到open.js文件(網站B的責任),這里邊有你們需要的數據。2. 你們獲取數據后處理數據(總得處理數據吧)的方法名必須命名為foo(數據請求者的責任和義務)】,這里相當于B網站和請求獲取數據者之間建立了一個協議,要求請求者務必按照規(guī)則辦事,如果請求者不能同時遵守上面兩條就不能按預期獲取數據。額..,這也算相當于建立了一個潛規(guī)則吧 open.js內容 網站A腳本須有 啊!雖然拐了個彎,但數據總算得到了,網站A,網站B都非常高興,那么問題又來了,網站C說也需要獲取網站B的數據,網站B把協議甩給它,網站C拿過來一看,草泥馬啊,foo這個名字已經在自己的腳本文件的6868行用過了,而且已經使用在腳本的各個角落,批量替換會導致很多潛在bug啊,網站B情急之下決定把foo改成fool,網站A立馬蹦起來,因為自己的網站已經在很多地方使用foo引用了數據。 為了避免上面情況發(fā)生,那些牛X哄哄的開發(fā)者使用了動態(tài)生成js文件的方法,php版本如下: open.php 額 ..,至于php為什么能返回js格式文件,自行百度。 于是網站A用<script src="http://www.B.com/open.php?callback=foo"></script>來請求數據,不需要修改任何變量,返回給A的腳本文件內容是: Problem Solved,大家都取到了期望的數據,并且避免了命名沖突。 jsonp全名叫做json with padding,很形象,就是把json對象用符合js語法的形式包裹起來以使其它網站可以請求得到,也就是將json數據封裝成js文件; json是理想的數據交換格式,但沒辦法跨域直接獲取,于是就將json包裹(padding)在一個合法的js語句中作為js文件傳過去。這就是json和jsonp的區(qū)別,json是想要的東西,jsonp是達到這個目的而普遍采用的一種方法,當然最終獲得和處理的還是json。所以說json是目的,jsonp只是手段。json總會用到,而jsonp只有在跨域獲取數據才會用到。 理解了json和jsonp的區(qū)別之后,其實ajax里的跨域獲取數據就很好理解和實現了,同源時候并沒有什么特別的,直接取就行,跨域時候需要拐個彎來達到目的。 附上jquery中ajax請求json數據實例: (同源): (跨域):
jquery已把jsonp封裝進ajax,很合理,因為畢竟絕大多數的jsonp請求都是ajax,關于jquery的ajax具體用法請自行百度,另外要注意的一點就是不同的網站提供的數據接口的$_REQUEST ['callback']中不一定絕對是callback也可能是cb,cbk等,具體使用時務必閱讀服務端提供的有關接口使用的詳細文檔。 下面給大家介紹下由“夜未央0906”寫的通過ajax獲得json數據后格式的轉換 在有些情況下獲取到的json數據可能是string類型的,需要把其格式化為json對象才方便解析。 a)原生js通過ajax獲取到的json 此時返回的數據默認是string型的,所以需要用eval()函數將其轉化為json對象。需要注意函數內字符串的格式:eval(“(” + data+“)”),因為返回的string是在{}里面的,eval會將大括號識別為js代碼塊開始和結束的標志,所以必須加上(),將其強制轉化為對象來處理。 b)jquery獲取 1:通過ajax()異步請求并把type設置為json,返回的就是json對象。 2:通過用與ajax()等價的$.getJSON(url,data1,function(data2,status,xhr){//......})方法獲取的也是json對象。其中data1為連同請求發(fā)送的數據,data2為服務器返回的數據即json對象。 |
|
來自: 馬踏飛燕連環(huán)腿 > 《技術文章》