JSON的基本結構和數據交換原理

0、補充的寫在前面的話

2017.03.29 補充內容

最近看到這篇博客的閱讀量，想來應該是有部分網友來過想要了解JSON的基本概念，這篇博文寫得可能不是那么好，所以現在再補充貼一位老師的文章，希望能幫到看到這里的網友們，戳鏈接-->《 廖雪峰的JavaScript教程 - JSON篇》

我這里再簡單提幾點，以幫助理解：

• JSON是一種數據結構，你可以理解為編寫內容的規范和要求，它不是一種特殊的文件，所以不會有什么 .java 或者 .class 之類的后綴
• JSON用於不同“平台”間傳遞信息，如前端讀不懂Java數據，后端不明白JS數據，所以通過規范的內容體也就是JSON來傳遞信息
• 信息在不同的兩方傳遞，大家各自都有解析JSON的方法，能夠讀懂上面的信息，就達到了交流的目的

另，本篇文末提到的JSON字符串轉換為JS對象，實際上是利用了字面量的概念，JSON的規范實際上就和JS對象的規范是一樣的，但是畢竟傳遞過來的是字符串，雖然內容看上去就是定義了JS對象，但無論如何它就是個字符串。所以利用 eval 方法，把這個字符串視為執行的命令來執行，就創建了我們對應的JS對象。

實際上，JS中內置有方法 JSON.parse(JSONType_String) （具體內容參考上面提到的廖雪峰老師的文章）可以直接對JSON字符串進行轉換為對象，不需要使用 eval 方法，但當初寫下這篇博文時並不知情（攤手），正好參考的別人的博客也只提到了 eval ，故成了這樣。

0、題外話：Jason Voorhees？

起初看到JSON的時候，第一反應就是Jason，然后就聯想到了Jason Voorhees（傑森.沃爾希斯），所以他是誰？

傑森.沃爾希斯(Jason Voorhees)是由Victor Miller所創造出來的虛構連續殺人魔。說到這里，你可能還是沒有印象，那么我們來張圖：

是不是覺得很眼熟？沒錯，很多恐怖游戲中都有這個讓人熟悉而恐懼的面具。

他首次出現於1980年的恐怖片《13號星期五》，然而他不是這部影片中的殺手，殺手是他母親。到了第2集才正式登場開始殺人。

如果你是個游戲愛好者，同時又是個恐怖因子愛好者，那么同樣不要錯過這款《13號星期五》同名游戲！（ 官網鏈接點我）

同樣愛好恐怖題材的貓鼠游戲，也千萬不要錯過類似的《黎明殺機》！（ 官網鏈接點我）

好了，廢話有點多，下面才是我們今天的主人公是： JSON

1、JSON介紹

JSON（JavaScript Object Notation），類似於XML， 是一種數據交換格式，相比之下，它比XML表達起來更簡單。雖然它源自於JavaScript，但是 只是一種數據格式，可以用於任何編程語言。

JSON 是 JavaScript 原生格式，這意味着在 JavaScript 中處理 JSON 數據不需要任何特殊的 API 或工具包。

JSON的規則很簡單： 對象是一個無序的 “ ‘名稱/值’ 對” 集合。一個對象以“{”（左括號）開始，“}”（右括號）結束。每個“名稱”后跟一個“:”（冒號）；“‘名稱/值’ 對”之間使用“,”（逗號）分隔。

必讀延伸閱讀：

• 【1-JavaScript編程】6-JavaScript對象 literals之對象字面量（筆記內跳轉）
  
• 【1-JavaScript編程】6-JavaScript對象 literals之對象字面量（外鏈共享）
  

---

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范例：

{
  "orderID": 12345, 
  "shopperName": "John Smith",
  "shopperEmail": "[e-mail]",
  "contents": [
    {
      "productID": 34,
      "productName": "SuperWidget",
      "quantity": 1
    },
    {
      "productID": 56,
      "productName": "WonderWidget",
      "quantity": 3
    }
  ],
  "orderCompleted": true
}

18

 

1

{

2

  "orderID": 12345, 

3

  "shopperName": "John Smith",

4

  "shopperEmail": "[e-mail]",

5

  "contents": [

6

    {

7

      "productID": 34,

8

      "productName": "SuperWidget",

9

      "quantity": 1

10

    },

11

    {

12

      "productID": 56,

13

      "productName": "WonderWidget",

14

      "quantity": 3

15

    }

16

  ],

17

  "orderCompleted": true

18

}

---

3、JSON與XML的互相比較

3.1 簡單的XML

XML：

<person>  
    <name>xiaoMing</name>   
    <age>20</age>  
</person>

4

 

1

<person>  

2

    <name>xiaoMing</name>   

3

    <age>20</age>  

4

</person>

JSON：

{
    "name":"xiaoMing", 
    "age":20
}

4

 

1

{

2

    "name":"xiaoMing", 

3

    "age":20

4

}

3.2 復雜的XML

XML：

<section>  
    <title>BOOK</title>   
    <signing>  
        <author name="author-1"/>  
        <book title="book1" price="$11"/>  
    </signing>  
    <signing>  
        <author name="author-2"/>  
        <book title="book2" price="$22"/>  
    </signing>  
</section>  

11

 

1

<section>  

2

    <title>BOOK</title>   

3

    <signing>  

4

        <author name="author-1"/>  

5

        <book title="book1" price="$11"/>  

6

    </signing>  

7

    <signing>  

8

        <author name="author-2"/>  

9

        <book title="book2" price="$22"/>  

10

    </signing>  

11

</section>  

JSON：

"section":{   
        "title":"BOOK",  
        "signing":[  
        {  
            "author":  
            {  
                "name":"author-1"  
            },  
            "book":  
            {  
                "title":"book1",  
                "price":"$11"  
            }  
        },  
        {  
            "author":  
            {  
                "name":"author-2"  
            },  
            "book":  
            {  
                "title":"book2",  
                "price":"$22"  
            }  
        }]  
}  

26

 

1

"section":{   

2

        "title":"BOOK",  

3

        "signing":[  

4

        {  

5

            "author":  

6

            {  

7

                "name":"author-1"  

8

            },  

9

            "book":  

10

            {  

11

                "title":"book1",  

12

                "price":"$11"  

13

            }  

14

        },  

15

        {  

16

            "author":  

17

            {  

18

                "name":"author-2"  

19

            },  

20

            "book":  

21

            {  

22

                "title":"book2",  

23

                "price":"$22"  

24

            }  

25

        }]  

26

}  

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：

Employee emp = new Employee(1,“王小賤”，“男”)； 

JSONObject obj = JSONObject.fromObject(emp);

String jsonStr  = obj.toString();

5

 

1

Employee emp = new Employee(1,“王小賤”，“男”)； 

2

3

JSONObject obj = JSONObject.fromObject(emp);

4

5

String jsonStr  = obj.toString();

JSONArray：

List<Employee> emps = new ArrayList< Employee >(); 

    for(int i=0;i<3;i++){

        Employee s = new Employee ();

        s.setId(i+1);

        s.setName("Bear" + i);

        s.setGender(“男”);

        emps.add(s);

    }

    JSONArray jsonArr = JSONArray.fromObject(emps);

    String jsonStr = jsonArr.toString();

19

 

1

List<Employee> emps = new ArrayList< Employee >(); 

2

3

    for(int i=0;i<3;i++){

4

5

        Employee s = new Employee ();

6

7

        s.setId(i+1);

8

9

        s.setName("Bear" + i);

10

11

        s.setGender(“男”);

12

13

        emps.add(s);

14

15

    }

16

17

    JSONArray jsonArr = JSONArray.fromObject(emps);

18

19

    String jsonStr = jsonArr.toString();

4.3 JSON字符串轉換成JS對象

當JSON經傳輸到達客戶端時，需要完成JSON到JavaScript對象的轉換，

如果使用JS原生的方法進行轉換的話，可以使用 eval（）方法，但需要在JSON的前后連接上左右圓括號，如：

var  jsonObj = eval(“(“ + json + “)”); 

1

 

1

var  jsonObj = eval(“(“ + json + “)”); 

（ eval() 函數可計算某個字符串，並執行其中的的 JavaScript 代碼。 語法：eval(string) ）

為什么要 eval這里要添加('('+json+')') 呢？

原因在於eval本身的問題。 由於json是以”{}”的方式來開始以及結束的，在JS中，它會被當成一個語句塊來處理，所以必須強制性的將它轉換成一種表達式。加上圓括號的目的是迫使eval函數在處理JavaScript代碼的時候強制將括號內的表達式（expression）轉化為對象，而不是作為語句（statement）來執行。

但是需要注意的是方式eval()方法是動態執行其中字符串（可能是js腳本）的，這樣很容易會造成系統的安全問題。所以可以采用一些規避了 eval()的第三方客戶端腳本庫，如prototype.js里面提供的evalJSON（）方法。通過在頁面中引入prototype.js文件后就 可以使用這個擴展庫。

實現代碼如下：

<script type="text/javascript"     src="js/prototype-1.6.0.3.js"></script> 

    <script type="text/javascript">

        function f1(){

            var xhr = getXhr();

            xhr.open('get','quoto.do',true);

            xhr.onreadystatechange=function(){

                if(xhr.readyState == 4){

                    var txt = xhr.responseText;

                    //將json字符串轉換成javascript對象或者數組

                    var arr = txt.evalJSON();

}

            };

            xhr.send(null);

        }

</script>

x

 

1

<script type="text/javascript"     src="js/prototype-1.6.0.3.js"></script> 

2

3

    <script type="text/javascript">

4

5

        function f1(){

6

7

            var xhr = getXhr();

8

9

            xhr.open('get','quoto.do',true);

10

11

            xhr.onreadystatechange=function(){

12

13

                if(xhr.readyState == 4){

14

15

                    var txt = xhr.responseText;

16

17

                    //將json字符串轉換成javascript對象或者數組

18

19

                    var arr = txt.evalJSON();

20

21

}

22

23

            };

24

25

            xhr.send(null);

26

27

        }

28

29

</script>

4.4 JSON數據交換的思維導圖

放大一些如下：

  

---

5、參考鏈接

• JSON for java入門總結
  
• JSON、使用JSON進行數據交換的基礎和原理
  
• JSON 和 XML 優缺點的比較
  

附件列表