什麼是 JSON ?

什麼是 JSON ?

  • JSON 指的是 JavaScript 對象表示法(JavaScript Object Notation)
  • JSON 是輕量級的文本數據交換格式
  • JSON 獨立於語言 
  • JSON 具備自我描述性,更易理解

* JSON 使用 JavaScript 語法來描述數據對象,可是 JSON 仍然獨立於語言和平臺。JSON 解析器和 JSON 庫支持許多不一樣的編程語言。javascript

JSON - 轉換爲 JavaScript 對象

JSON 文本格式在語法上與建立 JavaScript 對象的代碼相同。html

因爲這種類似性,無需解析器,JavaScript 程序可以使用內建的 eval() 函數,用 JSON 數據來生成原生的 JavaScript 對象。java

<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>

結果:

在 JavaScript 中建立 JSON 對象

Name: Bill Gates
Age: 56
Address: Fifth Avenue New York 666
Phone: 555 1234567
web

相似 XML

  • JSON 是純文本
  • JSON 具備「自我描述性」(人類可讀)
  • JSON 具備層級結構(值中存在值)
  • JSON 可經過 JavaScript 進行解析
  • JSON 數據可以使用 AJAX 進行傳輸

相比 XML 的不一樣之處

  • 沒有結束標籤
  • 更短
  • 讀寫的速度更快
  • 可以使用內建的 JavaScript eval() 方法進行解析
  • 使用數組
  • 不使用保留字
 

JSON 語法規則

JSON 語法是 JavaScript 對象表示法語法的子集。編程

  • 數據在名稱/值對中
  • 數據由逗號分隔
  • 花括號保存對象
  • 方括號保存數組

JSON 名稱/值對

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 文件

  • 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 對象:

例子

<html>
<body>
<h2>經過 JSON 字符串來建立對象</h3>
<p>
First Name: <span id="fname"></span><br /> 
Last Name: <span id="lname"></span><br /> 
</p> 
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';

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

document.getElementById("fname").innerHTML=obj.employees[1].firstName 
document.getElementById("lname").innerHTML=obj.employees[1].lastName 
</script>
</body>
</html>

結果:

經過 JSON 字符串來建立對象

First Name: George
Last Name: Bush

JSON 解析器

提示:eval() 函數可編譯並執行任何 JavaScript 代碼。這隱藏了一個潛在的安全問題。

使用 JSON 解析器將 JSON 轉換爲 JavaScript 對象是更安全的作法。JSON 解析器只能識別 JSON 文本,而不會編譯腳本。

在瀏覽器中,這提供了原生的 JSON 支持,並且 JSON 解析器的速度更快。

較新的瀏覽器和最新的 ECMAScript (JavaScript) 標準中均包含了原生的對 JSON 的支持。

<html>
<body>
<h2>經過 JSON 字符串來建立對象</h3>
<p>
First Name: <span id="fname"></span><br /> 
Last Name: <span id="lname"></span><br /> 
</p> 
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';

obj = JSON.parse(txt);

document.getElementById("fname").innerHTML=obj.employees[1].firstName 
document.getElementById("lname").innerHTML=obj.employees[1].lastName 
</script>
</body>
</html>

結果:

經過 JSON 字符串來建立對象

First Name: George
Last Name: Bush

相關文章
相關標籤/搜索