Json解析及解析原理

1、JSON介绍

JSON(JavaScript Object Notation),类似于XML,是一种数据交换格式,相比之下,它比XML表达起来更简单。虽然它源自于JavaScript,但是只是一种数据格式,可以用于任何编程语言

 

JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。

 

JSON的规则很简单: 对象是一个无序的 “ ‘名称/值’ 对” 集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。

 

必读延伸阅读:

 


2、JSON的数据结构

  • null: 表示为 null
  • boolean: 表示为 true 或 false
  • number: 一般的浮点数表示方式
  • string: 表示为 "..."
  • array: 表示为 [ ... ]
  • object: 表示为 { ... }

 

2.1 array

跟Java中普通意义上的数组类似,一般形式如下:

['arr1','arr2','arr3'];

图中的value可以是:

 

2.2 object

以键值对的形式出现,key和value之间用“:”隔开,两个键值对之间用“,”隔开,一般表示形式如下:

{'key1':'value1','key2':'value2'}

你可以理解为这个Object就是一个Map,下面是一个简单的JSON范例:


 

 

 

1

<span style="color:black"><span style="color:inherit">{</span></span>

2

<span style="color:black"><span style="color:inherit">  <span style="color:#aa1111">"orderID"</span>: <span style="color:#116644">12345</span>, </span></span>

3

<span style="color:black"><span style="color:inherit">  <span style="color:#aa1111">"shopperName"</span>: <span style="color:#aa1111">"John Smith"</span>,</span></span>

4

<span style="color:black"><span style="color:inherit">  <span style="color:#aa1111">"shopperEmail"</span>: <span style="color:#aa1111">"johnsmith@example.com"</span>,</span></span>

5

<span style="color:black"><span style="color:inherit">  <span style="color:#aa1111">"contents"</span>: [</span></span>

6

<span style="color:black"><span style="color:inherit">    {</span></span>

7

<span style="color:black"><span style="color:inherit">      <span style="color:#aa1111">"productID"</span>: <span style="color:#116644">34</span>,</span></span>

8

<span style="color:black"><span style="color:inherit">      <span style="color:#aa1111">"productName"</span>: <span style="color:#aa1111">"SuperWidget"</span>,</span></span>

9

<span style="color:black"><span style="color:inherit">      <span style="color:#aa1111">"quantity"</span>: <span style="color:#116644">1</span></span></span>

10

<span style="color:black"><span style="color:inherit">    },</span></span>

11

<span style="color:black"><span style="color:inherit">    {</span></span>

12

<span style="color:black"><span style="color:inherit">      <span style="color:#aa1111">"productID"</span>: <span style="color:#116644">56</span>,</span></span>

13

<span style="color:black"><span style="color:inherit">      <span style="color:#aa1111">"productName"</span>: <span style="color:#aa1111">"WonderWidget"</span>,</span></span>

14

<span style="color:black"><span style="color:inherit">      <span style="color:#aa1111">"quantity"</span>: <span style="color:#116644">3</span></span></span>

15

<span style="color:black"><span style="color:inherit">    }</span></span>

16

<span style="color:black"><span style="color:inherit">  ],</span></span>

17

<span style="color:black"><span style="color:inherit">  <span style="color:#aa1111">"orderCompleted"</span>: <span style="color:#221199">true</span></span></span>

18

<span style="color:black"><span style="color:inherit">}</span></span>

 


 

3、JSON与XML的互相比较

3.1 简单的XML

XML:


 

 

 

1

<span style="color:black"><span style="color:inherit"><span style="color:#117700"><</span><span style="color:#117700">person</span><span style="color:#117700">></span>  </span></span>

2

<span style="color:black"><span style="color:inherit">    <span style="color:#117700"><</span><span style="color:#117700">name</span><span style="color:#117700">></span>xiaoMing<span style="color:#117700"></</span><span style="color:#117700">name</span><span style="color:#117700">></span>   </span></span>

3

<span style="color:black"><span style="color:inherit">    <span style="color:#117700"><</span><span style="color:#117700">age</span><span style="color:#117700">></span>20<span style="color:#117700"></</span><span style="color:#117700">age</span><span style="color:#117700">></span>  </span></span>

4

<span style="color:black"><span style="color:inherit"><span style="color:#117700"></</span><span style="color:#117700">person</span><span style="color:#117700">></span></span></span>

 

JSON:


 

 

 

1

<span style="color:black"><span style="color:inherit">{</span></span>

2

<span style="color:black"><span style="color:inherit">    <span style="color:#aa1111">"name"</span>:<span style="color:#aa1111">"xiaoMing"</span>, </span></span>

3

<span style="color:black"><span style="color:inherit">    <span style="color:#aa1111">"age"</span>:<span style="color:#116644">20</span></span></span>

4

<span style="color:black"><span style="color:inherit">}</span></span>

 

3.2 复杂的XML

XML:


 

 

 

1

<span style="color:black"><span style="color:inherit"><span style="color:#117700"><</span><span style="color:#117700">section</span><span style="color:#117700">></span>  </span></span>

2

<span style="color:black"><span style="color:inherit">    <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>BOOK<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>   </span></span>

3

<span style="color:black"><span style="color:inherit">    <span style="color:#117700"><</span><span style="color:#117700">signing</span><span style="color:#117700">></span>  </span></span>

4

<span style="color:black"><span style="color:inherit">        <span style="color:#117700"><</span><span style="color:#117700">author</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"author-1"</span><span style="color:#117700">/></span>  </span></span>

5

<span style="color:black"><span style="color:inherit">        <span style="color:#117700"><</span><span style="color:#117700">book</span> <span style="color:#0000cc">title</span>=<span style="color:#aa1111">"book1"</span> <span style="color:#0000cc">price</span>=<span style="color:#aa1111">"$11"</span><span style="color:#117700">/></span>  </span></span>

6

<span style="color:black"><span style="color:inherit">    <span style="color:#117700"></</span><span style="color:#117700">signing</span><span style="color:#117700">></span>  </span></span>

7

<span style="color:black"><span style="color:inherit">    <span style="color:#117700"><</span><span style="color:#117700">signing</span><span style="color:#117700">></span>  </span></span>

8

<span style="color:black"><span style="color:inherit">        <span style="color:#117700"><</span><span style="color:#117700">author</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"author-2"</span><span style="color:#117700">/></span>  </span></span>

9

<span style="color:black"><span style="color:inherit">        <span style="color:#117700"><</span><span style="color:#117700">book</span> <span style="color:#0000cc">title</span>=<span style="color:#aa1111">"book2"</span> <span style="color:#0000cc">price</span>=<span style="color:#aa1111">"$22"</span><span style="color:#117700">/></span>  </span></span>

10

<span style="color:black"><span style="color:inherit">    <span style="color:#117700"></</span><span style="color:#117700">signing</span><span style="color:#117700">></span>  </span></span>

11

<span style="color:black"><span style="color:inherit"><span style="color:#117700"></</span><span style="color:#117700">section</span><span style="color:#117700">></span>  </span></span>

 

JSON:


 

 

 

1

<span style="color:black"><span style="color:inherit">"section":{   </span></span>

2

<span style="color:black"><span style="color:inherit">        "title":"BOOK",  </span></span>

3

<span style="color:black"><span style="color:inherit">        "signing":[  </span></span>

4

<span style="color:black"><span style="color:inherit">        {  </span></span>

5

<span style="color:black"><span style="color:inherit">            "author":  </span></span>

6

<span style="color:black"><span style="color:inherit">            {  </span></span>

7

<span style="color:black"><span style="color:inherit">                "name":"author-1"  </span></span>

8

<span style="color:black"><span style="color:inherit">            },  </span></span>

9

<span style="color:black"><span style="color:inherit">            "book":  </span></span>

10

<span style="color:black"><span style="color:inherit">            {  </span></span>

11

<span style="color:black"><span style="color:inherit">                "title":"book1",  </span></span>

12

<span style="color:black"><span style="color:inherit">                "price":"$11"  </span></span>

13

<span style="color:black"><span style="color:inherit">            }  </span></span>

14

<span style="color:black"><span style="color:inherit">        },  </span></span>

15

<span style="color:black"><span style="color:inherit">        {  </span></span>

16

<span style="color:black"><span style="color:inherit">            "author":  </span></span>

17

<span style="color:black"><span style="color:inherit">            {  </span></span>

18

<span style="color:black"><span style="color:inherit">                "name":"author-2"  </span></span>

19

<span style="color:black"><span style="color:inherit">            },  </span></span>

20

<span style="color:black"><span style="color:inherit">            "book":  </span></span>

21

<span style="color:black"><span style="color:inherit">            {  </span></span>

22

<span style="color:black"><span style="color:inherit">                "title":"book2",  </span></span>

23

<span style="color:black"><span style="color:inherit">                "price":"$22"  </span></span>

24

<span style="color:black"><span style="color:inherit">            }  </span></span>

25

<span style="color:black"><span style="color:inherit">        }]  </span></span>

26

<span style="color:black"><span style="color:inherit">}  </span></span>

 

3.3 JSON和XML的优缺点

3.3.1 XML的优缺点

优点

(1)格式统一,符合标准;

(2)容易与其他系统进行远程交互,数据传输比较方便。

 

缺点

(1)XML文件庞大,文件格式复杂,传输占带宽;

(2)服务器端和客户端都需要花费大量代码来解析XML,导致服务器端和客户端代码变得异常复杂且不易维护;

(3)客户端不同浏览器之间解析XML的方式不一致,需要重复编写很多代码;

(4)服务器端和客户端解析XML花费较多的资源和时间。

 

3.3.2 JSON的优缺点

优点

(1)数据格式比较简单,易于读写,格式都是压缩的,占用带宽小;

(2)易于解析,客户端JavaScript可以简单的通过eval_r()进行JSON数据的读取;

(3)支持多种语言,包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言,便于服务器端的解析;

(4)在PHP世界,已经有PHP-JSON和JSON-PHP出现了,偏于PHP序列化后的程序直接调用,PHP服务器端的对象、数组等能直接生成JSON格式,便于客户端的访问提取;

(5)因为JSON格式能直接为服务器端代码使用,大大简化了服务器端和客户端的代码开发量,且完成任务不变,并且易于维护。

 

缺点

(1)没有XML格式这么推广的深入人心和喜用广泛,没有XML那么通用性;

(2)JSON格式目前在Web Service中推广还属于初级阶段。

 

 


 

4、使用JSON实现数据交换

如果我们想要使用JSON包,则可以下载JSON包的源代码,并将这些代码添加进Eclipse工程中,即可调用;

如果想要看API文档,可以参见:https://github.com/stleary/JSON-java

JSON包中最常用的两个类就是JSONObject和JSONArray,分别表示两种数据结构。

4.1 数据交换原理

JSON作为数据的交换格式,在客户端和服务器端都要有对应的转换过程。

  • 如果是客户端请求数据,那么服务器端就将Java对象先转换成 JSON字符串
  • 经响应把字符串传到客户端之后,客户端就会接收到这个转换结果;
  • 但JavaScript要求把这个字符串变成对象格式才更方便访问;
  • 所以在客户端的JavaScript代码中又需要将这个JSON字符串变成JavaScript能够识别的对象
  • 这样就完成了从服务器端的对象到客户端对象的 整个转变过程。

 

同理,如果在客户端填写了数据后想提交给服务器,首先是将客户端数据构造成一个JSON对象字符串,经网络传递到服务器端,服务器端再依据转换规则将JSON字符串变成Java识别的对象。 

 

4.2 Java对象转换为JSON

在服务器端对象的转换过程可以使用官方提供的API,JSONObject和JSONArray分别为对象和数组的转换类型。

使用这两个类型进行对象转换时代码如下,

JSONObject:


 

 

 

1

<span style="color:black"><span style="color:inherit">Employee emp = <span style="color:#770088">new</span> Employee(<span style="color:#116644">1</span>,“王小贱”,“男”); </span></span>

2


 

3

<span style="color:black"><span style="color:inherit">JSONObject obj = JSONObject.fromObject(emp);</span></span>

4


 

5

<span style="color:black"><span style="color:inherit">String jsonStr  = obj.toString();</span></span>

JSONArray:


 

 

 

1

<span style="color:black"><span style="color:inherit">List<Employee> emps = <span style="color:#770088">new</span> ArrayList< Employee >(); </span></span>

2


 

3

<span style="color:black"><span style="color:inherit">    <span style="color:#770088">for</span>(int i=<span style="color:#116644">0</span>;i<<span style="color:#116644">3</span>;i++){</span></span>

4


 

5

<span style="color:black"><span style="color:inherit">        Employee s = <span style="color:#770088">new</span> Employee ();</span></span>

6


 

7

<span style="color:black"><span style="color:inherit">        s.setId(i+<span style="color:#116644">1</span>);</span></span>

8


 

9

<span style="color:black"><span style="color:inherit">        s.setName(<span style="color:#aa1111">"Bear"</span> + i);</span></span>

10


 

11

<span style="color:black"><span style="color:inherit">        s.setGender(“男”);</span></span>

12


 

13

<span style="color:black"><span style="color:inherit">        emps.add(s);</span></span>

14


 

15

<span style="color:black"><span style="color:inherit">    }</span></span>

16


 

17

<span style="color:black"><span style="color:inherit">    JSONArray jsonArr = JSONArray.fromObject(emps);</span></span>

18


 

19

<span style="color:black"><span style="color:inherit">    String jsonStr = jsonArr.toString();</span></span>

 

4.3 JSON字符串转换成JS对象

当JSON经传输到达客户端时,需要完成JSON到JavaScript对象的转换,

如果使用JS原生的方法进行转换的话,可以使用eval()方法,但需要在JSON的前后连接上左右圆括号,如:


 

 

 

1

<span style="color:black"><span style="color:inherit">var  jsonObj = eval(“(“ + json + “)”); </span></span>

eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。 语法:eval(string) 

 

为什么要 eval这里要添加('('+json+')') 呢?

原因在于eval本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。

 

但是需要注意的是方式eval()方法是动态执行其中字符串(可能是js脚本)的,这样很容易会造成系统的安全问题。所以可以采用一些规避了 eval()的第三方客户端脚本库,如prototype.js里面提供的evalJSON()方法。通过在页面中引入prototype.js文件后就 可以使用这个扩展库。

 

实现代码如下:


 

 

1

<span style="color:black"><span style="color:inherit"><script type=<span style="color:#aa1111">"text/javascript"</span>     src=<span style="color:#aa1111">"js/prototype-1.6.0.3.js"</span>><<span style="color:#ff5500">/script> </span></span></span>

2


 

3

<span style="color:black"><span style="color:inherit">    <script type=<span style="color:#aa1111">"text/javascript"</span>></span></span>

4


 

5

<span style="color:black"><span style="color:inherit">        <span style="color:#770088">function</span> <span style="color:#0000ff">f1</span>(){</span></span>

6


 

7

<span style="color:black"><span style="color:inherit">            <span style="color:#770088">var</span> <span style="color:#0000ff">xhr</span> = getXhr();</span></span>

8


 

9

<span style="color:black"><span style="color:inherit">            <span style="color:#0055aa">xhr</span>.open(<span style="color:#aa1111">'get'</span>,<span style="color:#aa1111">'quoto.do'</span>,<span style="color:#221199">true</span>);</span></span>

10


 

11

<span style="color:black"><span style="color:inherit">            <span style="color:#0055aa">xhr</span>.onreadystatechange=<span style="color:#770088">function</span>(){</span></span>

12


 

13

<span style="color:black"><span style="color:inherit">                <span style="color:#770088">if</span>(<span style="color:#0055aa">xhr</span>.readyState == <span style="color:#116644">4</span>){</span></span>

14


 

15

<span style="color:black"><span style="color:inherit">                    <span style="color:#770088">var</span> <span style="color:#0000ff">txt</span> = <span style="color:#0055aa">xhr</span>.responseText;</span></span>

16


 

17

<span style="color:black"><span style="color:inherit">                    <span style="color:#aa5500">//将json字符串转换成javascript对象或者数组</span></span></span>

18


 

19

<span style="color:black"><span style="color:inherit">                    <span style="color:#770088">var</span> <span style="color:#0000ff">arr</span> = <span style="color:#0055aa">txt</span>.evalJSON();</span></span>

20


 

21

<span style="color:black"><span style="color:inherit">}</span></span>

22


 

23

<span style="color:black"><span style="color:inherit">            };</span></span>

24


 

25

<span style="color:black"><span style="color:inherit">            <span style="color:#0055aa">xhr</span>.send(<span style="color:#221199">null</span>);</span></span>

26


 

27

<span style="color:black"><span style="color:inherit">        }</span></span>

28


 

29

<span style="color:black"><span style="color:inherit"><<span style="color:#ff5500">/script></span></span></span>

 

4.4 JSON数据交换的思维导图


放大一些如下:

  

 


5、参考链接

 

1. JSON的定义:

  一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性。业内主流技术为其提供了完整的解决方案(有点类似于正则表达式,获得了当今大部分语言的支持),从而可以在不同平台间进行数据交换。JSON采用兼容性很高的文本格式,同事也具备类似于C语言体系的行为。

 

2. JSON  VS XML

1). JSON和XML的书可读性基本相同;

2). JSON和XML同样拥有丰富的解析手段;

3). JSON相对于XML来讲,数据的体积小;

4). JSON与JavaScript的交互更加方便;

5). JSON对数据的描述性比XML较差;

6). JSON的速度要远远快于XML;

7). JSON数据可使用AJAX进行传输;

8). JSON具有层级结构(值中存在值)

 

3. JSON语法规则

JSON语法是JavaScript对象表示法语法的子集。

1) 数据在名称/值对中;

2) 数据由逗号分隔;

3) 花括号保存对象;

4) 方括号保存数组

 

4. JSON值

JSON值可以是:

1) 数字(证书或浮点数)

2) 字符串(在双引号中)

3) 逻辑值(true或false)

4) 数组(在方括号中)

5) 对象(在花括号中)

6) null

 

5. JSON对象

JSON对象在花括号中书写:

对象可以包含多个名称/值对:

{"firstName":"John", "lastName":"Doe"}

 

6. JSON数组

JSON数组在方括号中书写:

数组可包含多个对象:

{

"employees":[

{"firstName":"John", "lastName":"Doe"}

{"firstName":"Anna", "lastName":"Smith"}

{"firstName":"Peter", "lastName":"Jones"}

]

}

 

7. JSON使用JavaScript

因为JSON使用JavaScript语法,所以无需额外的软件就能处理JavaScript中的JSON。

通过JavaScript,您可以创建一个对象数组,并像这样进行赋值:

var employees = [

{"firstName":"Bill", "lastName":"Gates"}

{"firstName":"George", "lastName":"Bush"}

{"firstName":"Thomas", "lastName":"Carter"}

];

像这样访问JavaScript对象数组中的第一项:

employees[0].lastName;

修改数据:

employees[0].lastName="Jobs";

 

8. JSON文件

JSON文件的文件类型是".json"

JSON文本的MIME类型是"application/json"

 

9. 把JSON文本转换为JavaScript对象

JSON最常见的用法之一,是从web服务器上读取JSON数据(作为文件或作为HttpRequest),将JSON数据转换为JavaScript对象,然后在网页中使用该数据。

 

10. JSON实例-来自字符串的对象

创建包含JSON语法的JavaScript字符串

var txt = '{"employees":['+

' {"firstName":"Bill", "lastName":"Gates"}, ' +

' {"firstName":"George", "lastName":"Bush"}, '+

' {"firstName":"Thomas", "lastName":"Carter"} ]}';

由于JSON语法是JavaScript语法的子集,JavaScript函数eval()可用于将JSON文本转换为JavaScript对象。

eval()函数使用的是JavaScript编译器,可解析JSON文本,然后生成JavaScript对象。必须把文本包围在括号中,这样才能避免语法错误:

var obj=eval("("+ txt +")");

11. JSON解析器

提示:eval()函数可编译并执行任何JavaScript代码。这隐藏了一个潜在的安全问题。

使用JSON解析器将JSON转换为JavaScript对象是更安全的做法。JSON解析器只能识别JSON文本,而不会编译脚本。

在浏览器中,这提供了原生的JSON支持,而且JSON解析器的速度更快。

较新的浏览器和ECMAScript(JavaScript)标准中均包含了原生的对JSON的支持。

Web浏览器支持 Web软件支持

FireFox(Mozilla) 3.5

Internet Explorer 8

Chrome

Opera 10

Safari 4 

JQUery

Yahoo UI

Prototype

Dojo

ECMAScript 1.5

 

阅读更多

没有更多推荐了,返回首页