在之前的文章中我們講到了早期的集中數(shù)據(jù)格式，XML，SOAP，HTML。現(xiàn)在，我們來看看JSON和JSONP。

JSON

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

我們可以將之前的XML圖書格式的文件內(nèi)容轉(zhuǎn)換成下面的JSON格式：

[  
   {  
       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方法。不需要再寫額外的處理數(shù)據(jù)的方法：

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

使用JSON的優(yōu)點(diǎn)在于：

◆ 比XML輕了很多，沒有那么多冗余的東西

◆ JSON也是具有很好的可讀性的，但是通常返回的都是壓縮過后的。不像XML這樣的瀏覽器可以直接顯示，瀏覽器對于JSON的格式化的顯示就需要借助一些插件了

◆ 在JavaScript中處理JSON很簡單

◆ 其他語言例如PHP對于JSON的支持也不錯

JSON也有一些劣勢：

◆ JSON在服務(wù)端語言的支持不像XML那么廣泛，不過JSON.org上提供很多語言的庫

◆ 如果你使用eval()來解析的話，會容易出現(xiàn)安全問題

盡管如此，JSON的優(yōu)點(diǎn)還是很明顯的。他是Ajax數(shù)據(jù)交互的很理想的數(shù)據(jù)格式。

JSONP (JSON-p)

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

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

跟XMLHttpRequest不同，插入script標(biāo)簽可以在不同源的情況下獲取其他服務(wù)的數(shù)據(jù)。這對于流量分析、書簽工具、小插件、廣告系統(tǒng)來說是很理想的選擇。

不過，返回的JSON數(shù)據(jù)通常都是當(dāng)做本地的代碼立即執(zhí)行。也不會賦值給變量，所以后面就再訪問不到了。不過這個問題我們可以通過給網(wǎng)絡(luò)服務(wù)傳遞一個callback參數(shù)來進(jìn)行回調(diào)：

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

這時候，網(wǎng)絡(luò)服務(wù)通常會返回一個包含在一個回調(diào)函數(shù)中的JSON數(shù)據(jù)，這就是JSONP，或者“JSON with padding”，看看代碼：

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對象下載完畢之后，作為參數(shù)傳遞給了MyDataHandler()方法。

JSON和JSONP已經(jīng)是現(xiàn)在最流行的異步交互的數(shù)據(jù)格式了。但是在壓縮傳輸數(shù)據(jù)大小的方面還是可以再研究的。RockUX會在后面講到關(guān)于自定義數(shù)據(jù)返回。

原文鏈接：http://rockux.com/

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

Ajax和WEB服務(wù)數(shù)據(jù)格式：XML SOAP HTML

【編輯推薦】

1. 使用 jQuery 簡化 Ajax 開發(fā)
2. 用Dojo實現(xiàn)Ajax請求：XHR、跨域、及其他
3. 盤點(diǎn)ASP.NET Ajax工具箱的10大頂級控件
4. 簡化開發(fā)流程 了解各種Ajax框架的適用性
5. Ajax安全隱患將成站點(diǎn)定時炸彈