Ajax和WEB服务数据格式：JSON与JSONP

　　在之前的文章中我们讲到了早期的集中数据格式，XML，SOAP，HTML。现在，我们来看看JSON和JSONP。

　　JSON

　　JSON(JavaScript Object Notation)是Douglas Crockford提出的。他是一个轻量级的数据交换格式，基于JavaScript对象字面量。

　　我们可以将之前的XML图书格式的文件内容转换成下面的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方法。不需要再写额外的处理数据的方法：

   
   
   
   

    
    
    
    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标签调用：

   
   
   
   

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

　　跟XMLHttpRequest不同，插入script标签可以在不同源的情况下获取其他服务的数据。这对于流量分析、书签工具、小插件、广告系统来说是很理想的选择。

　　不过，返回的JSON数据通常都是当做本地的代码立即执行。也不会赋值给变量，所以后面就再访问不到了。不过这个问题我们可以通过给网络服务传递一个callback参数来进行回调：

   
   
   
   

    
    
    
    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”，看看代码：

   
   
   
   

    
    
    
    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会在后面讲到关于自定义数据返回。