JSON（一）與XML對比、MIME、JSON物件、JSON陣列

總結：

• key 必須是字串，value 可以是合法的 JSON 資料型別（字串, 數字, 物件, 陣列, 布林值或 null），
• 點號：x = myObj.name；中括號：x = myObj[“name”]
• 使用for…in遍歷JSON陣列更方便

1. JSON簡介

JSON: JavaScript Object Notation(JavaScript 物件表示法)

JSON 是存盤和交換文本資訊的語法，類似 XML，

JSON 比 XML 更小、更快，更易決議，

什么是 JSON ？

• JSON 指的是 JavaScript 物件表示法（JavaScript Object Notation）
• JSON 是輕量級的文本資料交換格式
• JSON 獨立于語言：JSON 使用 Javascript語法來描述資料物件，但是 JSON 仍然獨立于語言和平臺，JSON 決議器和 JSON 庫支持許多不同的編程語言， 目前非常多的動態（PHP，JSP，.NET）編程語言都支持JSON，
• JSON 具有自我描述性，更易理解

JSON - 轉換為 JavaScript 物件

JSON 文本格式在語法上與創建 JavaScript 物件的代碼相同，

由于這種相似性，無需決議器，JavaScript 程式能夠使用內建的 eval() 函式，用 JSON 資料來生成原生的 JavaScript 物件，

與 XML 相同之處

• JSON 是純文本
• JSON 具有"自我描述性"（人類可讀）
• JSON 具有層級結構（值中存在值）
• JSON 可通過 JavaScript 進行決議
• JSON 資料可使用 AJAX 進行傳輸

與 XML 不同之處

• 沒有結束標簽
• 更短
• 讀寫的速度更快
• 能夠使用內建的 JavaScript eval() 方法進行決議
• 使用陣列
• 不使用保留字

為什么使用 JSON？

對于 AJAX 應用程式來說，JSON 比 XML 更快更易使用：

使用 XML

• 讀取 XML 檔案
• 使用 XML DOM 來回圈遍歷檔案
• 讀取值并存盤在變數中

使用 JSON

• 讀取 JSON 字串
• 用 eval() 處理 JSON 字串

2. JSON語法規則

JSON 語法是 JavaScript 物件表示語法的子集，

• 資料在名稱/值對中
• 資料由逗號分隔
• 大括號 {} 保存物件
• 中括號 [] 保存陣列，陣列可以包含多個物件

JSON 名稱/值對

JSON 資料的書寫格式是：

key : value

名稱/值對包括欄位名稱（在雙引號中），后面寫一個冒號，然后是值：

“name” : “菜鳥教程”

這很容易理解，等價于這條 JavaScript 陳述句：

name = "菜鳥教程"

JSON 陣列

JSON 陣列在中括號 [] 中書寫：

陣列可包含多個物件：

[
    { key1 : value1-1 , key2:value1-2 }, 
    { key1 : value2-1 , key2:value2-2 }, 
    { key1 : value3-1 , key2:value3-2 }, 
    ...
    { keyN : valueN-1 , keyN:valueN-2 }, 
]

JSON 檔案（MIME）

• JSON 檔案的檔案型別是 .json
• JSON 文本的 MIME 型別是 application/json

MIME的全稱是Multipurpose Internet Mail Extensions，即多用途互聯網郵件擴展型別，

MIME的格式：

type/subtype

第一級分類：

第二級分類：

3. JSON vs XML

JSON 和 XML 都用于接收 web 服務端的資料，

最大的不同是：XML 需要使用 XML 決議器來決議，JSON 可以使用標準的 JavaScript 函式來決議，

• JSON.parse(): 將一個 JSON 字串轉換為 JavaScript 物件，
• JSON.stringify(): 于將 JavaScript 值轉換為 JSON 字串，

為什么 JSON 比 XML 更好？

XML 比 JSON 更難決議，

JSON 可以直接使用現有的 JavaScript 物件決議，

針對 AJAX 應用，JSON 比 XML 資料加載更快，而且更簡單：

使用 XML

• 獲取 XML 檔案
• 使用 XML DOM 迭代回圈檔案
• 接資料決議出來復制給變數

使用 JSON

• 獲取 JSON 字串
• JSON.Parse 決議 JSON 字串

4. JSON物件

物件語法

{ "name":"runoob", "alexa":10000, "site":null }

JSON 物件使用在大括號({})中書寫，

物件可以包含多個 **key/value（鍵/值）**對，

key 必須是字串，value 可以是合法的 JSON 資料型別（字串, 數字, 物件, 陣列, 布林值或 null），

key 和 value 中使用冒號(:)分割，

每個 key/value 對使用逗號(,)分割，

訪問物件值

你可以使用點號（.）來訪問物件的值：

var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj.name;

你也可以使用中括號（[]）來訪問物件的值：

var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj["name"];

回圈物件

你可以使用 for-in 來回圈物件的屬性：

ar myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += x + "<br>";
}

在 for-in 回圈物件的屬性時，使用中括號（[]）來訪問屬性的值：

var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}

嵌套 JSON 物件

JSON 物件中可以包含另外一個 JSON 物件：

myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}

你可以使用點號(.)或者中括號([])來訪問嵌套的 JSON 物件，

x = myObj.sites.site1;
// 或者
x = myObj.sites["site1"];

修改值

你可以使用點號(.)來修改 JSON 物件的值：

myObj.sites.site1 = "www.google.com";

你可以使用中括號([])來修改 JSON 物件的值：

myObj.sites["site1"] = "www.google.com";

洗掉物件屬性

我們可以使用 delete 關鍵字來洗掉 JSON 物件的屬性：

delete myObj.sites.site1;

你可以使用中括號([])來洗掉 JSON 物件的屬性：

delete myObj.sites["site1"]

5. JSON陣列

陣列作為 JSON 物件

[ "Google", "Runoob", "Taobao" ]

JSON 陣列在中括號中書寫，

JSON 中陣列值必須是合法的 JSON 資料型別（字串, 數字, 物件, 陣列, 布林值或 null），

JavaScript 中，陣列值可以是以上的 JSON 資料型別，也可以是 JavaScript 的運算式，包括函式，日期，及 undefined，

JSON 物件中的陣列

物件屬性的值可以是一個陣列：

{
"name":"網站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
}

我們可以使用索引值來訪問陣列：

x = myObj.sites[0];

回圈陣列

你可以使用 for-in 來訪問陣列：

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

你也可以使用 for 回圈：

for (i = 0; i < myObj.sites.length; i++) {
    x += myObj.sites[i] + "<br>";
}

嵌套 JSON 物件中的陣列

JSON 物件中陣列可以包含另外一個陣列，或者另外一個 JSON 物件：

myObj = {
    "name":"網站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻譯" ] },
        { "name":"Runoob", "info":[ "菜鳥教程", "菜鳥工具", "菜鳥微信" ] },
        { "name":"Taobao", "info":[ "淘寶", "網購" ] }
    ]
}

我們可以使用 for-in 來回圈訪問每個陣列：

for (i in myObj.sites) {
    x += "<h1>" + myObj.sites[i].name + "</h1>";
    for (j in myObj.sites[i].info) {
        x += myObj.sites[i].info[j] + "<br>";
    }
}

修改陣列值

你可以使用索引值來修改陣列值：

myObj.sites[1] = "Github";

洗掉陣列元素

我們可以使用 delete 關鍵字來洗掉陣列元素：

delete myObj.sites[1];