中国领先的IT技术网站
|
|

Ajax和WEB服务数据格式:JSON JSONP

JSON和JSONP已经是现在最流行的异步交互的数据格式了。但是在压缩传输数据大小的方面还是可以再研究的。

作者:RockUX来源:RockUX|2011-04-11 09:48

开发者大赛路演 | 12月16日,技术创新,北京不见不散


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

JSON

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

我们可以将之前的XML图书格式的文件内容转换成下面的JSON格式:

  1. [  
  2.    {  
  3.        title: "The Principles of Beautiful Web Design, 2nd Edition",  
  4.        url: "http://www.sitepoint.com/books/design2/",  
  5.        author: "Jason Beaird",  
  6.        publisher: "SitePoint",  
  7.        price: {  
  8.            currency: "USD",  
  9.            amount: 39.95  
  10.         }  
  11.     },  
  12.     {  
  13.         title: "jQuery: Novice to Ninja",  
  14.         url: "http://www.sitepoint.com/books/jquery1/",  
  15.         author: "JEarle Castledine & Craig Sharkie",  
  16.         publisher: "SitePoint",  
  17.         price: {  
  18.             currency: "USD",  
  19.             amount: 29.95  
  20.         }  
  21.     },  
  22.     {  
  23.         title: "Build Your Own Database Driven Website",  
  24.         url: "http://www.sitepoint.com/books/phpmysql4/",  
  25.         author: "Kevin Yank",  
  26.         publisher: "SitePoint",  
  27.         price: {  
  28.             currency: "USD",  
  29.             amount: 39.95  
  30.         }  
  31.     }  

这是一个通过对象来表示书的一种方式,并且有title、url、author、publisher、和price等信息。price是一个子对象,并且他包含货币类型和价格。

在JavaScript中很容易处理JSON。你可以使用浏览器原生的JSON.parse方法或者Douglas Crockford的JSON-js库。就算这些都不能用,你也可以使用javaScript的eval方法。不需要再写额外的处理数据的方法:

  1. var json = xhr.responseText;  
  2. var book = JSON.parse(json);  
  3. alert(book[0].title); //first book title  
  4. 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. var script = document.createElement("script");  
  2. script.src = "http://webservice.com/?a=1&b=2";  
  3. document.getElementsByTagName("head")[0].appendChild(script); 

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

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

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

这时候,网络服务通常会返回一个包含在一个回调函数中的JSON数据,这就是JSONP,或者“JSON with padding”,看看代码:

  1. MyDataHandler([  
  2.     {  
  3.         title: "The Principles of Beautiful Web Design, 2nd Edition",  
  4.         url: "http://www.sitepoint.com/books/design2/",  
  5.         author: "Jason Beaird",  
  6.         publisher: "SitePoint",  
  7.         price: {  
  8.             currency: "USD",  
  9.             amount: 39.95  
  10.          }  
  11.      }  
  12.      ...  
  13. ]); 

在JSON对象下载完毕之后,作为参数传递给了MyDataHandler()方法。

JSON和JSONP已经是现在最流行的异步交互的数据格式了。但是在压缩传输数据大小的方面还是可以再研究的。RockUX会在后面讲到关于自定义数据返回。

原文链接:http://rockux.com/

看看这一系列其他的文章:

Ajax和WEB服务数据格式:XML SOAP HTML

【编辑推荐】

  1. 使用 jQuery 简化 Ajax 开发
  2. 用Dojo实现Ajax请求:XHR、跨域、及其他
  3. 盘点ASP.NET Ajax工具箱的10大顶级控件
  4. 简化开发流程 了解各种Ajax框架的适用性
  5. Ajax安全隐患将成站点定时炸弹
【责任编辑:陈贻新 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

J2EE应用开发(WebLogic+JBuilder)(第二版)

本书介绍如何将最流行的J2EE应用服务器WebLogic Server和最好的Java集成开发工具JBuilder结合起来开发J2EE应用,主要内容包括:WebLogic Se...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊