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 使用步骤:
- 引入 axios 库
- 使用 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 - 请求配置
- url:请求的 URL 网址
- method:请求的方法,GET可以省略(不区分大小写)
- 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、接口文档
- 接口文档:描述接口的文章
- 接口:使用 AJAX 和服务器通讯时,使用的 URL,请求方法,以及参数
- 传送门: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 })