JSON在Web开发中的应用
一、引言
JSON(JavaScript Object Notiation)是一种轻量级的数据交换格式,它基于JavaScript语言,是在JavaScript的数组(array)和对象(object)基础上发展而来。和XML类似,都是独立于语言,在跨平台数据传输中非常有优势,但XML需要DOM来解析,而对浏览器来说,不同厂商的支持的XML DOM又有所不同,这给WEB开发者或多或少带来一些麻烦,特别是在AJAX被大家普遍使用来后,不少开发者返回的都是HTML片断,而不是XML,除非产品仅限使用IE时在必要的时候才会使用XML来传输。
二、JSON的格式
JSON的结构也很简单,是由JavaScript的对象和数组组成的,也就是“属性/值”对的集合,支持嵌套。
1、对象是“属性/值”对的集合。一个对象的开始于“{”,结束于“}”。每一个属性名和值间用“:”提示,属性间用“,”分隔。
例如,下面代码相当于定义了一个对象,该对象有两个属性“Name”和“Sex”,属性对应的值就是“ZhangMei”和“Female”:
{“Name”:“ZhangMei”;“Sex”:“Female”}
2、数组是有顺序的值的集合。一个数组开始于“[”,结束于“]”,值之间用“,”分隔。数组中的值可以是引号里的字符串、数字、true、false、null,也可以是对象或数组。这些结构都能嵌套。
例如一个包含四个元素的数组:
[1,2,“Hello”,True]
三、XML与JSON
XML是一个由节点对象组成的,层次结构的对象树。用JSON的数组加对象的格式也同样表示的是对象的集合。所以,可以很方便的将XML影射成相应的JSON格式。例如:
<classinfo>
<students>
<student>
<name>Michael Smith</name>
<average>99.5</average>
</student>
<student>
<name>Steve Johnson</name>
<average>34.87</average>
</student>
</students>
</classinfo>
上面的XML包含的是班级中的两个学生的信息。但是,有些信息不是完全必要的,如 <classinfo> <students>这些信息。如果这些信息用JSON来描述,格式如下:
{ "classinfo" :
{
"students" : [
{
"name" : "Michael Smith",
"age" : 17,
},
{
"name" : "Steve Johnson",
"age" : 17,
},
]
}
}
上面格式的[ ]就是定义数组,{ }就是定义一个对象。从格式来看,JSON要简洁很多,对于较大的XML数据,转化成JSON意味着较少的数据通信量。
四、JSON在Web中的应用举例
除了数据量有所减少,JSON带给程序员最大的好处莫过于能以统一的格式访问JSON中的数据。
下面一个例子说明如何使用JSON的数据。
首先,需要返回一个JSON字符串,如下:
<%
dim str
str = "{""demo"":{""blog"":""http://guowushi54.blog.163.com"",""author"":""gws"","
str = str & """article"":[{""title"":""AJAX"",""catalog"":""AJAX"",""text"":""This is a demo for AJAX""},{""title"":""JSON"",""catalog"":""AJAX"",""text"":""This is a demo for JSON""}]}}"
Response.Write str
%>
上面代码实际上就是要生成一个合法的JSON格式字符串。
接下来,使用AJAX获取这个JSON字符串,并将其转换成JavaScript对象。然后将其中的数据显示出来。代码如下:
<html>
<head><title> JSON</title>
<script language="javascript">
function Test(){
var http = new ActiveXObject("Microsoft.XMLHTTP");
http.onreadystatechange = function(){
if((http.readyState == 4)&&(http["status"])){
if(http.status == 200){
Ret(http.responseText);
}
}
}
http.open("Get","json.asp?rnd="+(Math.random()),true);
http.send(null);
}
function Ret(ret){
var obj = eval("("+ret+")");
var objDiv = document.getElementById("reta");
objDiv.innerHTML = "博客:"+obj.demo.blog+"<br/>"
+"作者:"+obj.demo.author+"<br/>"+"<hr/>文章:<br/>";
for(var i=0;i < obj.demo.article.length;i++){
objDiv.innerHTML += "<li>标题:"+obj.demo.article[i].title+" 类别:"+
obj.demo.article[i].catalog+" 文本:"+obj.demo.article[i].text+"</li>";
}
}
</script>
</head>
<body ><div ></div></body>
</html>
说明:语句eval("("+ret+")")将JSON字符串转化成层次结构的JavaScript对象,访问这些对象属性的格式就是“对象.子对象.属性名”。例如:
obj.demo.blog得到的就是http://guowushi54.blog.163.com。
四、JSON 和 XML的对比
1、可读性。JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,很难分出胜负。
2、可扩展性。XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的。
3、编码难度。XML有丰富的编码工具,比如Dom4j、JDom等,JSON也有json.org提供的工具,但是JSON的编码明显比XML容易许多,即使不借助工具也能写出JSON的代码,可是要写好XML就不太容易了。
4、解码难度。XML的解析得考虑子节点父节点,让人头昏眼花,而JSON的解析难度几乎为0。这一点XML输的真是没话说。
5、流行度。XML已经被业界广泛的使用,而JSON才刚刚开始,但是在Ajax这个特定的领域,未来的发展一定是XML让位于JSON。
参考文献:
1、 JSON官方网站 http://www.json.org