10分钟带你快速学会Ajax

学习前言

Ajax是学完前端三件套之后的必学知识，主要用于浏览器和服务器之间通信，动态数据交互 本文用最通俗易懂的语言带你快速入门Ajax和HTTP相关知识

---

一、AJAX 概念和 axios库的使用

1.什么是 AJAX ?

mdn官方文档

• 使用浏览器的 XMLHttpRequest对象 与服务器通信

• 浏览器网页中，使用 AJAX技术（XHR对象）发起获取数据的请求，服务器代码响应准备好的数据给前端，前端拿到数据数组以后，展示到网页
  

2. 什么是服务器？

• 可以暂时理解为提供数据的一台电脑

3. 为何学 AJAX ?

• 以前我们的数据都是写在代码里固定的, 无法随时变化
• 现在我们的数据可以从服务器上进行获取，让数据变活

4. 怎么学 AJAX ?

• 这里使用一个第三方库叫 axios, 后续在学习 XMLHttpRequest 对象了解 AJAX底层原理
• axios库语法较为简单，而且后续 Vue，React 学习中，也使用 axios库与服务器通信

5. 引入 axios.js 文件

 > axios.js文件链接: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

6.axios函数的使用语法

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

 > 注意：请求的 url 地址, 就是标记资源的网址

---

二、URL 的组成和作用

1. 为什么要认识 URL ?

mdn官方文档

• 虽然是后端给我的一个地址，但是哪部分标记的是服务器电脑，哪部分标记的是资源呢？所以为了和服务器有效沟通我们要认识一下

2. 什么是 URL ？

*统一资源定位符，简称网址，用于定位网络中的资源（资源指的是：网页，图片，数据，视频，音频等等）

3. URL 的组成?

• 协议，域名，资源路径（URL 组成有很多，主要先掌握这3个重要部分即可）

---

三、URL 查询参数

1.什么是查询参数 ?

• 携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据

• 举例：查询河北省下属的城市列表，需要先把河北省传递给服务器

2. 查询参数的语法

• 在 url 网址后面用?拼接格式：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
• 参数名一般是后端规定的，值前端看情况传递即可

3. axios 携带查询参数

• 使用 params选项,携带参数名和值在对象结构中

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

---

四、常用请求方法和数据提交

1.什么是请求方法?

• 请求方法是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作

• 
  

• 我们通常获取数据其实用的就是GET请求方法，但是axios内部设置了默认请求方法就是GET，就不用书写

• 但是提交数据需要使用POST请求方法

2.什么时候进行数据提交？

• 例如：多端要查看同一份订单数据，或者使用同一个账号进行登录，那订单 / 用户名+密码，就需要保存在服务器上，随时随地进行访问

  
  

3.axios 提交数据到服务器

• 需要用到method和 data这2个新选项

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

4.axios 的核心配置项

• url：目标资源地址，method：请求方法，params：查询参数，data：提交的数据

---

五、axios 错误处理

以注册案例为例子，如果注册相同的用户名，则会遇到注册失败的请求，也就是 axios请求响应失败了，你会在控制台看到如图的错误：

1. 处理原因

• 因为，普通用户不会去控制台里看错误信息，我们要编写代码拿到错误并展示给用户在页面上

2. 使用 axios 的 catch 方法

捕获这次请求响应的错误并做后续处理，语法如下：

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

---

六、HTTP 协议-请求报文

1. 首先，HTTP 协议规定了浏览器和服务器返回内容的格式

2. 请求报文：是浏览器按照协议规定发送给服务器的内容，例如注册用户时，发起的请求报文：
   
   这里的格式包含：

• 请求行：请求方法，URL，协议
• 请求头：以键值对的格式携带的附加信息，比如：Content-Type（指定了本次传递的内容类型）
• 空行：分割请求头，空行之后的是发送给服务器的资源
• 请求体：发送的资源

3.通过 Chrome的网络面板如何查看请求体？

七、HTTP 协议-响应报文

1.响应报文：是服务器按照协议固定的格式，返回给浏览器的内容


2. 响应报文的组成：

• 响应行（状态行）：协议，HTTP响应状态码，状态信息
  *响应头：以键值对的格式携带的附加信息，比如：Content-Type（告诉浏览器，本次返回的内容类型）
• 空行：分割响应头，控制之后的是服务器返回的资源
• 响应体：返回的资源

3. HTTP 响应状态码：

   • 用来表明请求是否成功完成

   • 例如：404（客户端要找的资源，在服务器上不存在）

   •