論壇 | 最新的Web開發教程
 

JSON教程

JSON:JavaScript對象符號。

JSON是用於存儲和交換數據的語法。

JSON是XML更容易使用的替代品。


下面的JSON示例定義一個員工對象,以3員工記錄的數組:

JSON實例

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

以下XML示例還限定一個員工3員工記錄對象:

XML實例

<employees>
    <employee>
        <firstName>John</firstName> <lastName>Doe</lastName>
    </employee>
    <employee>
        <firstName>Anna</firstName> <lastName>Smith</lastName>
    </employee>
    <employee>
        <firstName>Peter</firstName> <lastName>Jones</lastName>
    </employee>
</employees>

什麼是JSON?

  • JSON代表JavaScript對象符號
  • JSON是一種輕量級的數據交換格式
  • JSON是獨立的語言*
  • JSON是“自我描述”,容易理解

* JSON使用JavaScript語法,但JSON格式不僅是文字,就像XML。
文本可以讀取和用作以任何編程語言的數據格式。


JSON - 結果為JavaScript對象

JSON格式在語法上是相同的代碼創建JavaScript對象。

由於這種相似性,而不是使用一個解析器(如XML一樣),JavaScript程序可以使用標準的JavaScript函數來JSON數據轉換為原生的JavaScript對象。


試一試

隨著我們的編輯,您可以在線編輯JavaScript代碼並點擊一個按鈕來查看結果:

JSON實例

<!DOCTYPE html>
<html>
<body>

<h2>JSON Object Creation in JavaScript</h2>

<p id="demo"></p>

<script>
var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';

var obj = JSON.parse(text);

document.getElementById("demo").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
</script>

</body>
</html>
試一試»

就像XML因為

  • 這兩個JSON和XML是“自我描述”(人類可讀)
  • 這兩個JSON和XML(值中值)分級
  • 這兩個JSON和XML可以對其進行解析,並通過大量的編程語言使用
  • 這兩個JSON和XML可以用一個XMLHttpRequest可讀取

不像很多XML因為

  • JSON不使用結束標記
  • JSON是短
  • JSON是更快地讀取和寫入
  • JSON可以使用數組

最大的區別是:

XML必須用XML解析器解析。 JSON可以通過標準JavaScript功能進行解析。


為什麼JSON?

對於AJAX應用,JSON比XML更快,更容易:

使用XML

  • 取一個XML文檔
  • 通過文檔使用XML DOM循環
  • 提取值並存儲在變量

使用JSON

  • 取一個JSON字符串
  • JSON.Parse JSON字符串