01-AJAX

目录

一、AJAX入门

AJAX的用处

怎么学AJAX

使用axios

二、URL

是什么？

组成的3个重要部分

三、URL查询参数

语法：

axios 如何携带查询参数?

四、数据提交

axios 如何提交数据到服务器呢？

五、axios错误处理

六、HTTP协议——请求报文

1. 组成

2.可以 通过 Chrome 的网络面板查看请求体

3.请求报文可以用来辅助错误排查

七、HTTP协议——响应报文

1.组成

2.http响应状态码

八、接口文档

九、form-serialize插件

十、其他：

---

一、AJAX入门

AJAX的用处

浏览器和服务器之间通信，动态数据交互。

怎么学AJAX

• 这里使用一个第三方库叫 axios, 后续在学习 XMLHttpRequest 对象了解 AJAX 底层原理

• 因为 axios 库语法简单，让我们有更多精力关注在与服务器通信上，而且后续 Vue，React 学习中，也使用 axios 库与服务器通信

使用axios

axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

1. 引入axios库

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

2. 使用axios函数

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

二、URL

是什么？

统一资源定位符，网址，用于访问服务器上资源

组成的3个重要部分

协议、域名、资源路径

三、URL查询参数

语法

在 url 网址后面用?拼接。格式：

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

axios 如何携带查询参数?

使用params选项即可

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

四、数据提交

axios 如何提交数据到服务器呢？

提交数据需要使用‘POST’请求方法；

需要使用method 和 data 这两个选项。

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

五、axios错误处理

axios的catch方法

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

六、HTTP协议——请求报文

1. 组成

• 请求行：请求方法，URL，协议

• 请求头：以键值对的格式携带的附加信息，比如：Content-Type（指定了本次传递的内容类型）

• 空行：分割请求头，空行之后的是发送给服务器的资源

• 请求体：发送的资源

2.可以 通过 Chrome 的网络面板查看请求体

3.请求报文可以用来辅助错误排查

七、HTTP协议——响应报文

1.组成

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

• 响应头：以键值对的格式携带的附加信息，比如：Content-Type（告诉浏览器，本次返回的内容类型）

• 空行：分割响应头，控制之后的是服务器返回的资源

• 响应体：返回的资源

2.http响应状态码

用来表明请求是否成功

• 1xx 信息
• 2xx 成功
• 3xx 重定向信息
• 4xx 客户端错误
• 5xx 服务端错误

八、接口文档

1. 接口文档：描述接口的文章（一般是后端工程师，编写和提供）

2. 接口：指的使用 AJAX 和 服务器通讯时，使用的 URL，请求方法，以及参数，例如：AJAX阶段接口文档

九、form-serialize插件

使用 form-serialize 插件，快速收集目标表单范围内表单元素的值

1.引入插件

2.获取表单元素（传参用）

3.使用serialize函数，传入form表单和配置对象

（hash 决定是收集为 JS 对象还是查询参数字符串，empty 决定是否收集空值）

const data = serialize(form, { hash: true, empty: true })
//data的数据： {username: 'itheima007', password: '7654321'}

十、其他：

ES6 对象属性和值简写的前提是什么？

答：属性名和value位置变量名同名