AJAX 01-入门

1.   什么是Ajax？

概念：Ajax是浏览器与服务器进行数据通信的技术

2.  怎么用Ajax？

1.  先使用 axios 库，与服务器进行数据通信

2.  再学习 XMLHttpRequest 对象的使用，了解 Ajax 底层原理

3. axios 的使用

1.  引入 axios 库

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. 使用 axios 函数

axios({
  url: ''
}).then(result => {
   // 对服务器返回的数据做后续处理
})

4. 认识 URL（统一资源定位符）

                                   

5. 查询参数

URL 查询参数

作用：浏览器提供给服务器的额外信息，获取对应的数据

http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

 axios 查询参数

axios({
  url: '',
  params:{
  // 参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

6. 常用请求方法

请求方法	操作
GET	获取数据（默认，可不写）
POST	提交数据
PUT	修改数据（全部）
DELETE	删除数据
PATCH	修改数据（部分）

axios 核心配置

method  请求方法         params 查询参数          data 提交数据

axios({
  url: '',
  params: {
    参数名: 值
  }
})

axios({
  url: '',
  method: 'post',
  data: {
    参数名: 值
  }
})

 7. axios 错误处理

axios({
  // 请求选项
}).then(result => {
  // 处理数据
}).catch(error => {
  // 处理错误
})

8. 请求报文

1. 浏览器发送给服务器的内容叫做请求报文

2. 请求报文由请求行、请求头、空行、请求体组成

9. 响应报文

组成：

响应行（状态行）：协议、HTTP响应状态码、状态信息

响应头

空行

响应体：返回的资源 

HTTP 响应状态码（用来表明请求是否成功完成）

状态码	说明
1xx	信息
2xx	成功
3xx	重定向信息
4xx	客户端错误
5xx	服务端错误

 10. 接口文档

接口文档：由后端提供的描述接口的文章

接口：使用 Ajax 和服务器通讯时，使用的 URL、请求方法、以及参数

11. form-serialize 插件

作用：快速收集表单的值

注意:   表单必须要求name值

1. 引入 js 文件

2. 使用 serialize 函数 

const form = document.querySelector('.login-form')
const data = serialize(form, { hash: true, empty: true })  // 对象