DIV CSS 佈局教程網

在之前的文章中我們講到了早期的集中數據格式，XML，SOAP，HTML。現在，我們來看看JSON和JSONP。

JSON

JSON(JavaScript Object Notation)是Douglas Crockford提出的。他是一個輕量級的數據交換格式，基於JavaScript對象字面量。

我們可以將之前的XML圖書格式的文件內容轉換成下面的JSON格式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

[
   {
       title: "The Principles of Beautiful Web Design, 2nd Edition",
       url: "http://www.sitepoint.com/books/design2/",
       author: "Jason Beaird",
       publisher: "SitePoint",
       price: {
           currency: "USD",
           amount: 39.95
        }
    },
    {
        title: "jQuery: Novice to Ninja",
        url: "http://www.sitepoint.com/books/jquery1/",
        author: "JEarle Castledine & Craig Sharkie",
        publisher: "SitePoint",
        price: {
            currency: "USD",
            amount: 29.95
        }
    },
    {
        title: "Build Your Own Database Driven Website",
        url: "http://www.sitepoint.com/books/phpmysql4/",
        author: "Kevin Yank",
        publisher: "SitePoint",
        price: {
            currency: "USD",
            amount: 39.95
        }
    }
]

這是一個通過對象來表示書的一種方式，並且有title、url、author、publisher、和price等信息。price是一個子對象，並且他包含貨幣類型和價格。

在JavaScript中很容易處理JSON。你可以使用浏覽器原生的JSON.parse方法或者Douglas Crockford的JSON-js庫。就算這些都不能用，你也可以使用javaScript的eval方法。不需要再寫額外的處理數據的方法：

1
2
3
4

var json = xhr.responseText;
var book = JSON.parse(json);
alert(book[0].title); //first book title
alert(book[1].url); //second book URL

使用JSON的優點在於：

• 比XML輕了很多，沒有那麼多冗余的東西
• JSON也是具有很好的可讀性的，但是通常返回的都是壓縮過後的。不像XML這樣的浏覽器可以直接顯示，浏覽器對於JSON的格式化的顯示就需要借助一些插件了
• 在JavaScript中處理JSON很簡單
• 其他語言例如PHP對於JSON的支持也不錯

JSON也有一些劣勢：

• JSON在服務端語言的支持不像XML那麼廣泛，不過JSON.org上提供很多語言的庫
• 如果你使用eval()來解析的話，會容易出現安全問題

盡管如此，JSON的優點還是很明顯的。他是Ajax數據交互的很理想的數據格式。

JSONP (JSON-p)

如果你使用XMLHttpRequest來調用JSON的web服務，返回的數據可以通過JSON.parse()或者eval()來處理。你也可以使用Ajax組件來做腳本的插入，例如，將遠程加載的腳本插入在DOM節點中，通過script標簽調用：

1
2
3

var script = document.createElement("script");
script.src = "http://webservice.com/?a=1&b=2";
document.getElementsByTagName("head")[0].appendChild(script);

跟XMLHttpRequest不同，插入script標簽可以在不同源的情況下獲取其他服務的數據。這對於流量分析、書簽工具、小插件、廣告系統來說是很理想的選擇。

不過，返回的JSON數據通常都是當做本地的代碼立即執行。也不會賦值給變量，所以後面就再訪問不到了。不過這個問題我們可以通過給網絡服務傳遞一個callback參數來進行回調：

1
2
3

var script = document.createElement("script");
script.src = "http://webservice.com/?a=1&b=2&callback=MyDataHandler";
document.getElementsByTagName("head")[0].appendChild(script);

這時候，網絡服務通常會返回一個包含在一個回調函數中的JSON數據，這就是JSONP，或者“JSON with padding”，看看代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13

MyDataHandler([
    {
        title: "The Principles of Beautiful Web Design, 2nd Edition",
        url: "http://www.sitepoint.com/books/design2/",
        author: "Jason Beaird",
        publisher: "SitePoint",
        price: {
            currency: "USD",
            amount: 39.95
         }
     }
     ...
]);

在JSON對象下載完畢之後，作為參數傳遞給了MyDataHandler()方法。

JSON和JSONP已經是現在最流行的異步交互的數據格式了。但是在壓縮傳輸數據大小的方面還是可以再研究的。RockUX會在後面講到關於自定義數據返回。

看看這一系列其他的文章：

• Ajax和WEB服務數據格式：XML SOAP HTML
• Ajax和WEB服務數據格式：自定義返回格式

轉載請注明：