1.JSON是什么:
JSON 即JavaScript Object Notation,它是一种轻量级的数据交换格式,非常适合于服务器与JavaScript的交互。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。
JSON 是一种基于文本的开放式数据交换格式。与 XML 一样,它便于读者阅读、独立于平台,并且具有广泛的可实现性。根据 JSON 标准设置格式的数据是轻型的,可由 JavaScript 实现轻而易举地进行分析,使之成为适用于 Ajax web 应用程序的理想数据交换格式。JSON 主要是一种数据格式,因此它不局限于 Ajax web 应用程序,在任何场合,只要应用程序需要将结构化信息作为文本进行交换或存储,即可使用它。
JSON 天生是为 JavaScript 准备的,因此,JSON 的数据格式非常简单,您可以用 JSON 传输一个简单的 String,Number,Boolean,也可以传输一个数组,或者一个复杂的 Object 对象。
JSON (JavaScript Object Natation):是一种轻量级的数据交换格式,和XML一样,基于纯文本的数据格式,可以表达String、Number、Boolean、数组、甚至对象等数据
适合于服务器与JavaScript客户端的交互,JSON实际上是基于JavaScript语法的一个子集。
2.JSON出现的背景:
许多宣传关于 XML 如何拥有跨平台,跨语言的优势,但是:除非应用于 Web Services,否则,在普通的 Web 应用中,开发者经常为 XML 的解析伤透了脑筋,无论是服务器端生成或处理 XML,还是客户端用 JavaScript 解析 XML,都常常导致复杂的代码,极低的开发效率。实际上,对于大多数 Web 应用来说,他们根本不需要复杂的 XML 来传输数据,XML 的扩展性很少具有优势,许多 AJAX 应用甚至直接返回 HTML 片段来构建动态 Web 页面。和返回 XML 并解析它相比,返回 HTML 片段大大降低了系统的复杂性,但同时缺少了一定的灵活性。JSON的出现可以说是为了满足这方面的需求。方便轻松集成到HTML页面中以满足Ajax的要求。
JSON 为 Web 应用开发者提供了另一种数据交换格式。同 XML 或 HTML 片段相比,JSON 提供了更好的简单性和灵活性。
3.值的表示
字符串、数值、true、false、null、Object或数组等。
字符串
"abc" 、 "\r\n" 、 "\u00A9"
数值
123 、 -123.5
布尔
true 、 false
null
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。
数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。
数组表示
使用 [ ] 包含所有元素,每个元素用逗号分隔,元素可以是任意的值。
比如:
[ "abc" , 123 , true, null ]
访问其中的元素,使用索引号,从 0 开始。
复杂数据表示
Object或数组中的值还可以是另一个 Object 或者数组 ,以表示更复杂的数据
比如:
List list=new ArrayList();
List.add(emp)
[
{"name":"张三", "age":18 , "loves":["看书","玩游戏"]},
{"name":"王五", "age": 20,"loves":["旅游"]}
]
值(value)可以是双引号括起来的字符串(string)、数值(number)、true、false、 null、对象(object)或者数组(array)。这些结构可以嵌套。
Object表示
用 { } 包含一系列无序的 Key-Value 键值对表示,其中Key和Value之间用冒号分割,每个key-value之间用逗号分割。
比如:
{ "bookname":"Ajax基础",
"publisher":"电子工业出版社",
"price": 56.0
}
访问其中的数据,通过obj.key来获取对应的value
4.JSON 与XML对比
2 可读性 JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,很难分出胜负。
2 可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的。
2 编码难度 XML有丰富的编码工具,比如Dom4j、JDom等,JSON也有json.org提供的工具,但是JSON的编码明显比XML容易许多,即使不借助工具也能写出JSON的代码,可是要写好XML就不太容易了。
2 解码难度 XML的解析得考虑子节点父节点,让人头昏眼花,而JSON的解析难度几乎为0。
2 流行度 XML已经被业界广泛的使用,而JSON才刚刚开始,但是在Ajax这个特定的领域,未来的发展一定是XML让位于JSON。到时Ajax应该变成Ajaj(Asynchronous JavaScript and JSON)了。
5.转换
<!--
文本格式数据如何解析成对象:使用JavaScript的eval()函数
-->
例如:
<script type="text/javascript">
var j="{‘name‘:‘张狂‘,‘age‘:25}";
var obj=eval("("+j+")");
alert(obj.name);
</script>
jQeury的专门处理JSON格式数据的方法
$.getJSON(url [,data] [,callback])
url是必须的,请求的服务器URL地址
data 可选,传递的参数,格式为 {name:value,...}
callback 可选,回调函数的参数,已经是解析后的JSON对象
5.JSON应用实例:
下面的代码显示了JSON存储数据比XML要简单得多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <div> <input align="middle" type="button" value="获取用户信息" onclick="showUser();"/> </div> <hr/> <div id="bd"> </div> <!-- 将此XML片段的用户信息转化为JSON表示,并输出在页面: <content> <user> <username>andy</username> <age>20</age> <info> <tel>123456</tel> <cellphone>191198765</tel> </info> <address> <city>Beijing</city> <postcode>222333</postcode> </address> <address> <city>newyork</city> <postcode>555666</postcode> </address> </user> </content> --> <script type="text/javascript"> function showUser() { //使用json创建一个user对象 var user= { "username":"andy", "age":20, "info":{"tel":"123456","cellphone":"191198765"}, "address": [ {"city":"Beijing","postcode":"222333"}, {"city":"newyork","postcode":"555666"} ] } //创建一个表格对象 var tb=document.createElement("table"); //设置表格的边框为2 tb.border=2; tb.width=300; tb.height=8; tb.align="center"; //创建表格标题对象 var caption=tb.createCaption(); caption.innerHTML="用户信息"; //插入表格内的行 var tr=tb.insertRow(0); //插入行内的列 var td=tr.insertCell(0); td.innerHTML="username"; var td=tr.insertCell(1); td.innerHTML=user.username; //插入表格内的行 var tr1=tb.insertRow(1); //插入行内的列 var td1=tr1.insertCell(0); td1.innerHTML="age"; var td1=tr1.insertCell(1); td1.innerHTML=user.age; var tr2=tb.insertRow(2); //插入行内的列 var td2=tr2.insertCell(0); td2.innerHTML="tel"; var td2=tr2.insertCell(1); td2.innerHTML=user.info.tel; var tr3=tb.insertRow(3); //插入行内的列 var td3=tr3.insertCell(0); td3.innerHTML="cellphone"; var td3=tr3.insertCell(1); td3.innerHTML=user.info.cellphone; var tr4=tb.insertRow(4); //插入行内的列 var td4=tr4.insertCell(0); td4.innerHTML="city"; var td4=tr4.insertCell(1); td4.innerHTML=user.address[0].city; var tr5=tb.insertRow(5); //插入行内的列 var td5=tr5.insertCell(0); td5.innerHTML="postcode"; var td5=tr5.insertCell(1); td5.innerHTML=user.address[0].postcode; var tr6=tb.insertRow(6); //插入行内的列 var td6=tr6.insertCell(0); td6.innerHTML="city"; var td6=tr6.insertCell(1); td6.innerHTML=user.address[1].city; var tr7=tb.insertRow(7); //插入行内的列 var td7=tr7.insertCell(0); td7.innerHTML="postcode"; var td7=tr7.insertCell(1); td7.innerHTML=user.address[1].postcode; document.getElementById("bd").appendChild(tb); } </script> </body> </html>
下面代码显示了JSON是如何简化创建JavaScript对象的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <script type="text/javascript"> function person(name,age,home) { this.name=name; this.age=age; this.home=home; } var p=new person("玛丽苏",3,"苏格兰"); //alert(p.name+p.age+p.home); var pj={ "name":"玛丽苏j", "age":3, "home":"苏格兰j" } alert(pj.name+pj.age+pj.home); </script> <body> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <!-- 文本格式数据如何解析成对象:使用JavaScript的eval()函数 --> <script type="text/javascript"> var j="{'name':'张狂','age':25}"; var obj=eval("("+j+")"); alert(obj.name); </script> <body> </body> </html>