XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言。因此，XML 和 HTML 类似，也是一种标记语言。但是，它们两者之间没有任何的关系；
😆XML和HTML的区别😆：
-
HTML被设计用来描述网页上的内容，是网页内容的载体； -
XML被设计用来传输和存储数据，是数据的载体；
😆XML的缺点😆：
-
XML格式臃肿，和数据无关的代码多，体积大，传输效率低； -
在 Javascript 中解析 XML 比较麻烦；
2.3 JSON
2.3.1 什么是JSON
1️⃣ 概念：JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。简单来讲，JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，因此，JSON 的本质是字符串；
2️⃣ 作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析；
3️⃣ 现状：JSON 是在 2001 年开始被推广和使用的数据格式，到现今为止，JSON 已经成为了主流的数据交换格式；
2.3.2 JSON的两种结构
JSON 就是用字符串来表示 Javascript 的对象和数组。所以，JSON 中包含对象和数组两种结构，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构；
1️⃣ 对象结构：对象结构在 JSON 中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型；
代码演示如下：
{
"name": "zs",
"age": 20,
"gender": "男",
"address": null,
"hobby": ["吃饭", "睡觉", "写博客"]
}
2️⃣ 数组结构：数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ “java”, “javascript”, 30, true … ] 。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型；
代码演示如下：
[ "java", "python", "php" ]
[ 100, 200, 300.5 ]
[ true, false, null ]
[ { "name": "zs", "age": 20}, { "name": "ls", "age": 30} ]
[ [ "苹果", "榴莲", "椰子" ], [ 4, 50, 5 ] ]
2.3.3 JSON语法注意事项
-
属性名必须使用双引号包裹；
-
字符串类型的值必须使用双引号包裹；
-
JSON 中不允许使用单引号表示字符串；
-
JSON 中不能写注释；
-
JSON 的最外层必须是对象或数组格式；
-
不能使用 undefined 或函数作为 JSON 的值；
JSON 的作用：在计算机与网络之间存储和传输数据；
JSON 的本质：用字符串来表示 Javascript 对象数据或数组数据；
2.3.4 JSON和JS对象的关系
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串；
代码演示如下：
//这是一个对象
var obj = {a: 'Hello', b: 'World'}
//这是一个 JSON 字符串，本质是一个字符串
var json = '{"a": "Hello", "b": "World"}'
2.3.5 JSON和JS对象的互转
1️⃣ 要实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法：
var obj = JSON.parse('{"a": "Hello", "b": "World"}')
//结果是 {a: 'Hello', b: 'World'}
2️⃣ 要实现从 JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法：
var json = JSON.stringify({a: 'Hello', b: 'World'});
//结果是 '{"a": "Hello", "b": "World"}'
2.3.6 序列化和反序列化
1️⃣ 把数据对象转换为字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化；
2️⃣ 把字符串转换为数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化；
（3）XMLHttpRequest Level2的新特性
3.1 认识XMLHttpRequest Level2
😆旧版XMLHttpRequest的缺点😆：
-
只支持文本数据的传输，无法用来读取和上传文件；
-
传送和接收数据时，没有进度信息，只能提示有没有完成；
😆XMLHttpRequest Level2的新功能😆：
-
可以设置 HTTP 请求的时限；
-
可以使用 FormData 对象管理表单数据；
-
可以上传文件；
-
可以获得数据传输的进度信息；
3.2 设置HTTP请求时限
有时，Ajax 操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的 XMLHttpRequest 对象，增加了 timeout 属性，可以设置 HTTP 请求的时限：
xhr.timeout = 3000;
上面的语句，将最长等待时间设为 3000 毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个 timeout 事件，用来指定回调函数：
xhr.ontimeout = function(event){
alert('请求超时啦！')
}
代码演示如下：
3.3 FormData对象管理表单数据
1️⃣ Ajax 操作往往用来提交表单数据。为了方便表单处理，HTML5 新增了一个 FormData 对象，可以模拟表单操作；
代码演示如下：
2️⃣ FormData对象也可以用来获取网页表单的值，代码演示如下：：
提交
4.4 代码演示：上传文件
新版 XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件；
实现步骤：
-
定义 UI 结构；
-
验证是否选择了文件；
-
向 FormData 中追加文件；
-
使用 xhr 发起上传文件的请求；
-
监听
onreadystatechange事件；
完整代码演示如下：
Document上传文件
4.5 代码演示：显示文件上传进度
新版本的 XMLHttpRequest 对象中，可以通过监听 xhr.upload.onprogress 事件，来获取到文件的上传进度；
完整代码演示如下：
Document上传文件
（4）jQuery高级用法
4.1 jQuery实现文件上传
完整代码演示如下：
Document上传文件
（5）axios
5.1 什么是axios
1️⃣ Axios 是专注于网络数据请求的库；
2️⃣ 相比于原生的 XMLHttpRequest 对象，axios 简单易用；
3️⃣ 相比于 jQuery，axios 更加轻量化，只专注于网络数据请求；
5.2 axios发起GET请求
axios 发起 get 请求的语法：
axios.get('url', { params: { /参数/ } }).then(callback)
5.3 axios发起POST请求
axios 发起 post 请求的语法：
axios.post('url', { /参数/ }).then(callback)
5.4 直接使用axios发起请求
axios 也提供了类似于 jQuery 中 $.ajax() 的函数，语法演示如下：
axios({
method: '请求类型',
url: '请求的URL地址',
data: { /* POST数据 */ },
params: { /* GET参数 */ }
}) .then(callback)
5.5 完整代码演示
Document发起GET请求
发起POST请求
直接使用axios发起GET请求
直接使用axios发起POST请求
总结
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。
这里分享一些前端学习笔记：
-
html5 / css3 学习笔记
-
JavaScript 学习笔记
-
Vue 学习笔记
