JSON 入門教程基礎篇 json入門學習筆記
JSON: JavaScript Object Notation(JavaScript 物件表示法)
JSON 是儲存和交換文字資訊的語法。類似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON 例項
{
"sites": [
{ "name":"我們","url":"www.jb51.net" },{ "name":"google","url":"www.google.com" },{ "name":"微博","url":"www.weibo.com" }
]
}
這個 sites 物件是包含 3 個站點記錄（物件）的陣列。
什麼是 JSON ？
JSON 指的是 JavaScript 物件表示法（JavaScript Object Notation）
JSON 獨立於語言：JSON 使用 Javascript語法來描述資料物件，但是 JSON 仍然獨立於語言和平臺。JSON 解析器和 JSON 庫支援許多不同的程式語言。 目前非常多的動態（PHP，JSP，.NET）程式語言都支援JSON。
JSON 具有自我描述性，更易理解
JSON - 轉換為 JavaScript 物件
JSON 文字格式在語法上與建立 JavaScript 物件的程式碼相同。
由於這種相似性，無需解析器，JavaScript 程式能夠使用內建的 eval() 函式，用 JSON 資料來生成原生的 JavaScript 物件。
線上例項
通過我們的編輯器，您可以線上編輯 JavaScript 程式碼，然後通過點選一個按鈕來檢視結果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我們(jb51.net)</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":"我們","url":"www.jb51.net","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 資料的書寫格式是：名稱/值對。
名稱/值對包括欄位名稱（在雙引號中），後面寫一個冒號，然後是值：
"name" : "我們"
這很容易理解，等價於這條 JavaScript 語句：
name = "我們"
JSON 值
JSON 值可以是：
數字（整數或浮點數）
字串（在雙引號中）
邏輯值（true 或 false）
陣列（在中括號中）
物件（在大括號中）
null
JSON 數字
JSON 數字可以是整型或者浮點型：
{ "age":30 }
JSON 物件
JSON 物件在大括號（{}）中書寫：
物件可以包含多個名稱/值對：
{ "name":"我們","url":"www.jb51.net" }
這一點也容易理解，與這條 JavaScript 語句等價：
name = "我們"
url = "www.jb51.net"
JSON 陣列
JSON 陣列在中括號中書寫：
陣列可包含多個物件：
{
"sites": [
{ "name":"我們",
{ "name":"google",
{ "name":"微博","url":"www.weibo.com" }
]
}
在上面的例子中，物件 "sites" 是包含三個物件的陣列。每個物件代表一條關於某個網站（name、url）的記錄。
JSON 布林值
JSON 布林值可以是 true 或者 false：
{ "flag":true }
JSON null
JSON 可以設定 null 值：
{ "jb51":null }
JSON 使用 JavaScript 語法
因為 JSON 使用 JavaScript 語法，所以無需額外的軟體就能處理 JavaScript 中的 JSON。
通過 JavaScript，您可以建立一個物件陣列，並像這樣進行賦值：
var sites = [
{ "name":"jb51","url":"www.jb51.com" },"url":"www.weibo.com" }
];
可以像這樣訪問 JavaScript 物件陣列中的第一項（索引從 0 開始）：
sites[0].name;
返回的內容是：
jb51
可以像這樣修改資料：
sites[0].name="我們";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我們(jb51.com)</title>
</head>
<body>
<h2>JavaScript 建立 JSON 物件</h2>
<p>第一個網站名稱: <span id="name1"></span></p>
<p>第一個網站修改後的名稱: <span id="name2"></span></p>
<script>
var sites = [
{ "name":"jb51","url":"www.weibo.com" }
];
document.getElementById("name1").innerHTML=sites[0].name;
// 修改網站名稱
sites[0].name="我們";
document.getElementById("name2").innerHTML=sites[0].name;
</script>
</body>
</html>
在下面的章節，您將學到如何把 JSON 文字轉換為 JavaScript 物件。
JSON 檔案
JSON 檔案的檔案型別是 ".json"
JSON 文字的 MIME 型別是 "application/json"
JSON vs XML
JSON 和 XML 都用於接收 web 服務端的資料。
JSON 和 XML在寫法上有所不同，如下所示：
JSON 例項
{
"sites": [
{ "name":"我們","url":"www.weibo.com" }
]
}
XML 例項
<sites> <site> <name>我們</name> <url>www.jb51.com</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 字串