JSON 教程 說明: 可以自己百度JSON解析器來查看自己寫的JSON是否正確。 參考: JSON 教程http://www.w3school.com.cn/json/index.asp JSON 教程 | 菜鳥教程http://www.runoob.com/json/json-tutorial. ...
JSON 教程
說明:
可以自己百度JSON解析器來查看自己寫的JSON是否正確。
參考:
JSON 教程
http://www.w3school.com.cn/json/index.asp
JSON 教程 | 菜鳥教程
http://www.runoob.com/json/json-tutorial.html
JSON:JavaScript 對象表示法(JavaScript Object Notation)。
JSON 是存儲和交換文本信息的語法。類似 XML。
JSON 比 XML 更小、更快,更易解析。
每一章中用到的實例
{ "employees": [ { "firstName":"Bill" , "lastName":"Gates" }, { "firstName":"George" , "lastName":"Bush" }, { "firstName":"Thomas" , "lastName":"Carter" } ] }
這個 employee 對象是包含 3 個員工記錄(對象)的數組。
什麼是 JSON ?
- JSON 指的是 JavaScript 對象表示法(JavaScript Object Notation)
- JSON 是輕量級的文本數據交換格式
- JSON 獨立於語言 *
- JSON 具有自我描述性,更易理解
* JSON 使用 JavaScript 語法來描述數據對象,但是 JSON 仍然獨立於語言和平臺。JSON 解析器和 JSON 庫支持許多不同的編程語言。
JSON - 轉換為 JavaScript 對象
JSON 文本格式在語法上與創建 JavaScript 對象的代碼相同。
由於這種相似性,無需解析器,JavaScript 程式能夠使用內建的 eval() 函數,用 JSON 數據來生成原生的 JavaScript 對象。
親自試一試 - 實例
通過我們的編輯器,您可以線上編輯 JavaScript 代碼,然後通過點擊一個按鈕來查看結果:
<html>
<body>
<h2>在 JavaScript 中創建 JSON 對象</h2>
<p>
Name: <span id="jname"></span><br />
Age: <span id="jage"></span><br />
Address: <span id="jstreet"></span><br />
Phone: <span id="jphone"></span><br />
</p>
<script type="text/javascript">
var JSONObject= {
"name":"Bill Gates",
"street":"Fifth Avenue New York 666",
"age":56,
"phone":"555 1234567"};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jage").innerHTML=JSONObject.age
document.getElementById("jstreet").innerHTML=JSONObject.street
document.getElementById("jphone").innerHTML=JSONObject.phone
</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 語法是 JavaScript 語法的子集。
JSON 語法規則
JSON 語法是 JavaScript 對象表示法語法的子集。
- 數據在名稱/值對中
- 數據由逗號分隔
- 花括弧保存對象
- 方括弧保存數組
JSON 名稱/值對
JSON 數據的書寫格式是:名稱/值對。
名稱/值對包括欄位名稱(在雙引號中),後面寫一個冒號,然後是值:
"firstName" : "John"
這很容易理解,等價於這條 JavaScript 語句:
firstName = "John"
JSON 值
JSON 值可以是:
- 數字(整數或浮點數)
- 字元串(在雙引號中)
- 邏輯值(true 或 false)
- 數組(在方括弧中)
- 對象(在花括弧中)
- null
JSON 對象
JSON 對象在花括弧中書寫:
對象可以包含多個名稱/值對:
{ "firstName":"John" , "lastName":"Doe" }
這一點也容易理解,與這條 JavaScript 語句等價:
firstName = "John" lastName = "Doe"
JSON 數組
JSON 數組在方括弧中書寫:
數組可包含多個對象:
{ "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }
在上面的例子中,對象 "employees" 是包含三個對象的數組。每個對象代表一條關於某人(有姓和名)的記錄。
JSON 使用 JavaScript 語法
因為 JSON 使用 JavaScript 語法,所以無需額外的軟體就能處理 JavaScript 中的 JSON。
通過 JavaScript,您可以創建一個對象數組,並像這樣進行賦值:
例子
var employees = [ { "firstName":"Bill" , "lastName":"Gates" }, { "firstName":"George" , "lastName":"Bush" }, { "firstName":"Thomas" , "lastName": "Carter" } ];
可以像這樣訪問 JavaScript 對象數組中的第一項:
employees[0].lastName;
返回的內容是:
Gates
可以像這樣修改數據:
employees[0].lastName = "Jobs";
在下麵的章節,您將學到如何把 JSON 文本轉換為 JavaScript 對象。
JSON 文件
- JSON 文件的文件類型是 ".json"
- JSON 文本的 MIME 類型是 "application/json"
把 JSON 文本轉換為 JavaScript 對象
JSON 最常見的用法之一,是從 web 伺服器上讀取 JSON 數據(作為文件或作為 HttpRequest),將 JSON 數據轉換為 JavaScript 對象,然後在網頁中使用該數據。
為了更簡單地為您講解,我們使用字元串作為輸入進行演示(而不是文件)。
JSON 實例 - 來自字元串的對象
創建包含 JSON 語法的 JavaScript 字元串:
var txt = '{ "employees" : [' + '{ "firstName":"Bill" , "lastName":"Gates" },' + '{ "firstName":"George" , "lastName":"Bush" },' + '{ "firstName":"Thomas" , "lastName":"Carter" } ]}';
由於 JSON 語法是 JavaScript 語法的子集,JavaScript 函數 eval() 可用於將 JSON 文本轉換為 JavaScript 對象。
eval() 函數使用的是 JavaScript 編譯器,可解析 JSON 文本,然後生成 JavaScript 對象。必須把文本包圍在括弧中,這樣才能避免語法錯誤:
var obj = eval ("(" + txt + ")");
在網頁中使用 JavaScript 對象:
例子
<p> First Name: <span id="fname"></span><br /> Last Name: <span id="lname"></span><br /> </p> <script type="text/javascript"> document.getElementById("fname").innerHTML = obj.employees[1].firstName document.getElementById("lname").innerHTML = obj.employees[1].lastName </script>
JSON 解析器
提示:eval() 函數可編譯並執行任何 JavaScript 代碼。這隱藏了一個潛在的安全問題。
使用 JSON 解析器將 JSON 轉換為 JavaScript 對象是更安全的做法。JSON 解析器只能識別 JSON 文本,而不會編譯腳本。
在瀏覽器中,這提供了原生的 JSON 支持,而且 JSON 解析器的速度更快。
較新的瀏覽器和最新的 ECMAScript (JavaScript) 標準中均包含了原生的對 JSON 的支持。
Web 瀏覽器支持 | Web 軟體支持 |
---|---|
|
|
對於較老的瀏覽器,可使用 JavaScript 庫: https://github.com/douglascrockford/JSON-js
JSON 格式最初是由 Douglas Crockford 制定的。