AJAX概念
AJAX是异步的JavaScript和XML(Asynchronous JavaScript And XML)。
简单点说,就是使用XMLHttpRequest
对象与服务器通信。
它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。
AJAX最吸引人的就是它的"异步"特性,也就是说它可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。
AJAX 是浏览器与服务器进行数据通信的技术
使用AJAX:使用axios库与服务器进行数据通信
axios使用
axios基于 XMLHttpRequest 封装、代码简单
基本使用
-
引入 axios.js:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
-
使用 axios 函数
- 传入配置对象
- 再用 .then 回调函数接收结果,并做后续处理
javascriptaxios({ url:'目标资源地址' }).then((result)=>{ //对服务器返回的数据做后续处理 })
url
统一资源定位符,简称网址
组成:协议+域名+资源路径
查询参数
url查询参数:
接在资源路径后用问号?
隔开,参数之间用&
连接
示例:http://xxx.com/xxx/xxx?参数1=值1&参数值2=值2
axios查询参数:
使用 axios 提供的 params 选项
axios 在运行时把参数名和值,会拼接到 url?参数名=值
javascript
axios({
url:'目标资源地址',
params:{
参数名:值
}
}).then((result)=>{
//对服务器返回的数据做后续处理
})
请求方法
请求方法:对服务器资源,要执行的操作
常用请求方法:
请求方法 | 操作 |
---|---|
GET | 获取数据 |
POST | 数据提交 |
PUT | 修改数据(全部) |
DELETE | 删除数据 |
PATCH | 修改数据(部分) |
javascript
axios({
url:'目标资源地址',
method:'请求方法' //小写,可省略
}).then((result)=>{
//对服务器返回的数据做后续处理
})
数据提交
使用data选项将数据传给服务端
javascript
axios({
url:'目标资源地址',
method:'请求方法',
data:{
参数名:值
}
}).then((result)=>{
//对服务器返回的数据做后续处理
})
axios错误处理
语法:在 then 方法的后面,通过点语法调用 catch 方法,传入回调函数并定义形参
javascript
axios({
//请求选项
}).then(result=>{
//处理数据
}).catch(error=>{
//处理错误
})
Http协议
HTTP 协议:规定了浏览器发送及服务器返回内容的格式
请求报文:浏览器按照 HTTP 协议要求的格式,发送给服务器的内容
- 请求行:请求方法,URL,协议
- 请求头:以键值对的格式携带的附加信息,比如:Content-Type
- 空行:分隔请求头,空行之后的是发送给服务器的资源
- 请求体:发送的资源
响应报文:服务器按照 HTTP 协议要求的格式,返回给浏览器的内容
- 响应行(状态行):协议、HTTP 响应状态码、状态信息
- 响应头:以键值对的格式携带的附加信息,比如:Content-Type
- 空行:分隔响应头,空行之后的是服务器返回的资源
- 响应体:返回的资源
HTTP响应状态码:用来表明请求是否成功完成
状态码 | 说明 |
---|---|
1xx | 信息 |
2xx | 成功 |
3xx | 重定向消息 |
4xx | 客户端错误 |
5xx | 服务端错误 |