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 确实是眼下最灵活的轻量级方案。

JSON入门指南的更多相关文章

  1. JSON入门指南--客户端处理JSON

    在传统的Web开发过程中,前端工程师或者后台工程师会在页面上写后台的相关代码,比如在ASP.NET MVC4里面写如下代码: @Html.TextBoxFor(m => m.UserName, ...

  2. JSON入门指南--服务端处理JSON

    平时公司使用的ASP.NET MVC3来开发Web项目,其实在ASP.NET中已经原生的支持JSON.所以基本不需要引进Newtonsoft.Json.dll.下面看在MVC4中,后台生成JSON数据 ...

  3. [转]JSON 入门指南

    原文地址:http://www.ibm.com/developerworks/cn/web/wa-lo-json/ 尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web ...

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

    定义 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C# ...

  5. 【译】JWT(JSON Web Token) 入门指南

    JWT 入门指南 原文地址:https://blog.angular-university.io/angular-jwt/ 这篇文章是两篇手把手教你如何在Angular应用(也适用于企业级应用)中实现 ...

  6. Web API 入门指南 - 闲话安全

    Web API入门指南有些朋友回复问了些安全方面的问题,安全方面可以写的东西实在太多了,这里尽量围绕着Web API的安全性来展开,介绍一些安全的基本概念,常见安全隐患.相关的防御技巧以及Web AP ...

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

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  8. 001.Getting Started -- 【入门指南】

    Getting Started 入门指南 662 of 756 people found this helpful Meng.Net 自译 1. Install .NET Core 到官网安装 .NE ...

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

    Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目 ...

随机推荐

  1. Layui下拉选渲染

    下拉选渲染有很多方式,这个比较简单,记录一下: HTML代码如下: <div class="layui-input-inline"> <input type=&q ...

  2. PHP实现微信第三方登录的方法

    本文实例讲述了PHP版微信第三方实现一键登录及获取用户信息的方法.分享给大家供大家参考,具体如下: 注意,要使用微信在第三方网页登录是需要“服务号”才可以哦,所以必须到官方申请 一开始你需要进入微信公 ...

  3. nginx配置location项的URL匹配规则

    Localtion URL的正则匹配规则 示例 location / { try_files $uri @apache; } #所有的路径都是/开头,表示匹配所有 location @apache { ...

  4. win7右键菜单不见解决办法

    直接 开始 运行: cmd /k reg add "HKEY_CLASSES_ROOT\Directory\Background\shellex\ContextMenuHandlers\Ne ...

  5. 【转载】Hadoop NameNode 高可用 (High Availability) 实现解析

    转载:https://www.ibm.com/developerworks/cn/opensource/os-cn-hadoop-name-node/ NameNode 高可用整体架构概述 在 Had ...

  6. pcb中几个层的解释

    阻焊层(Solder Mask):又称为绿油层,是PCB的非布线层,用于制成丝网漏印板,将不需要焊接的地方涂一层阻焊物质,防止焊接PCB时焊锡在高温下的流动性.在阻焊层上预留的焊盘大小,要比实际焊盘大 ...

  7. matplotlib多种绘图方式

    目录 散点图 条形图 直方图 总结 散点图 假设通过爬虫你获取到了北京2016年3,10月份每天白天的最高气温(分别位于列表a,b),那么此时如何寻找出气温和随时间(天)变化的某种规律? a = [1 ...

  8. Leetcode 204计数质数

    计数质数 统计所有小于非负整数 n 的质数的数量. 示例: 输入: 10 输出: 4 解释: 小于 10 的质数一共有 4 个, 它们是 2, 3, 5, 7 . 比计算少n中素数的个数. 素数又称质 ...

  9. 九度oj 题目1516:调整数组顺序使奇数位于偶数前面

    题目1516:调整数组顺序使奇数位于偶数前面 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:3416 解决:1091 题目描述: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序, ...

  10. z_algorithm

    //对于字符串a的每个后缀,匹配它与a的第一个后缀的最长公共前缀,复杂度线性void z_algorithm(char *a,int len) { z[]=len; ,j=,k;i<len;i= ...