8.1 JSON數據格式 · JavaWeb項目開發學習手冊

# JSON教程 * * * JSON:**J**ava**S**cript**O**bject**N**otation(JavaScript 對象表示法) JSON 是存儲和交換文本信息的語法，類似 XML。 JSON 比 XML 更小、更快，更易解析。 ## JSON 實例 { "sites": \[ { "name":"JSOn教程" , "url":"www.baishenghua.cn" }, { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" } \] } 這個 sites 對象是包含 3 個站點記錄（對象）的數組。 * * * ## 什么是 JSON ？ * JSON 指的是 JavaScript 對象表示法（**J**ava**S**cript**O**bject**N**otation） * JSON 是輕量級的文本數據交換格式 * JSON 獨立于語言：JSON 使用 Javascript語法來描述數據對象，但是 JSON 仍然獨立于語言和平臺。JSON 解析器和 JSON 庫支持許多不同的編程語言。目前非常多的動態（PHP，JSP，.NET）編程語言都支持JSON。 * JSON 具有自我描述性，更易理解 * * * ## JSON - 轉換為 JavaScript 對象 JSON 文本格式在語法上與創建 JavaScript 對象的代碼相同。由于這種相似性，無需解析器，JavaScript 程序能夠使用內建的 eval() 函數，用 JSON 數據來生成原生的 JavaScript 對象。 # JSON\- 簡介 * * * ## 在線實例通過我們的編輯器，您可以在線編輯 JavaScript 代碼，然后通過點擊一個按鈕來查看結果： ## JSON 實例 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSON教程</title> </head> <body> <h2>JavaScript 創建 JSON 對象</h2> <p> 網站名稱: <span id="jname"></span><br /> 網站地址: <span id="jurl"></span><br /> 網站 slogan: <span id="jslogan"></span><br /> </p> <script> var JSONObject= { "name":"JSON教程", "url":"www.baishenghua.cn", "slogan":"學的不僅是技術，更是夢想！" }; document.getElementById("jname").innerHTML=JSONObject.name document.getElementById("jurl").innerHTML=JSONObject.url document.getElementById("jslogan").innerHTML=JSONObject.slogan </script> </body> </html> ``` * * * ## 與 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 語法是 JavaScript 對象表示語法的子集。 * 數據在名稱/值對中 * 數據由逗號分隔 * 大括號{}保存對象 * 中括號\[\]保存數組，數組可以包含多個對象 * * * ## JSON 名稱/值對 JSON 數據的書寫格式是： ~~~ key : value ~~~ 名稱/值對包括字段名稱（在雙引號中），后面寫一個冒號，然后是值： "name" : "JSON教程" 這很容易理解，等價于這條 JavaScript 語句： name = "JSON教程" * * * ## JSON 值 JSON 值可以是： * 數字（整數或浮點數） * 字符串（在雙引號中） * 邏輯值（true 或 false） * 數組（在中括號中） * 對象（在大括號中） * null * * * ## JSON 數字 JSON 數字可以是整型或者浮點型： { "age":30 } * * * ## JSON 對象 JSON 對象在大括號{}中書寫： ~~~ {key1 : value1, key2 : value2, ... keyN : valueN } ~~~ 對象可以包含多個名稱/值對： { "name":"JSON教程" , "url":"www.baishenghua.cn" } 這一點也容易理解，與這條 JavaScript 語句等價： name = "JSON教程" url = "www.baishenghua.cn" * * * ## 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 }, ] ~~~ ``` var sites = [ { "name":"json" , "url":"www.baishenghua.cn" }, { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" } ]; ``` 在上面的例子中，對象**sites**是包含三個對象的數組。每個對象代表一條關于某個網站（name、url）的記錄。 * * * ## JSON 布爾值 JSON 布爾值可以是 true 或者 false： { "flag":true } * * * ## JSON null JSON 可以設置 null 值： { "runoob":null } * * * ## JSON 使用 JavaScript 語法因為 JSON 使用 JavaScript 語法，所以無需額外的軟件就能處理 JavaScript 中的 JSON。通過 JavaScript，您可以創建一個對象數組，并像這樣進行賦值： ## 實例 ``` var sites = [ { "name":"json" , "url":"www.baishenghua.cn" }, { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" } ]; ``` 可以像這樣訪問 JavaScript 對象數組中的第一項（索引從 0 開始）： sites\[0\].name; 返回的內容是： runoob 可以像這樣修改數據： sites\[0\].name\="JSON教程"; 在下面的章節，您將學到如何把 JSON 文本轉換為 JavaScript 對象。 * * * ## JSON 文件 * JSON 文件的文件類型是.json * JSON 文本的 MIME 類型是application/json # JSON vs XML JSON 和 XML 都用于接收 web 服務端的數據。 JSON 和 XML在寫法上有所不同，如下所示： ## JSON 實例 ``` { "sites": [ { "name":"JSON教程" , "url":"www.baishenghua.cn" }, { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" } ] } ``` ## XML 實例 ``` <sites> <site> <name>JSON教程</name> <url>www.baishenghua.cn</url> </site> <site> <name>google</name> <url>www.google.com</url> </site> <site> <name>微博</name> <url>www.weibo.com</url> </site> </sites> ``` JSON 與 XML 的相同之處： * JSON 和 XML 數據都是 "自我描述" ，都易于理解。 * JSON 和 XML 數據都是有層次的結構 * JSON 和 XML 數據可以被大多數編程語言使用 JSON 與 XML 的不同之處： * JSON 不需要結束標簽 * JSON 更加簡短 * JSON 讀寫速度更快 * JSON 可以使用數組 > **最大的不同是**：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 字符串