> For the complete documentation index, see [llms.txt](https://docs.webmix.cc/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webmix.cc/javascript/ji-chu/3.18-data-format.md).

# 3.18 資料格式

無論是同個系統或是多個系統之間，互相傳遞資料時，最常用的兩種格式，即 **XML** 與 **JSON**。都是純文字格式。

* XML = e**X**tensible **M**arkup **L**anguage。HTML 就是 XML 的其中一種。
* JSON = **J**ava**S**cript **O**bject **N**otation。

## 範例假設

有一個產品，品牌名稱為 `the_brand`，型號為 `t-123`，價格為 `100000`。圖片路徑有 [`http://ex.com/a.png`、`http://ex.com/b.png`](http://ex.com/a.png、http://ex.com/b.png) 。

分別用 XML及 JSON 格式來表達：

### XML

就像寫 HTML 一樣，只是現在可自行定義標籤名稱：

```markup
<product>
  <brand>the_brand</brand>
  <model>t-123</model>
  <price>100000</price>
  <pictures>
    <source>http://ex.com/a.png</source>
    <source>http://ex.com/b.png</source>
  </pictures>
</product>
```

若想確認 XML 格式是否符合規範的話，可到 [XML Viewer](https://codebeautify.org/xmlviewer) 網站測試。如圖：

![](https://3126711450-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LokjetmQhrMQC7IVioJ%2F-MDFdSOAzWlfoUU_sl5k%2F-MDFf-xEtFA7qnaMF0dh%2Fxml_parse.png?alt=media\&token=8957fbb7-45b0-4199-bffe-56c064eb521a)

### JSON

物件及陣列兩種格式都屬於 JSON 格式：

```javascript
{
  "brand": "the_brand",
  "model": "t-123",
  "price": "100000",
  "pictures":["http://ex.com/a.png", "http://ex.com/b.png"]
}
```

若想確認 JSON 格式是否符合規範的話，可到 [JSON Parser](http://json.parser.online.fr/) 或 [這個網站](https://jsonformatter.org/json-parser)測試。如圖：

![](https://3126711450-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LokjetmQhrMQC7IVioJ%2F-MDFf2hbVbcS-cCNhtvf%2F-MDFfWFVrenRu3-LBucd%2Fjson_parser.png?alt=media\&token=b7143abf-d8cd-4b4f-b13d-d984417d5e53)

## 練習

寫一個 JSON 格式，敘述如下：

1、一個物件資料，有兩個 key，分別是 msg 與 data；

2、msg 的 value 部份，是一個字串，就叫「success」；

3、data 是一個陣列資料，裡面存著兩筆書本物件資料，該物件資料 key 的部份 有 `book_name` 與 `book_price`；值的部份，可任意填入。

試著用 [JSON Parser](http://json.parser.online.fr/) 工具驗證。