JSON入门学习案例笔记

来源：互联网发布：域名紧急更换通知编辑：程序博客网时间：2024/05/08 09:39

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对比

² 可读性 JSON和XML的可读性可谓不相上下，一边是建议的语法，一边是规范的标签形式，很难分出胜负。

² 可扩展性 XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，JSON不能的。

² 编码难度 XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的编码明显比XML容易许多，即使不借助工具也能写出JSON的代码，可是要写好XML就不太容易了。

² 解码难度 XML的解析得考虑子节点父节点，让人头昏眼花，而JSON的解析难度几乎为0。

² 流行度 XML已经被业界广泛的使用，而JSON才刚刚开始，但是在Ajax这个特定的领域，未来的发展一定是XML让位于JSON。到时Ajax应该变成Ajaj(Asynchronous JavaScript and JSON)了。

5.转换

<!--

文本格式数据如何解析成对象:使用JavaScript的eval()函数

-->

例如：

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");//设置表格的边框为2tb.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>

0 0