JSON 入门指南 想了解json的朋友可以看下


Posted in Javascript onAugust 26, 2009

尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web Services,否则,在普通的 Web 应用中,开发者经常为 XML 的解析伤透了脑筋,无论是服务器端生成或处理 XML,还是客户端用 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 的数据格式非常简单,您可以用 JSON 传输一个简单的 String,Number,Boolean,也可以传输一个数组,或者一个复杂的 Object 对象。
String,Number 和 Boolean 用 JSON 表示非常简单。例如,用 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 表示数据,接下来,我们还要解决如何在服务器端生成 JSON 格式的数据以便发送到客户端,以及客户端如何使用 JavaScript 处理 JSON 格式的数据。
我们先讨论如何在 Web 页面中用 JavaScript 处理 JSON 数据。我们通过一个简单的 JavaScript 方法就能看到客户端如何将 JSON 数据表示给用户:
function handleJson() {
var j={"name":"Michael","address":
{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
};
document.write(j.name);
document.write(j.address.city);
}
假定服务器返回的 JSON 数据是上文的:
{"name":"Michael","address":
{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}
}
只需将其赋值给一个 JavaScript 变量,就可以立刻使用该变量并更新页面中的信息了,相比 XML 需要从 DOM 中读取各种节点而言,JSON 的使用非常容易。我们需要做的仅仅是发送一个 Ajax 请求,然后将服务器返回的 JSON 数据赋值给一个变量即可。有许多 Ajax 框架早已包含了处理 JSON 数据的能力,例如 Prototype(一个流行的 JavaScript 库:http://prototypejs.org)提供了 evalJSON() 方法,能直接将服务器返回的 JSON 文本变成一个 JavaScript 变量:
new Ajax.Request("http://url", {
method: "get",
onSuccess: function(transport) {
var json = transport.responseText.evalJSON();
// TODO: document.write(json.xxx);
}
});
服务器端输出 JSON 格式数据
下面我们讨论如何在服务器端输出 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 就容易得多,利用 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); 
}

好在服务器处理的 JSON 数据最终都应该转化为简单的 JavaScript 对象,因此,递归引用的可能性很小。
最后,通过 Servlet 或 MVC 框架输出 JSON 时,需要设置正确的 MIME 类型(application/json)和字符编码。假定服务器使用 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 确实是目前最灵活的轻量级方案。
Javascript 相关文章推荐
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
javascript 继承实现方法
Aug 26 #Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 #Javascript
JavaScript 获取用户客户端操作系统版本
Aug 25 #Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 #Javascript
jquery 表单进行客户端验证demo
Aug 24 #Javascript
JS 时间显示效果代码
Aug 23 #Javascript
JQuery this 和 $(this) 的区别
Aug 23 #Javascript
You might like
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python使用multiprocessing创建进程的方法
2015/06/04 Python
Python三级菜单的实例
2017/09/13 Python
python基础练习之几个简单的游戏
2017/11/10 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
教学器材管理制度
2014/01/26 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
安全生产工作汇报
2014/10/28 职场文书
审美与表现自我评价
2015/03/09 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技