JSON

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

字号+ 作者:H5之家 来源:H5之家 2015-09-26 14:15 我要评论( )

在之前的文章中我们讲到了早期的集中数据格式,XML,SOAP,HTML。现在,我们来看看JSON和JSONP。 JSON JSON(JavaScript Object Notation)是Douglas Crockford提

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

JSON

    JSON(JavaScript Object Notation)是Douglas Crockford提出的。他是一个轻量级的数据交换格式,基于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: "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方法。不需要再写额外的处理数据的方法:

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

    使用JSON的优点在于:

    JSON也有一些劣势:

  • JSON在服务端语言的支持不像XML那么广泛,不过JSON.org上提供很多语言的库
  • 如果你使用eval()来解析的话,会容易出现安全问题
  •     尽管如此,JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。

    JSONP (JSON-p)

        如果你使用XMLHttpRequest来调用JSON的web服务,返回的数据可以通过JSON.parse()或者eval()来处理。你也可以使用Ajax组件来做脚本的插入,例如,将远程加载的脚本插入在DOM节点中,通过script标签调用:

    1 2 3 var script = 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 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”,看看代码:

    1 2 3 4 5 6 7 8 9 10 11 12 13 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会在后面讲到关于自定义数据返回。

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

  • Ajax和WEB服务数据格式:XML SOAP HTML
  • Ajax和WEB服务数据格式:自定义返回格式
  • 觉得文章有用?立即: 和朋友一起 共学习 共进步!

    建议继续学习:

    QQ技术交流群:445447336,欢迎加入!
    扫一扫订阅我的微信号:IT技术博客大学习

     

    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

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

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

      2016-02-13 18:00

    • JavaScript转换与解析JSON方法实例详解第1/2页

      JavaScript转换与解析JSON方法实例详解第1/2页

      2016-02-10 21:25

    网友点评
    "