AJAX之基础知识

AJAX入门及axios使用

什么是AJAX

AJAX是异步的JavaScript和XML。简单说是使用XMLHttpRequest对象与服务器通信，是浏览器与服务器进行数据通信的技术

怎么用AJAX

语法：

1. 引入axios.js(axios库)：http://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=值&参数名2=值
即在资源路径后面加?再写参数名=值

查询参数

URL查询参数

浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法：http://xxxx.com/xxx/xxx?参数名1=值&参数名2=值
即在资源路径后面加?再写参数名=值

axios查询参数

语法：使用axios提供的params选项
注意：axios在运行时把参数名和值拼接到url后面

axios({
    url:'目标资源地址',
    params:{
        参数名:值
    }
})

常用请求方法

请求方法：对服务器资源，要执行的操作，默认为’get’

axios请求配置

url：请求的URL地址
params：查询参数
method：请求的方法，GET可以省略（不区分大小写）
data：提交数据

axios({
    url:'目标资源地址',
    method:'请求方法',
    data:{
        参数名:值
    }
}).then((result) => {
    <!-- 对服务器返回的数据做后续处理 -->
})

axios错误处理

在.then方法的后面，通过点语法调用catch方法，传入回调函数，顶顶一形参
语法：

axios({
    url:'目标资源地址'
}).then((result) => {
    <!-- 对服务器返回的数据做后续处理 -->
}).catch(error => {
    <!-- 处理错误 -->
})

HTTP协议

规定了浏览器发送和服务器返内容的格式

请求报文

浏览器按照HTTP协议要求的格式发送给服务器的内容
查看步骤：检查-网络-标头-请求标头
请求报文组成部分：

1. 请求行：请求方法，URL，协议
2. 请求头：以键值对形式携带的附加信息
3. 空行：分割请求头，空行之后的是发送给服务器的资源
4. 请求体：发送的资源
   eg：

请求报文-错误排查

检查-网络-负载

响应报文

服务器按照HTTP协议要求的格式返回给浏览器的内容
查看步骤：检查-网络-标头-响应标头
响应体：检查-网络-标头-响应
响应报文组成部分

1. 响应行：协议，HTTP响应状态码，状态信息
2. 响应头：以键值对形式携带的附加信息
3. 空行：分割请求头，空行之后的是服务器返回的资源
4. 响应体：返回的资源
   

HTTP响应状态码

用来表明请求是否成功完成，eg：404表示服务器找不到资源
1xx 信息
2xx 成功
3xx 重定向信息
4xx 客户端错误
5xx 服务端错误

form-serialize插件

快速收集表单元素的值
语法：

<!-- 先引入插件 -->
<script src=""></script>
<!-- 再获取表单 -->
const form = document.querySelector('.example-form)
<!-- 再传入参数 -->
const data = serialize(form, { hash:true, empty:true})

参数：

1. 第一个：需要获取的表单
   表单元素设置name属性，值会作为对象的属性名
   建议name属性的值最好与接口文档参数名一致
2. 第二个：配置对象
   hash：设置获取数据结构
   • true：获取的是JS对象（推荐）一般请求体里面提交给服务器
   • false：获取的是查询字符串
     empty：设置是否获取空值
   • true：获取空值（推荐）数据结构与标签结构一致
   • false：不获取空值