AJAX --- 1 认识URL form-serialize插件
AJAX 概念和 axios 使用
定义：AJAX是异步的 JavaScript 和XML。简单来说就是使用XMLHttpRequest 对象与服务器通信。他可以使用JSON、XML、HTML和text文本等格式发送和接收数据。
概念：AJAX是浏览器和服务器进行数据通信的技术
怎么用AJAX？
1. 先使用axios库，与服务器进行数据通信
基于 XMLHttpRequest 封装、代码简单、月下载量在 14 亿次
Vue、React 项目中都会用到 axios
2. 再学习 XMLHttpRequest 对象的使用，了解 AJAX 底层原理
axios使用
语法：
1. 引入 axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2. 使用axios函数
传入配置对象
再用.then 回调函数接受结果，并做后续处理
axios({
url: '目标资源地址'
}).then((result) => {
// 对服务器返回的数据进行处理
})认识 URL
概念：URL 就是统一资源定位符，简称网址，用于访问网络上的资源
http 协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式
URL 查询参数
定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
axios - 查询参数
语法：使用 axios 提供的params 选项
注意：axios 在运行时把参数名和值，会拼接到 url?参数名=值
axios({
url: '目标资源地址',
params: {
参数名: 值
}
}).then((result) => {
// 对服务器返回的数据进行处理
})案例_地区查询
常用请求方法和数据提交
axios请求配置以及错误处理
url：请求的URL网址
method：请求的方法，GET可以省略（不区分大小写）
data：提交数据
错误处理
语法：在 then 方法的后面，通过点语法调用 catch 方法，传入回调函数并定义形参
axios({
url: '目标资源地址',
method: '请求方法'
data: {
参数名: 值
}
}).then((result) => {
// 对服务器返回的数据进行处理
}).catch(error => {
// 处理错误
})处理：注册案例，重复注册时通过弹框提示用户错误原因
HTTP协议-报文
HTTP 协议：规定了浏览器发送及服务器返回内容的格式
请求报文：浏览器按照 HTTP 协议要求的格式，发送给服务器的内容
请求报文的格式
请求报文的组成部分有:
1. 请求行：请求方法，URL，协议
2. 请求头：以键值对的格式携带的附加信息，比如：Content-Type
3. 空行：分隔请求头，空行之后的是发送给服务器的资源
4. 请求体：发送的资源
HTTP 协议－响应报文
HTTP 协议：规定了浏览器发送及服务器返回内容的格式
响应报文：服务器按照 HTTP 协议要求的格式，返回给浏览器的内容
1. 响应行（状态行）：协议、HTTP 响应状态码、状态信息
2. 响应头：以键值对的格式携带的附加信息，比如：Content-Type
3. 空行：分隔响应头，空行之后的是服务器返回的资源
4. 响应体：返回的资源
HTTP 响应状态码
HTTP 响应状态码：用来表明请求是否成功完成
比如：404（服务器找不到资源）
接口文档
接口文档：描述接口的文章（后端工程师）
接口：使用 AJAX 和服务器通讯时，使用的 URL，请求方法，以及参数
案例 - 用户登录
form-serialize 插件
作用：快速收集表单元素的值
插件：使用form-serialize插件，收集用户名和密码