中央論壇 - CENTER BBS

標題: JSON 基礎教學與範例 - JSON概念、細節、使用 [打印本頁]

---

作者: 郭子錢    時間: 2013-10-1 11:55
標題: JSON 基礎教學與範例 - JSON概念、細節、使用
JSON概念

進入JSON前，請先看「Array宣告」，宣告一個Javascript Array物件，基本上是兩種語法：

1. // 正式宣告
   
2. var team1 = new Array('Bruce', 'Sherry', 'Happy');
   
3. // 整合宣告
   
4. var team2 = ['Bruce', 'Sherry', 'Happy'];
   
5. alert(team1[0]); // Bruce
   
6. alert(team2[2]); // Happy

複製代碼

一個比較正式，一個是比較簡寫，通常Javascript寫久了，會採用第二種方式來宣告Array。

再來看Javascript物件的宣告，基本上也是兩種：

1. // 正式宣告
   
2. var Bruce = new Object();
   
3. Bruce.name = 'King Kong';
   
4. Bruce.age = 18;
   
5. Bruce.sex = 'male';
   
6. alert(Bruce.age); // 18
   
7. 
   
8. // 整合宣告
   
9. var Bruce = {
   
10.   'name' : 'King Kong',
    
11.   'age' : 18,
    
12.   'sex' : 'male'
    
13. }
    
14. alert(Bruce.name); // King Kong
    
15. alert(Bruce[name]); // King Kong

複製代碼

一樣，久了也是會選第二種來寫，再來我們看看Javascript的「Array + Object」的宣告：

1. // 宣告一個familys Array，裡面包含兩個Object
   
2. var family = [
   
3.   {'name' : 'Bruce',
   
4.    'age' : 18,
   
5.    'sex' : 'male'},
   
6.   {'name' : 'Sherry',
   
7.    'age' : 16,
   
8.    'sex' : 'famale'}
   
9. ];
   
10. alert(family[0].name); // Bruce
    
11. alert(family[1].sex);  // famale

複製代碼

到這裡你已經會了JSON的80%以上了，JSON (JavaScript Object Notation)已經說明的很清楚了，它是一個JavaScript的子集，它利用Object與Array來表示資料，讓資料很容易的可以交換使用。

---

JSON寫法

我們先來看完整的JSON寫法：

1. {
   
2. "familys" : [{"name" : "Bruce", "age" : 18, "sex" : "male"}, {"name" : "Sherry","age" : 16, "sex" : "famale"}]
   
3. }

複製代碼

JSON會建構出兩種結構：(1)「"名稱" : 值」的集合；(2)Array。
JSON的細節
比對上面範例，你會發現一點也不難。

JSON Object：
以"{"開始，以"}"結尾
每個名稱後跟著一個":"
每對"名稱:值"之間用","分隔

1. { // 以"{"開始
   
2.   "name" : "Bruce",  // 每個名稱後跟著一個":"
   
3.   "age" : 18,        // 每對"名稱:值"之間用","分隔
   
4.   "sex" : "male"
   
5. } // 以"}"結尾

複製代碼

JSON Array：
以"["開始，以"]"結尾
值之間使用","

1. {
   
2.   // familys為一維陣列，陣列裡包含兩筆物件資料
   
3.   "familys" : [  // 以"["開始
   
4.     {"name" : "Bruce",
   
5.      "age" : 18,
   
6.      "sex" : "male"},  // 值之間使用","
   
7.     {"name" : "Sherry",
   
8.      "age" : 16,
   
9.      "sex" : "famale"}
   
10.   ] // 以"]"結尾
    
11. }

複製代碼

JSON Value：
值本身可以是String、Number、true、false、null、Object、Array；

JSON String：
由雙引號包圍的任意Unicode字元集合。可以使用"反斜線(\)"來轉義。

1. {
   
2.   "details" : "這是JSON的值. \n 此格式比XML合適Ajax交換資料使用."
   
3. }

複製代碼

JSON Number：
與一般數值相同，除8 / 16進制外。

---

JSON的使用

那JSON要如何使用呢？

原生的JSON格式資料，目前在IE7以上及MF 3以上，已經內建解析JSON格式的能力，但在相容性及網路上的不確定性(其他瀏覽器)，建議在有需要使用JSON格式的頁面引用json2.js，依官方說法，請不要在使用json.js這個版本的Script了。

我們有一JSON格式的String：

1. var jsonData = '{"familys" : [{"name" : "Bruce", "age" : 18, "sex" : "male"}, {"name" : "Sherry","age" : 16, "sex" : "famale"}]}';

複製代碼

方法一：使用eval()
這個方法會引發安全性問題，我就不介紹了。

方法二：使用json2.js (IE7以上及MF 3以上可以不引用)

先在網頁中引用json2.js，然後使用json2所提供的parse方法：

1. var jsonData = '{"familys" : [{"name" : "Bruce", "age" : 18, "sex" : "male"}, {"name" : "Sherry","age" : 16, "sex" : "famale"}]}';
   
2. 
   
3. var jsonObj = JSON.parse(jsonData);  // 將JSON格式資料轉為物件
   
4. 
   
5. alert(jsonObj.familys[0].name); // Bruce
   
6. alert(jsonObj.familys[1].age); // 16

複製代碼

這樣之後，我們就能在Ajax函式將伺服器傳回的JSON格式做解析：

1. // ...
   
2. if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
   
3.   var jsonObj = JSON.parse(xmlHttp.responseText);
   
4. // ...
   
5. }

複製代碼

使用了JSON來交換資料後，你會發現相關Ajax的程式碼變簡單了，例如：

1. // 原始Ajax函數
   
2. function Do(xmlHttp) {
   
3.   if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
   
4.     var familys = xmlHttp.responseXML.getElementsByTagName('familys');
   
5.     for (var i = 0; i < familys.length; i++) {
   
6.       var name = familys.getElementsByTagName('name')[0].firstChild.nodeValue;
   
7.       var age = familys.getElementsByTagName('age')[0].firstChild.nodeValue;
   
8.       var sex = familys.getElementsByTagName('sex')[0].firstChild.nodeValue;
   
9.     }
   
10.   }
    
11. }
    
12. 
    
13. // 使用JSON後的Ajax函數
    
14. function Do(xmlHttp) {
    
15.   if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
    
16.     var jsonObj = JSON.parse(xmlHttp.responseText);
    
17.     var name = jsonObj.familys[0].name;
    
18.     var age = jsonObj.familys[0].age;
    
19.     var sex = jsonObj.familys[0].sex;
    
20.   }
    
21. }

複製代碼

不只有變簡單，而且程式的撰寫更直覺。另外，你也可以把Object轉為JSON：

1. // 宣告一個familys Array，裡面包含兩個Object
   
2. var familys = [
   
3.   {'name' : 'Bruce',
   
4.    'age' : 18,
   
5.    'sex' : 'male'},
   
6.   {'name' : 'Sherry',
   
7.    'age' : 16,
   
8.    'sex' : 'famale'}
   
9. ];
   
10. 
    
11. var jsonData = JSON.stringify(familys);

複製代碼

更快速的是使用jQuery的$getJSON，但這超出了JSON的討論了。以上是接收解析JSON，那如果我要傳送JSON給伺服器呢？也簡單：

1. var xhr = request();  // 建立XHR物件
   
2. xhr.onreadystatechange = handler;
   
3. xhr.open('POST',URL);
   
4. xhr.setRequestHeader('Content-Type', 'application/json');  // 這裡是重點
   
5. xhr.send(json);

複製代碼

記得使用'application/json'來傳送即可，但一般伺服器端是看不懂JSON，不過沒關係，在JSON官網最下方或上網找一下，已經有很多高手分享出來可以在伺服器解析JSON的元件或Source Code，讓JSON資料傳送到伺服器後，依然方便好用。

來源：KingKong Bruce/陳傳興製作

---

JSON常用函數 - (Javascript)

JSON.parse()
將以 JavaScript 物件標記法 (JavaScript Object Notation，JSON) 表示的字串轉換成物件。

1. JSON.parse(text [, reviver])

複製代碼

JSON.stringify()
將 JavaScript 值轉換成以 JavaScript 物件標記法 (JavaScript Object Notation，JSON) 表示的字串。

1. JSON.stringify(value [, replacer] [, space])

複製代碼

---

歡迎光臨 中央論壇 - CENTER BBS (https://www.centerbbs.com/)

Powered by Discuz! X3