Ajax和WEB服务数据格式：JSONJSONP

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

创新互联致力于互联网品牌建设与网络营销，包括做网站、成都网站设计、SEO优化、网络推广、整站优化营销策划推广、电子商务、移动互联网营销等。创新互联为不同类型的客户提供良好的互联网应用定制及解决方案，创新互联核心团队十载专注互联网开发，积累了丰富的网站经验，为广大企业客户提供一站式企业网站建设服务，在网站建设行业内树立了良好口碑。

JSON

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

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

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

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

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

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

使用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. 
  
  
  
  2. script.src = "http://webservice.com/?a=1&b=2"; 
    3. 
  
  
  
  3. document.getElementsByTagName("head")[0].appendChild(script);
    4.

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

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

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

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

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

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

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

分享名称：Ajax和WEB服务数据格式：JSONJSONP
本文地址：http://www.shufengxianlan.com/qtweb/news15/203315.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

面包屑导航知识

同城分类信息

手机网站制作　　 　崇州搬家公司　　 　腾讯云免备案主机　　 　注册域名　　 　成都h5建站开发　　 　木包装箱　　 　成都微信小程序开发　　 　网站制作　　 　红锐电子　　 　自贡电信机房　　 　做网站　　 　成都做网站　　 　成都二枢机房　　 　门户网站建设方案　　 　无边发光字制作　　 　广安网站设计　　 　成都茶叶销售　　 　成都网站建设　　 　衣柜书柜酒柜定制　　 　腾讯云虚拟主机