JSON

JSON 教程

JSON: JavaScript Object Notation(JavaScript 對象表示法)
JSON 是存儲和交換文本信息的語法。類似 XML。
JSON 比 XML 更小、更快，更易解析。

什麼是 JSON ？

JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
JSON 是輕量級的文本數據交換格式
JSON 獨立於語言 *
JSON 具有自我描述性，更易理解
JSON 使用 Javascript語法來描述數據對象，但是 JSON 仍然獨立於語言和平臺。JSON 解析器和 JSON 庫支持許多不同的編程語言。 目前非常多的動態（PHP，JSP，.NET）編程語言都支持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 字符串

JSON 語法規則

JSON 語法是 JavaScript 對象表示法語法的子集。
- 數據在名稱/值對中
- 數據由逗號分隔
- 大括號保存對象
- 中括號保存數組

JSON 值

JSON 值可以是：
- 數字（整數或浮點數）

    {"age":30}

• 字符串（在雙引號中）

  {"name":"wanghao"}
  

• 邏輯值（true 或 false）

  {"flag":true}
  

• 數組（在中括號中）

JSON 數組在中括號中書寫。
JSON 中數組值必須是合法的 JSON 數據類型（字符串, 數字, 對象, 數組, 布爾值或 null）。
JavaScript 中，數組值可以是以上的 JSON 數據類型，也可以是 JavaScript 的表達式，包括函數，日期，及 undefined。

JSON 對象中數組可以包含另外一個數組，或者另外一個 JSON 對象：

    var 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>";
        }
    }

而修改與刪除操作和操作對象一樣

• null

  { "runoob":null }
  

• 對象（在大括號中）

JSON 對象在大括號（{}）中書寫,對象可以包含多個名稱/值對
key 必須是字符串，value 可以是合法的 JSON 數據類型（字符串, 數字, 對象, 數組, 布爾值或 null）。
key 和 value 中使用冒號(:)分割。
每個 key/value 對使用逗號(,)分割。

    var obj = { "name":"菜鳥教程" , "url":"www.runoob.com" };

你可以使用(.)或者([])來訪問對象的值

    var i = obj.name
    var j = obj["name"]

你同樣可以使用這樣的語法來修改JSON的值

你可以使用 for-in 來循環對象的屬性：

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

JSON 對象中可以包含另外一個 JSON 對象：

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

可以使用 delete 關鍵字來刪除 JSON 對象的屬性：

    delete myObj.sites.site1;
    delete myObj.sites["site1"]

JSON 文件

• JSON 文件的文件類型是 “.json”
• JSON 文本的 MIME 類型是 “application/json”

JSON.parse()

JSON 通常用於與服務端交換數據。
在接收服務器數據時一般是字符串。
我們可以使用 JSON.parse() 方法將數據轉換爲 JavaScript 對象。

語法

    JSON.parse(text[, reviver])

參數說明：

• text:必需， 一個有效的 JSON 字符串。
• reviver: 可選，一個轉換結果的函數， 將爲對象的每個成員調用此函數。

解析之後，我們就可以在網頁上使用 JSON 數據了：

    <p id="demo"></p>

    <script>
    var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
    document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
    </script>

解析日期

JSON 不能存儲 Date 對象。
如果你需要存儲 Date 對象，需要將其轉換爲字符串。
之後再將字符串轉換爲 Date 對象。

    var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
    var obj = JSON.parse(text);
    obj.initDate = new Date(obj.initDate);

    document.getElementById("demo").innerHTML = obj.name + "創建日期: " + obj.initDate;

我們可以啓用 JSON.parse 的第二個參數 reviver，一個轉換結果的函數，對象的每個成員調用此函數。

    var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
    var obj = JSON.parse(text, function (key, value) {
        if (key == "initDate") {
            return new Date(value);
        } else {
            return value;
    }});

    document.getElementById("demo").innerHTML = obj.name + "創建日期：" + obj.initDate;

解析函數

JSON 不允許包含函數，但你可以將函數作爲字符串存儲，之後再將字符串轉換爲函數。

    var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
    var obj = JSON.parse(text);
    obj.alexa = eval("(" + obj.alexa + ")");

    document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

從服務端接收 JSON 數據

我們可以使用 AJAX 從服務器請求 JSON 數據，並解析爲 JavaScript 對象。

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            myObj = JSON.parse(this.responseText);
            document.getElementById("demo").innerHTML = myObj.name;
        }
    };
    xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
    xmlhttp.send();

JSON.stringify()

JSON 通常用於與服務端交換數據。
在向服務器發送數據時一般是字符串。
我們可以使用 JSON.stringify() 方法將 JavaScript 對象轉換爲字符串。

語法

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

參數說明：

• value:
  必需， 一個有效的 JSON 字符串。

• replacer:
  可選。用於轉換結果的函數或數組。
  如果 replacer 爲函數，則 JSON.stringify 將調用該函數，並傳入每個成員的鍵和值。使用返回值而不是原始值。如果此函數返回 undefined，則排除成員。根對象的鍵是一個空字符串：”“。
  如果 replacer 是一個數組，則僅轉換該數組中具有鍵值的成員。成員的轉換順序與鍵在數組中的順序一樣。當 value 參數也爲數組時，將忽略 replacer 數組。

• space:
  可選，文本添加縮進、空格和換行符，如果 space 是一個數字，則返回值文本在每個級別縮進指定數目的空格，如果 space 大於 10，則文本縮進 10 個空格。space 有可以使用非數字，如：\t。

JavaScript 對象轉換

我們也可以將 JavaScript 對象轉換爲 JSON 字符串：
var obj = { “name”:”runoob”, “alexa”:10000, “site”:”www.runoob.com”};
var myJSON = JSON.stringify(obj);

JavaScript 數組轉換

我們也可以將 JavaScript 數組轉換爲 JSON 字符串：

    var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
    var myJSON = JSON.stringify(arr);

解析函數

JSON 不允許包含函數，JSON.stringify() 會刪除 JavaScript 對象的函數，包括 key 和 value。

    var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
    var myJSON = JSON.stringify(obj);

    document.getElementById("demo").innerHTML = myJSON;

我們可以在執行 JSON.stringify() 函數前將函數轉換爲字符串來避免以上問題的發生：

    var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
    obj.alexa = obj.alexa.toString();
    var myJSON = JSON.stringify(obj);

    document.getElementById("demo").innerHTML = myJSON;

解析日期

JSON 不能存儲 Date 對象。
JSON.stringify() 會將所有日期轉換爲字符串。

    var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
    var myJSON = JSON.stringify(obj);
    document.getElementById("demo").innerHTML = myJSON;

eval()

eval() 函數使用的是 JavaScript 編譯器，可解析 JSON 文本，然後生成 JavaScript 對象。必須把文本包圍在括號中，這樣才能避免語法錯誤：

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