文章目录
一、一般请求和ajax请求
- 一般请求:通过httpRequest向请求服务器接受请求返数据,在浏览器中地址栏输入后回车的都是普通请求。
ajax
请求:Ajax 即Asynchronous Javascript And XML
(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
两者之间的区别:
1. ajax
请求是一种特别的异步http
请求
2. 对服务器端来说, 没有任何区别, 区别在浏览器端
3. 浏览器端发请求: 只有XHR
或fetch
(现在几乎不用了)发出的才是ajax请求, 其它所有的都是非ajax请求
浏览器端接收到响应后的行为:
- 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的自动刷新/跳转页面
ajax
请求: 浏览器不会对页面进行自动更新显示操作,页面不会有任何变化,只是调用监视的回调函数传入响应的相关数据,如果需要更新显示页面元素数据,需要自己在程序中手动去获取元素进行更新,当然如果是使用vue
的话就不需要获取dom
元素了,只需要设置对应的变量值为返回的数据就可以了
1、ajax请求的优势和劣势:
(1)优点:
- 不需要插件的⽀持,原⽣ js 就可以使⽤
- 户体验好(不需要刷新⻚⾯就可以更新数据)
- 减轻服务端和带宽的负担
(1)缺点:
- 搜索引擎的⽀持度不够,因为数据都不在⻚⾯上,搜索引擎搜索不到
2、ajax请求的请求过程和工作原理:
请求过程:
后端响应:
- 首先通过PHP页面将数据库中的数据取出
- 取出后转成
json
格式(前后端交互主流数据格式)的字符串,后利用ajax
把字符串返还给前台 - 再利用
json.parse
解析通过循环添加到页面上
前端请求:
4. 前端的数据利用ajax
提交到后台
5. 但是后台是没有办法直接把这些数据插入到数据库中,所以要先提交到PHP页面上
6. 最后再由PHP将数据插入到数据库中
注意:
如果是异步ajax(默认是异步)请求,过程是先接收服务器传回的数据,再发HTTP请求(open(),send()
),需要用存储函数onreadystatechange
,每当 readyState
属性改变时就会调用该函数,相当于一直监听服务器传回的数据 ;而同步的Ajax请求则相反,因为是阻塞的,所以不用实时监听。
工作原理:
3、常见四种请求方式:
4、详解GET请求和POST请求参数类型和数据格式:
-
GET请求:参数携带于请求头,参数形式有
querry
和params
querry
格式例下:
-
POST请求:使用POST,请求体传参需要申明请求头用来指明传参格式,且服务器端收到POST请求需要中间件解析请求体内容
二、ajax和xhr你需要知道的
xhr可不是小黄人哦!
1、XHR是ajax的基础
XHR
:浏览器的API
,它负责后台和服务器之间交换数据,允许了一次加载部分内容。如果浏览器不通过XHR
直接向服务器提出请求,那么所有内容就会一次加载完成。
2、手写ajax
function get() {
var xhr = new XMLHttpRequest()
// open后面有三个参数:
// 规定请求的类型、URL 以及是否异步处理请求。
// method:请求的类型;GET 或 POST
// url:文件在服务器上的位置
// async:true(异步)或 false(同步) 默认为true
xhr.open('get', '/getTest?name=niuma&age=20')
// 发送请求到后端(服务器)
xhr.send()
// 当请求被发送到服务器时,我们需要执行一些基于响应的任务。
// 每当 readyState 改变时,就会触发 onreadystatechange 事件。
// readyState 属性存有 XMLHttpRequest 的状态信息,4代表已经接收到全部响应数据
// 在xhr的准备状态发生改变的时候,调用该方法
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText)
}
}
}
function post() {
var xhr = new XMLHttpRequest()
// post 请求方式,接口后面不能追加参数
xhr.open('post', '/postTest')
// 如果使用post 请求方式, 而且是以key=value 这种形式提交的
// 那么需要设置请求头的类型
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send('num=1&des=我爱你')
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText)
}
}
}
3、番外之readyState的五个值:
XHR
对象的readyState
属性对应有五个值,它们的含义如下:
0:未初始化。尚未调用open()
方法
1:启动。已经调用open()
方法,但是还没有调用send()
方法
2:发送。已经调用send()
方法,但是还没有接收响应
3:接收。已经接收到部分数据
4:完成。已经接收到全部响应数据,并且可以在客户端使用了
三、axios的理解和使用
1、 axios是什么?
前端最流行的ajax请求库
为什么要用?
react/vue
官方都推荐使用axios
发ajax
请求,两个最6的前端框架都推荐使用,你敢不学?
官方文档: https://github.com/axios/axios
2、 axios特点
- 基本
promise
的异步ajax
请求库 - 浏览器端/node端都可以使用
- 支持请求/响应拦截器
- 支持请求取消
- 请求/响应数据转换
- 批量发送多个请求
3、使用axios发ajax请求
- GET请求: 从服务器端获取数据
function testGet() {
axios({
url: 'http://localhost:3000/posts',
// url: 'http://localhost:3000/posts2',
method: 'GET',
//注意这里的params代表参数的意思,并不是代表params参数,实则querry参数
params: {
id: 1,
xxx: 'abc'
}
}).then(
response => {
console.log(response.data, response.status, response.statusText)
},
error => {
alert(error.message)
}
)
}
- POST请求: 服务器端保存数据
function testPost() {
axios({
url: 'http://localhost:3000/posts',
method: 'POST',
data: {
"title": "json-server---",
"author": "typicode---"
}
}).then(
response => {
console.log(response.data)
},
error => {
alert(error.message)
}
)
}
- PUT请求: 服务器端更新数据
function testPut() {
axios({
url: 'http://localhost:3000/posts/1',
method: 'put',
data: {
"title": "json-server+++",
"author": "typicode+++"
}
}).then(
response => {
console.log(response.data)
},
error => {
alert(error.message)
}
)
}
- DELETE请求: 服务器端删除数据
function testDelete() {
axios({
url: 'http://localhost:3000/posts/6',
method: 'delete'
}).then(
response => {
console.log(response.data)
},
error => {
alert(error.message)
}
)
}
四、axios常用API
axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定url发get请求
axios.request(config): 等同于axios(config)
axios.get(url[, config]): 发get请求
axios.delete(url[, config]): 发delete请求
axios.post(url[, data, config]): 发post请求
axios.put(url[, data, config]): 发put请求
axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]): 创建一个新的axios(但它没有下面的功能)
axios.CancelToken(): 用于创建取消请求的token对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
1、axios.create(config)
- 根据指定配置创建一个新的
axios
, 也就就每个新axios
都有自己的配置 - 新
axios
只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的 - 为什么要设计这个语法?
(1) 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
(2) 解决: 创建2个新axios
, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中
2、拦截器函数/ajax请求/请求的回调函数的调用顺序
说明: 调用axios()
并不是立即发送ajax
请求, 而是需要经历一个较长的流程
流程: 请求拦截器=> 发ajax请求 => 响应拦截器 =>请求的回调
3、 取消请求
- 基本流程
① 配置cancelToken
对象
② 缓存用于取消请求的cancel
函数
③ 在后面特定时机调用cancel
函数取消请求
④ 在错误回调中判断如果error
是cancel
, 做相应处理 - 实现功能
点击按钮, 取消某个正在请求中的请求
在请求一个接口前, 取消前面一个未完成的请求