JSON入门指南

JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,很适合于server与 JavaScript 的交互。本文将高速解说 JSON 格式。并通过代码演示样例演示怎样分别在client和server端进行 JSON 格式数据的处理。

虽然有很多宣传关于 XML 怎样拥有跨平台。跨语言的优势。然而。除非应用于 Web Services。否则,在普通的 Web 应用中。开发人员经常为 XML 的解析伤透了脑筋,不管是server端生成或处理 XML,还是client用 JavaScript 解析 XML。都经常导致复杂的代码,极低的开发效率。

实际上,对于大多数 Web 应用来说,他们根本不须要复杂的 XML 来数据传输,XML 的扩展性非常少具有优势,很多
AJAX 应用甚至直接返回 HTML 片段来构建动态 Web 页面。和返回 XML 并解析它相比,返回 HTML 片段大大减少了系统的复杂性,但同一时候缺少了一定的灵活性。

如今, JSON 为 Web 应用开发人员提供了还有一种数据交换格式。

让我们来看看 JSON 究竟是什么。同 XML 或 HTML 片段相比。JSON 提供了更好的简单性和灵活性。

Ajax 资源中心

请訪问 Ajax 资源中心。这是有关 Ajax 编程模型信息的一站式中心,包含非常多文档、教程、论坛、blog、wiki 和新闻。不论什么 Ajax 的新信息都能在这里找到。

JSON 数据格式解析

和 XML 一样,JSON 也是基于纯文本的数据格式。因为 JSON 天生是为 JavaScript 准备的,因此,JSON 的数据格式很easy,您能够用 JSON 传输一个简单的 String,Number,Boolean,也能够传输一个数组,或者一个复杂的 Object 对象。

String,Number 和 Boolean 用 JSON 表示很easy。

比如,用 JSON 表示一个简单的 String “ abc ”,其格式为:

"abc"

除了字符

"

\

/

和一些控制符(

\b

\f

\n

\r

\t

)须要编码外,其它 Unicode 字符能够直接输出。

下图是一个 String 的完整表示结构:

图 1. String 的完整表示结构

一个 Number 能够依据整型或浮点数表演示样例如以下:

图 2. Number 的表示结构

这与绝大多数编程语言的表示方法一致,比如:

12345(整数)
 -3.9e10(浮点数)

Boolean 类型表示为

true

false

此外,JavaScript 中的 null 被表示为

null

,注意,

true

false

null

都没有双引號,否则将被视为一个 String 。

JSON 还能够表示一个数组对象,使用

[]

包括全部元素,每一个元素用逗号分隔,元素能够是随意的 Value,比如,下面数组包括了一个 String,Number,Boolean 和一个 null:

["abc",12345,false,null]

Object 对象在 JSON 中是用

{}

包括一系列无序的 Key-Value 键值对表示的,实际上此处的 Object 相当于 Java 中的

Map<String, Object>

,而不是 Java 的 Class 。注意 Key 仅仅能用 String 表示。

比如,一个 Address 对象包括例如以下 Key-Value:

city:Beijing
 street:Chaoyang Road
 postcode:100025(整数)

用 JSON 表演示样例如以下:

{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}

当中 Value 也能够是还有一个 Object 或者数组,因此。复杂的 Object 能够嵌套表示,比如。一个 Person 对象包括 name 和 address 对象,能够表演示样例如以下:

{"name":"Michael","address":
    {"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
}

JavaScript 处理 JSON 数据

上面介绍了怎样用 JSON 表示数据。接下来。我们还要解决怎样在server端生成 JSON 格式的数据以便发送到client,以及client怎样使用 JavaScript 处理 JSON 格式的数据。

我们先讨论怎样在 Web 页面中用 JavaScript 处理 JSON 数据。我们通过一个简单的 JavaScript 方法就能看到client怎样将 JSON 数据表示给用户:

function handleJson() {
  var j={"name":"Michael","address":
      {"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
  };
  document.write(j.name);
  document.write(j.address.city);
 }

假定server返回的 JSON 数据是上文的:

{"name":"Michael","address":
    {"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
}

只需将其赋值给一个 JavaScript 变量,就能够立马使用该变量并更新页面中的信息了,相比 XML 须要从 DOM 中读取各种节点而言,JSON 的使用很easy。我们须要做的不过发送一个 Ajax 请求,然后将server返回的 JSON 数据赋值给一个变量就可以。有很多 Ajax 框架早已包括了处理 JSON 数据的能力,比如 Prototype(一个流行的 JavaScript 库:http://prototypejs.org)提供了

evalJSON()

方法,能直接将server返回的 JSON 文本变成一个 JavaScript 变量:

new Ajax.Request("http://url", {
  method: "get",
  onSuccess: function(transport) {
    var json = transport.responseText.evalJSON();
    // TODO: document.write(json.xxx);
  }
 });

server端输出 JSON 格式数据

以下我们讨论怎样在server端输出 JSON 格式的数据。以 Java 为例。我们将演示将一个 Java 对象编码为 JSON 格式的文本。

将 String 对象编码为 JSON 格式时,仅仅需处理好特殊字符就可以。另外,必须用 (

"

) 而非 (

) 表示字符串:

 static String string2Json(String s) {
    StringBuilder sb = new StringBuilder(s.length()+20);
    sb.append(‘\"‘);
    for (int i=0; i<s.length(); i++) {
        char c = s.charAt(i);
        switch (c) {
        case ‘\"‘:
            sb.append("\\\"");
            break;
        case ‘\\‘:
            sb.append("\\\\");
            break;
        case ‘/‘:
            sb.append("\\/");
            break;
        case ‘\b‘:
            sb.append("\\b");
            break;
        case ‘\f‘:
            sb.append("\\f");
            break;
        case ‘\n‘:
            sb.append("\\n");
            break;
        case ‘\r‘:
            sb.append("\\r");
            break;
        case ‘\t‘:
            sb.append("\\t");
            break;
        default:
            sb.append(c);
        }
    }
    sb.append(‘\"‘);
    return sb.toString();
 }

将 Number 表示为 JSON 就easy得多,利用 Java 的多态,我们能够处理 Integer,Long,Float 等多种 Number 格式:

 static String number2Json(Number number) {
    return number.toString();
 }

Boolean 类型也能够直接通过

toString()

方法得到 JSON 的表示:

 static String boolean2Json(Boolean bool) {
    return bool.toString();
 }

要将数组编码为 JSON 格式,能够通过循环将每个元素编码出来:

 static String array2Json(Object[] array) {
    if (array.length==0)
        return "[]";
    StringBuilder sb = new StringBuilder(array.length << 4);
    sb.append(‘[‘);
    for (Object o : array) {
        sb.append(toJson(o));
        sb.append(‘,‘);
    }
    // 将最后加入的 ‘,‘ 变为 ‘]‘:
    sb.setCharAt(sb.length()-1, ‘]‘);
    return sb.toString();
 }

最后,我们须要将

Map<String, Object>

编码为 JSON 格式,由于 JavaScript 的 Object 实际上相应的是 Java 的

Map<String, Object>

。该方法例如以下:

 static String map2Json(Map<String, Object> map) {
    if (map.isEmpty())
        return "{}";
    StringBuilder sb = new StringBuilder(map.size() << 4);
    sb.append(‘{‘);
    Set<String> keys = map.keySet();
    for (String key : keys) {
        Object value = map.get(key);
        sb.append(‘\"‘);
        sb.append(key);
        sb.append(‘\"‘);
        sb.append(‘:‘);
        sb.append(toJson(value));
        sb.append(‘,‘);
    }
    // 将最后的 ‘,‘ 变为 ‘}‘:
    sb.setCharAt(sb.length()-1, ‘}‘);
    return sb.toString();
 }

为了统一处理随意的 Java 对象,我们编写一个入口方法

toJson(Object)

。可以将随意的 Java 对象编码为 JSON 格式:

 public static String toJson(Object o) {
    if (o==null)
        return "null";
    if (o instanceof String)
        return string2Json((String)o);
    if (o instanceof Boolean)
        return boolean2Json((Boolean)o);
    if (o instanceof Number)
        return number2Json((Number)o);
    if (o instanceof Map)
        return map2Json((Map<String, Object>)o);
    if (o instanceof Object[])
        return array2Json((Object[])o);
    throw new RuntimeException("Unsupported type: " + o.getClass().getName());
 }

我们并未对 Java 对象作严格的检查。不被支持的对象(比如 List)将直接抛出 RuntimeException 。

此外。为了保证输出的 JSON 是有效的,

Map<String, Object>

对象的 Key 也不能包括特殊字符。细心的读者可能还会发现循环引用的对象会引发无限递归,比如,精心构造一个循环引用的 Map。就能够检測到

StackOverflowException

 @Test(expected=StackOverflowError.class)
 public void testRecurrsiveMap2Json() {
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("key", map);
    JsonUtil.map2Json(map);
 }

好在server处理的 JSON 数据终于都应该转化为简单的 JavaScript 对象。因此。递归引用的可能性非常小。

最后,通过 Servlet 或 MVC 框架输出 JSON 时,须要设置正确的 MIME 类型(application/json)和字符编码。

假定server使用 UTF-8 编码,则能够使用下面代码输出编码后的 JSON 文本:

 response.setContentType("application/json;charset=UTF-8");
 response.setCharacterEncoding("UTF-8");
 PrintWriter pw = response.getWriter();
 pw.write(JsonUtil.toJson(obj));
 pw.flush();

小结

JSON 已经是 JavaScript 标准的一部分。眼下。主流的浏览器对 JSON 支持都很完好。应用 JSON,我们能够从 XML 的解析中摆脱出来,对那些应用 Ajax 的 Web 2.0 站点来说。JSON 确实是眼下最灵活的轻量级方案。

时间: 2024-10-23 21:43:17

JSON入门指南的相关文章

JSON 入门指南

JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,非常适合于服务器与 JavaScript 的交互.本文将快速讲解 JSON 格式,并通过代码示例演示如何分别在客户端和服务器端进行 JSON 格式数据的处理. 尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web Services,否则,在普通的 Web 应用中,开发者经常为 XML 的解析伤透了脑筋,无论是服务器端生成或处理 XML,还是客户端用 JavaScript

JSON取代XML?--JSON入门指南

定义 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等). 这些特性使JSON成为理想的数据交换语言. JSON研究中要关注的命题 1.JSON与XML的比较: 同 XML 或 HTML 片段相比,JSON 提供了更好的简单性和灵活性. 2.JSON序列化的操作: 参考文献 1.JSON

HTML5 Plus移动App(5+App)开发入门指南

HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能. HTML5 Plus规范 通过HTML5开发移动App时,会发现HTML5很多能力不具备.为弥补HTML5能力的不足,在W3C中国的指导下成立了www.html5plus.org组织,推出HTML5+规范.HTML5+规范是一个开放规范,允许三方浏览器厂商或其他手机runtime制造商实现.

Elasticsearch2.x手册 - 第1章 入门指南 - 1.1 基本概念

第1章         入门指南 Elasticsearch是一个高度可扩展的开源全文搜索和分析引擎.它允许你存储搜索快速并接近实时地分析大数据量.它通常是作为底层引擎应用于复杂的搜索功能和需求. 这里有几个示例用例Elasticsearch可用于 你运行一个网站的在线商店你让你的客户搜索你卖的产品.在这种情况下你可以使用Elasticsearch来存储你的整个产品目录和库存为他们提供搜索和自动完成的建议 你想收集日志和交易数据要分析和挖掘这些数据寻找趋势统计总结或异常.在这种情况下你可以使用L

Ember.js 入门指南——属性传递

1,传递参数到组件上 每个组件都是相对独立的,因此任何组件所需的数据都需要通过组件的属性把数据传递到组件中. 比如上篇<Ember.js 入门指南--组件定义>的第三点"{{component item.pn post=item}}"就是通过属性post把数据传递到组件foo-component或者bar-component上.如果在index.hbs中是如下方式调用组件那么渲染之后的页面是空的. {{component item.pn}} 请读者自己修改index.hbs

Vue.js 入门指南之“前传”(含sublime text 3 配置)

题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴级别”的前端开发人员,大牛请绕过. 1,下载安装Node.js 去 Node.js 官网下载一个Windows环节的安装包 node-v6.2.0-x64.rar 文件,一路安装下去即可.官网访问很慢,可以试试中文网 http://nodejs.cn/ 2,配置Vue环境 一开始看<基于Webpac

Web API 入门指南 - 闲话安全

参考页面: http://www.yuanjiaocheng.net/Spring/first.html http://www.yuanjiaocheng.net/entity/modelbrowser.html http://www.yuanjiaocheng.net/entity/dbcontext.html http://www.yuanjiaocheng.net/mvc/first.html http://www.yuanjiaocheng.net/webapi/first.html W

Webpack 入门指南 - 3. Hello, Angular2!

Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目相比,我们不使用 System.js,而是使用 TypeScript 直接编译,然后使用 Webpack 打包生成代码. 1. 下载 Angular 2 以及依赖包 修改我们的 package.json 文件,添加 Angular 2 涉及的包,和 Angular 2 所依赖的包,以后,我们可以慢慢

分布式消息系统Jafka入门指南之二

分布式消息系统Jafka入门指南之二 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 三.Jafka的文件夹结构 1.安装tree命令 $ sudo yum install tree 2.查看文件夹 $ tree -L 1 . ?..? ? bin ? ..?? conf ?..?? data ? ..?? lib ? ..?? LICENSE ?..? ? logs ?..?? VERSION 说明:bin文件夹:命令行脚本conf文件夹:存放配置