文章目錄
- 一、什麼是資料交換格式
- 二、XML
-
- 1. XML簡介
- 2. XML 與 HTML
- 3. XML缺點
- 4. XML DOM
- 三、JSON
-
- 1. JSON 簡介
- 2. JSON的兩種結構
- 3. JSON文法注意事項
- 4. JSON和JS對象
-
- ① 兩者關系
- ② 兩者互轉
-
- JSON序列化
- JSON反序列化
一、什麼是資料交換格式
資料交換格式，就是 伺服器端 與 用戶端 之間進行 資料傳輸與交換的格式。
前端領域，經常提及的兩種資料交換格式分别是
XML
和
JSON
，其中 JSON 格式較為常用。
二、XML
XML 教程 | 菜鳥教程 (runoob.com)
1. XML簡介
XML 的英文全稱是 EXtensible Markup Language，即 可擴充标記語言。是以，XML 和 HTML 類似，也是一種标記語言。
<students>
<student>
<sid>001</sid>
<name>張三</name>
</student>
<student>
<sid>002</sid>
<name>李四</name>
</student>
</students>
2. XML 與 HTML
XML 和 HTML 雖然都是标記語言，但是，它們兩者之間沒有任何的關系。
⚫ HTML 被設計用來描述網頁上的 内容，是網頁内容的載體
⚫ XML 被設計用來 傳輸和存儲資料，是資料的載體
3. XML缺點
- XML 格式臃腫，和資料無關的代碼多，體積大，傳輸效率低
- 在 Javascript 中解析 XML 比較麻煩
4. XML DOM
XML DOM 即 XML 文檔對象模型，是 w3c 組織定義的一套操作 XML 文檔對象的API。浏覽器會将 XML 文檔解析成文檔對象模型。
example
var xhr = new XMLHttpRequest();
xhr.open('get', '/xml');
xhr.send();
xhr.onload = function () {
// xhr.responseXML 擷取伺服器端傳回的xml資料
var xmlDocument = xhr.responseXML;
var title = xmlDocument.getElementsByTagName('title')[0].innerHTML;
console.log(title);//消息标題
}})
app.get('/xml', (req, res) => {
res.header('content-type', 'text/xml');
res.send('<message><title>消息标題</title><content>消息内容</content></message>')
});
三、JSON
JSON 教程 | 菜鳥教程 (runoob.com)
1. JSON 簡介
概念：JSON 的英文全稱是 JavaScript Object Notation，即“JavaScript 對象表示法”。簡單來講，
JSON 就是 Javascript 對象和數組的字元串表示法，它使用文本表示一個 JS 對象或數組的資訊，是以，JSON 的本質是字元串。
作用：JSON 是一種 輕量級的文本資料交換格式，在作用上類似于 XML，專門用于存儲和傳輸資料，但是 JSON 比 XML 更小、更快、更易解析
現狀：JSON 是在 2001 年開始被推廣和使用的資料格式，到現今為止，JSON 已經成為了主流的資料交換格式。
2. JSON的兩種結構
JSON 就是用字元串來表示 Javascript 的 對象 和 數組。是以，JSON 中包含對象和數組兩種結構，通過這兩種結構的 互相嵌套，可以表示各種複雜的資料結構。
對象結構：對象結構在 JSON 中表示為
{ }
括起來的内容。資料結構為
{ key: value, key: value, … }
的鍵值對結構。其中，key 必須是使用英文的雙引号包裹的字元串，value 的資料類型可以是數字、字元串、布爾值、null、數組、對象6種類型。
{
name: "zs",
'age': 20,
"gender": '男',
"address": undefined,
"hobby": ["吃飯", "睡覺", '打灰機']
say: function() {}
}
數組結構：數組結構在 JSON 中表示為
[ ]
括起來的内容。資料結構為
[ "java", "javascript", 30, true … ]
。數組中資料的類型可以是數字、字元串、布爾值、null、數組、對象6種類型。
[
"java",
100,
true,
null,
{"name": "zs", "age": 20},
[ "蘋果", "榴蓮", "椰子" ]
]
3. JSON文法注意事項
- 屬性名必須使用雙引号包裹
- 字元串類型的值必須使用雙引号包裹
- JSON 中不允許使用單引号表示字元串
- JSON 中不能寫注釋
- JSON 的最外層必須是對象或數組格式
- 不能使用 undefined 或函數作為 JSON 的值
4. JSON和JS對象
① 兩者關系
JSON 是 JS 對象的字元串表示法，它使用文本表示一個 JS 對象的資訊，本質是一個字元串。例如：
//這是一個對象
var obj = {a: 'Hello', b: 'World'}
//這是一個 JSON 字元串，本質是一個字元串
var json = '{"a": "Hello", "b": "World"}'
② 兩者互轉
JSON序列化
要實作從 JSON 字元串轉換為 JS 對象，使用
JSON.parse()
方法：
var obj = JSON.parse('{"a": "Hello", "b": "World"}')
//結果是 {a: 'Hello', b: 'World'}
把字元串轉換為資料對象的過程，叫做反序列化，
調用 JSON.parse() 函數的操作，叫做 JSON 反序列化。
JSON反序列化
要實作從 JS 對象轉換為 JSON 字元串，使用
JSON.stringify()
方法：
var json = JSON.stringify({a: 'Hello', b: 'World'})
//結果是 '{"a": "Hello", "b": "World"}'
把資料對象轉換為字元串的過程，叫做序列化，
調用 JSON.stringify() 函數的操作，叫做 JSON 序列化