什么是 AJAX?

1、AJAX：定义

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

AJAX 的使用： 

1. 先使用 axios [æk‘sioʊs]  库， 与服务器进行数据通信

•  基于 XMLHttpRequest 封装、代码简单、月下载量在 14 亿次
•  Vue、React 项目中都会用到 axios

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

 3.语法： 

1. 引入 axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2. 使用 axios 函数
✓ 传入配置对象
✓ 再用 .then 回调函数接收结果，并做后续处理

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

例：

需求：请求目标资源地址，拿到省份列表数据，显示到页面
目标资源地址：https://www.baidu.com/index.html

axios({
  url:'https://www.baidu.com/index.html'
}).then((result) => {
   //对服务器返回数据做后续处理
})

 axios 使用步骤：

1.  引入 axios 库
2.  使用 axios 语法

2、URL:

定义： 

 概念：URL 就是统一资源定位符，简称网址，用于访问网络上的资源

组成： 

•  https:// www.baidu.com/index.html
•   协议:// 域名/资源路径 

3、URL 查询参数  

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据 

语法：

3.1、axios－查询参数 

语法：使用 axios 提供的 params 选项 

注意：axios 在运行时把参数名和值，会拼接到 url?参数名=值

城市列表： http://hmajax.itheima.net/api/city?pname=河北省

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

axios({
  url:'http://hmajax.itheima.net/api/city',
  params:{
    pname:'河北省'
}
}).then(result =>{
   //对服务器返回的数据做后续处理
})

注意：使用 params 选项，携带参数名和值 

 3.2、axios - 请求配置

1. url：请求的 URL 网址
2. method：请求的方法，GET可以省略（不区分大小写）
3. data：提交数据

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

 常用请求方法 

 请求方法：对服务器资源，要执行的操作

 例：数据提交－注册账号

需求：通过 axios 提交用户名和密码，完成注册功能
注册用户 URL 地址：http://hmajax.itheima.net/api/register
请求方法：POST
参数名：
username 用户名（中英文和数字组成，最少 8 位）
password 密码（最少 6 位）

axios({
  url: 'http://hmajax.itheima.net/api/register',
  method: 'post'
  data: {
   username: 'itheima007',
   password: '7654321'
}
})

 注意：

1. 请求方法表明对服务器资源的操作，最为常用的2个是：

• POST 提交数据
• GET 查询数据 

2. axios 的核心配置： 

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

axios({
  url:'目标资源地址',
  method:'get', //通常可省略
  params:{
     参数名：值
   }
})

axios({
  url:'目标资源地址',
  method:'post', //不可省略，不区分大小写
  params:{
     参数名：值
   }
})

 3.3、axios - 错误处理：

 场景：再次注册相同的账号，会遇到报错信息
 处理：用更直观的方式，给普通用户展示错误信息

语法： 

 在 then 方法的后面，通过点语法调用 catch 方法，传入回调函数并定义形参

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

 处理：注册案例，重复注册时通过弹框提示用户错误原因

4、HTTP 协议-报文 

4.1.1、HTTP 协议－请求报文 

HTTP 协议：规定了浏览器发送及服务器返回内容的格式
请求报文：浏览器按照 HTTP 协议要求的格式，发送给服务器的内容  

4.1.2、请求报文的格式  

请求报文的组成部分有:
1. 请求行：请求方法，URL，协议
2. 请求头：以键值对的格式携带的附加信息，比如：Content-Type
3. 空行：分隔请求头，空行之后的是发送给服务器的资源
4. 请求体：发送的资源 

通过 Chrome 的网络面板查看请求报文 

4.2.1、HTTP 协议－响应报文 

4.2.2、HTTP 协议：规定了浏览器发送及服务器返回内容的格式
响应报文(通过响应报文排查错误原因)：服务器按照 HTTP 协议要求的格式，返回给浏览器的内容
1. 响应行（状态行）：协议、HTTP 响应状态码、状态信息
2. 响应头：以键值对的格式携带的附加信息，比如：Content-Type
3. 空行：分隔响应头，空行之后的是服务器返回的资源
4. 响应体：返回的资源 

4.2.3、HTTP 响应状态码 

HTTP 响应状态码：用来表明请求是否成功完成
比如：404（服务器找不到资源） 

5、接口文档  

1. 接口文档：描述接口的文章
2. 接口：使用 AJAX 和服务器通讯时，使用的 URL，请求方法，以及参数
3. 传送门：AJAX 阶段接口文档 

axios({
  url:'http://hmajax.itheima.net/api/city',
  method: 'get',
  params:{
    pname：'辽宁省'
   }
})

• 由后端提供的描述接口的文章:

6、小技巧: form-serialize 插件 

作用：快速收集表单元素的值 

语法： 

const form = document.queryselector('.example-form')
const data = serialize(form, { hash: true，empty: true })