Web開發——JavaScript基礎（JSON教程）
JSON：JavaScript 對象表示法（JavaScript Object Notation）。
JSON 是存儲和交換文本信息的語法。類似 XML。
JSON 比 XML 更小、更快，更易解析。
1、什麽是 JSON ？
- JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
- JSON 是輕量級的文本數據交換格式
- JSON 獨立於語言 *
- JSON 具有自我描述性，更易理解
* JSON 使用 JavaScript 語法來描述數據對象，但是 JSON 仍然獨立於語言和平臺。JSON 解析器和 JSON 庫支持許多不同的編程語言。
2、JSON - 轉換為 JavaScript 對象
JSON 文本格式在語法上與創建 JavaScript 對象的代碼相同。
由於這種相似性，無需解析器，JavaScript 程序能夠使用內建的 eval() 函數，用 JSON 數據來生成原生的 JavaScript 對象。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type"content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <!--引用jQuery庫，src可以直接指向本地下載的jQery庫--> 10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--> 11 <script src="jquery-3.3.1.js"></script> 12 13 </head> 14 15 <body class="siblings"> 16 17 <h2>在 JavaScript 中創建 JSON 對象</h2> 18 <p> 19 Name: <span id="jname"></span><br /> 20 Age: <span id="jage"></span><br /> 21 Address: <span id="jstreet"></span><br /> 22 Phone: <span id="jphone"></span><br /> 23 </p> 24 25 <script type="text/javascript"> 26 var JSONObject = { 27 "name": "Bill Gates", 28 "street": "Fifth Avenue New York 666", 29 "age": 56, 30 "phone": "555 1234567" 31 }; 32 33 document.getElementById("jname").innerHTML = JSONObject.name; 34 document.getElementById("jage").innerHTML = JSONObject.age; 35 document.getElementById("jstreet").innerHTML = JSONObject.street; 36 document.getElementById("jphone").innerHTML = JSONObject.phone; 37 </script> 38 39 </body> 40 </html>
輸出結果：
在 JavaScript 中創建 JSON 對象
Name: Bill Gates
Age: 56
Address: Fifth Avenue New York 666
Phone: 555 1234567
3、類似 XML
- JSON 是純文本
- JSON 具有“自我描述性”（人類可讀）
- JSON 具有層級結構（值中存在值）
- JSON 可通過 JavaScript 進行解析
- JSON 數據可使用 AJAX 進行傳輸
4、相比 XML 的不同之處
- 沒有結束標簽
- 更短
- 讀寫的速度更快
- 能夠使用內建的 JavaScript eval() 方法進行解析
- 使用數組
- 不使用保留字
5、為什麽使用 JSON？
對於 AJAX 應用程序來說，JSON 比 XML 更快更易使用：
使用 XML
- 讀取 XML 文檔
- 使用 XML DOM 來循環遍歷文檔
- 讀取值並存儲在變量中
使用 JSON
- 讀取 JSON 字符串
- 用 eval() 處理 JSON 字符串
6、JSON 語法
6.1 JSON語法規則
JSON 語法是 JavaScript 對象表示法語法的子集。
- 數據在名稱/值對中
- 數據由逗號分隔
- 花括號保存對象
- 方括號保存數組
6.2 JSON 名稱/值對
JSON 數據的書寫格式是：名稱/值對。
名稱/值對包括字段名稱（在雙引號中），後面寫一個冒號，然後是值：
1 "firstName" : "John"
這很容易理解，等價於這條 JavaScript 語句：
1 firstName = "John"
6.3 JSON 值
JSON 值可以是：
- 數字（整數或浮點數）
- 字符串（在雙引號中）
- 邏輯值（true 或 false）
- 數組（在方括號中）
- 對象（在花括號中）
- null
6.4 JSON 對象
JSON 對象在花括號中書寫：
對象可以包含多個名稱/值對：
1 { "firstName":"John" , "lastName":"Doe" }
這一點也容易理解，與這條 JavaScript 語句等價：
1 firstName = "John" 2 lastName = "Doe"
6.5 JSON 數組
JSON 數組在方括號中書寫：
數組可包含多個對象：
1 { 2 "employees": [ 3 { "firstName":"John" , "lastName":"Doe" }, 4 { "firstName":"Anna" , "lastName":"Smith" }, 5 { "firstName":"Peter" , "lastName":"Jones" } 6 ] 7 }
在上面的例子中，對象 "employees" 是包含三個對象的數組。每個對象代表一條關於某人（有姓和名）的記錄。
6.6 JSON 使用 JavaScript 語法
因為 JSON 使用 JavaScript 語法，所以無需額外的軟件就能處理 JavaScript 中的 JSON。
通過 JavaScript，您可以創建一個對象數組，並像這樣進行賦值：
1 var employees = [ 2 { "firstName":"Bill" , "lastName":"Gates" }, 3 { "firstName":"George" , "lastName":"Bush" }, 4 { "firstName":"Thomas" , "lastName": "Carter" } 5 ];
訪問 JavaScript 對象數組中的第一項：
1 employees[0].lastName; 2 3 // 返回的內容是： 4 Gates 5 6 // 修改數據 7 employees[0].lastName = "Jobs";
舉例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <!--引用jQuery庫，src可以直接指向本地下載的jQery庫--> 10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--> 11 <script src="jquery-3.3.1.js"></script> 12 13 </head> 14 15 <body class="siblings"> 16 17 <h3>通過 JSON 字符串來創建對象</h3> 18 <p>First name: <span id="fname"></span></p> 19 20 <script type="text/javascript"> 21 var employees = [ 22 { "firstName":"Bill" , "lastName":"Gates" }, 23 { "firstName":"George" , "lastName":"Bush" }, 24 { "firstName":"Thomas" , "lastName": "Carter" } 25 ]; 26 27 document.getElementById("fname").innerHTML = employees[0].firstName; 28 </script> 29 30 </body> 31 </html>
輸出結果：
通過 JSON 字符串來創建對象
First name: Bill
6.7 JSON 文件
- JSON 文件的文件類型是 ".json"
- JSON 文本的 MIME 類型是 "application/json"
Web開發——JavaScript基礎（JSON教程）