JSON

数据格式:JSON和JSONP

字号+ 作者:H5之家 来源:H5之家 2015-10-31 14:02 我要评论( )

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

  在之前的文章中我们讲到了早期的集中数据格式,XML,SOAP,HTML。现在,我们来看看JSON和JSONP。
  
  JSON
  
  JSON(JavaScriptObjectNotation)是DouglasCrockford提出的。他是一个轻量级的数据交换格式,基于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:"ThePrinciplesofBeautifulWebDesign,2ndEdition",
  
  ",
  
  author:"JasonBeaird",
  
  publisher:"SitePoint",
  
  price:{
  
  currency:"USD",
  
  amount:39.95
  
  }
  
  },
  
  {
  
  title:"jQuery:NovicetoNinja",
  
  ",
  
  author:"JEarleCastledine&CraigSharkie",
  
  publisher:"SitePoint",
  
  price:{
  
  currency:"USD",
  
  amount:29.95
  
  }
  
  },
  
  {
  
  title:"BuildYourOwnDatabaseDrivenWebsite",
  
  ",
  
  author:"KevinYank",
  
  publisher:"SitePoint",
  
  price:{
  
  currency:"USD",
  
  amount:39.95
  
  }
  
  }
  
  ]
  
  这是一个通过对象来表示书的一种方式,并且有title、url、author、publisher、和price等信息。price是一个子对象,并且他包含货币类型和价格。
  
  在JavaScript中很容易处理JSON。你可以使用浏览器原生的JSON.parse方法或者DouglasCrockford的JSON-js库。就算这些都不能用,你也可以使用javaScript的eval方法。不需要再写额外的处理数据的方法:
  
  1
  
  2
  
  3
  
  4
  
  varjson=xhr.responseText;
  
  varbook=JSON.parse(json);
  
  alert(book[0].title);//firstbooktitle
  
  alert(book[1].url);//secondbookURL
  
  使用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
  
  varscript=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
  
  varscript=document.createElement("script");
  
  script.src="http://webservice.com/?a=1&b=2&callback=MyDataHandler";
  
  document.getElementsByTagName("head")[0].appendChild(script);
  
  这时候,网络服务通常会返回一个包含在一个回调函数中的JSON数据,这就是JSONP,或者“JSONwithpadding”,看看代码:
  
  1
  
  2
  
  3
  
  4
  
  5
  
  6
  
  7
  
  8
  
  9
  
  10
  
  11
  
  12
  
  13
  
  MyDataHandler([
  
  {
  
  title:"ThePrinciplesofBeautifulWebDesign,2ndEdition",
  
  ",
  
  author:"JasonBeaird",
  
  publisher:"SitePoint",
  
  price:{
  
  currency:"USD",
  
  amount:39.95
  
  }
  
  }
  
  ...
  
  ]);
  
  在JSON对象下载完毕之后,作为参数传递给了MyDataHandler()方法。
  
  JSON和JSONP已经是现在最流行的异步交互的数据格式了。但是在压缩传输数据大小的方面还是可以再研究的。RockUX会在后面讲到关于自定义数据返回。
  
  看看这一系列其他的文章:
  
  Ajax和WEB服务数据格式:XMLSOAPHTML
  
  Ajax和WEB服务数据格式:自定义返回格式
  
  

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • php CI 实战教程:[5]用curl获取json并解析

    php CI 实战教程:[5]用curl获取json并解析

    2016-02-26 17:00

  •  JSON入门级学习总结-JSON数据结构

    JSON入门级学习总结-JSON数据结构

    2016-02-25 11:05

  • 自定义jinja2 过滤器

    自定义jinja2 过滤器

    2016-02-14 10:00

  • Android解析Json速度最快的库:json

    Android解析Json速度最快的库:json

    2016-02-13 18:00

网友点评