文章分类
HTML/CSS Flash教程 Fireworks教程 Dreamweave JavaScript 网站推广 网页理论 其他教程 视频教程
 产品搜索
关键字: 分类:

整站搜索:
最新更新资源:
海量设计素材
韩国网页设计模板
高清PSD素材库
Flash网站模板
设计素材图库:
婚纱影楼模板
韩国卡通图库
VIS模板
版式画册模板

最新素材图库



当前位置:首页 >> 网页教程>> JavaScript >> 集中数据格式:JSON和JSONP

集中数据格式:JSON和JSONP


作者: 佚名 来源:网络 浏览:7 日期:2011-6-23 19:31:50

网页制作Webjx文章简介:Ajax和WEB服务数据格式:JSON JSONP.

在之前的文章中我们讲到了早期的集中数据格式,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的优点在于:

  • 比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
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服务数据格式:自定义返回格式

转载请注明:
作者:RockUX–WEB前端
出自:Ajax和WEB服务数据格式:JSON JSONP


上一篇:异步的javascript和XML数据格式:XML SOAP HTML 下一篇:Mousewheel事件:鼠标滚轮放大页面字体
【关闭窗口】 【返回顶部】返回网页教程】 【返回JavaScript

相关推荐文章

ControlJS优化..

10个美观实用的jQu..

jQuery插件分享:..

webdesignle..

WEBJX收集9个小巧..

Mozilla:让&#..

JS教程:如何制作表单..


关于本站 | 广告服务 | 联系我们 | 站长微博 | 活动支持 | 友情链接 | 投稿热线 | 网站地图
版权所有 Copyright@ 2005 设计路上 QQ技术讨论群 24980615(已满) 5204059(已满) 4337615(已满)
业务联系Email:huchuangwu@hotmail.com 粤ICP备05029101号