DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> 淺析json與jsonp區別及通過ajax獲得json數據後格式的轉換
淺析json與jsonp區別及通過ajax獲得json數據後格式的轉換
編輯:AJAX基礎知識     

 有關json與jsonp的區別(json才是目的,jsonp只是手段)介紹如下所示:

一言以蔽之,json返回的是一串數據;而jsonp返回的是腳本代碼(包含一個函數調用);

JSON其實就是JavaScript中的一個對象,跟var obj={}在質上完全一樣,只是在量上可以無限擴展。簡單地講,json其實就是JavaScript中的對象(Object)和數組(Array,其實也是對象)這倆好基友在那兒你嵌我我嵌你地套上n多層,以此模擬出許多復雜的數據結構。

json易於人閱讀和編寫,也易於機器解析和生成,相對網絡傳輸速率較高,功能型網站前後端往往要頻繁大量交換數據,而json憑借其強大的表現力和高顏值漸漸地成為理想的前後端數據交換語言。那xml前輩呢,我覺得應該會像微軟的xp那樣功成身退。

同源(不懂同源策略的童鞋請自行百度)下的前後端數據交換格式確定使用json了,那麼問題來了,如果我想獲取別人網站上提供的數據腫麼做到呢?也就是跨域讀取數據問題(不要鑽牛角說你不需要讀取其他網站的數據,相信我,你早晚得需要),json行不行呢?答案是No Way,為什麼呢,因為json只是普通的文本格式,能讓你這樣就輕松拿到那服務端就沒有任何安全和保密性可言了,這樣的話互聯網世界非亂套不可,這個問題那些牛X的規范制定者早就想到了,所以使用了同源策略來限制文件獲取。最後的結果就是只有像img、script、iframe這類可以指定src屬性的標簽有跨域獲取別人網站上數據(圖片,腳本,源文件其實都是數據)的能力。比如:

<!--京東商品圖片-->
<img src="http://img30.360buyimg.com/jgsq-productsoa/jfs/t2407/323/1635505465/47386/f2d89d88/56615e00N7a475ee6.jpg" />
<!--百度CDN-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 

看來直接獲取json是行不通了,那有沒有其他方法能拿到數據呢?於是乎jsonp就這樣被聰明的開發者給發現了,為什麼說是發現而不是發明呢,因為並沒有涉及到任何新技術,就像發現ajax一樣。

jsonp原理是這樣的,網站A需要獲取網站B的數據,網站B說我給你們一個方法,【1. 你們使用<script src="http://www.B.com/open.js"></script>標簽先獲取到open.js文件(網站B的責任),這裡邊有你們需要的數據。2. 你們獲取數據後處理數據(總得處理數據吧)的方法名必須命名為foo(數據請求者的責任和義務)】,這裡相當於B網站和請求獲取數據者之間建立了一個協議,要求請求者務必按照規則辦事,如果請求者不能同時遵守上面兩條就不能按預期獲取數據。額..,這也算相當於建立了一個潛規則吧

open.js內容

foo({"name":"B","age":23});  //為什麼不直接寫成json數據{"name":"B","age":23}呢,原因很簡單,在js文件總得合乎js語法吧
//這也是為什麼協議中明確規定處理數據的方法名必須命名為foo,因為B網站是在假定請求者的腳本中已經定義了數據處理方法foo的情況下返回數據;
//不然就會報foo is not defined錯誤

網站A腳本須有

function foo(data){
console.log(data);
//ToDo.. 
} 

啊!雖然拐了個彎,但數據總算得到了,網站A,網站B都非常高興,那麼問題又來了,網站C說也需要獲取網站B的數據,網站B把協議甩給它,網站C拿過來一看,草泥馬啊,foo這個名字已經在自己的腳本文件的6868行用過了,而且已經使用在腳本的各個角落,批量替換會導致很多潛在bug啊,網站B情急之下決定把foo改成fool,網站A立馬蹦起來,因為自己的網站已經在很多地方使用foo引用了數據。

為了避免上面情況發生,那些牛X哄哄的開發者使用了動態生成js文件的方法,php版本如下:

open.php

<?php
header('Content-type: application/javascript');
$jsonCallback = htmlspecialchars($_REQUEST ['callback']); //獲取請求者自定義的回調函數名
$jsonData ='{"name":"B","age":23}'; //待返回的json數據
echo $jsonCallback . "(" . $jsonData . ")"; //輸出jsonp格式的數據,即一行函數調用語句
?> 

額 ..,至於php為什麼能返回js格式文件,自行百度。

於是網站A用<script src="http://www.B.com/open.php?callback=foo"></script>來請求數據,不需要修改任何變量,返回給A的腳本文件內容是:

foo({"name":"B","age":23}); //所謂的jsonp,就是一句函數調用,數據都被包裹傳遞到參數中了,千萬別穿個馬甲就不認識了 
網站C就用<script src="http://www.B.com/open.php?callback=blah"></script>來請求數據,返回給C的腳本文件內容是:
blah({"name":"B","age":23}); 
網站N就用<script src="http://www.B.com/open.php?callback=what"></script>來請求數據,返回給N的腳本文件內容是:
what({"name":"B","age":23}); 

Problem Solved,大家都取到了期望的數據,並且避免了命名沖突。

jsonp全名叫做json with padding,很形象,就是把json對象用符合js語法的形式包裹起來以使其它網站可以請求得到,也就是將json數據封裝成js文件;

json是理想的數據交換格式,但沒辦法跨域直接獲取,於是就將json包裹(padding)在一個合法的js語句中作為js文件傳過去。這就是json和jsonp的區別,json是想要的東西,jsonp是達到這個目的而普遍采用的一種方法,當然最終獲得和處理的還是json。所以說json是目的,jsonp只是手段。json總會用到,而jsonp只有在跨域獲取數據才會用到。

理解了json和jsonp的區別之後,其實ajax裡的跨域獲取數據就很好理解和實現了,同源時候並沒有什麼特別的,直接取就行,跨域時候需要拐個彎來達到目的。

附上jquery中ajax請求json數據實例:

(同源):

$.ajax({
url:"persons.json",
success:function(data){
    console.log(data);
     //ToDo..
  }
}); 

(跨域):

$.ajax({
url:"http://www.B.com/open.php?callback=?",
dataType:"jsonp",
success:function(data){
console.log(data);
//ToDo..
}
}); 

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為連同請求發送的數據,data2為服務器返回的數據即json對象。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved