什么是钩子函数？
钩子: 顾名思义就是挂在你的身上, 你的所有动作都和它有关系。
钩子函数：其实就是 一件事情有一个整体的运行流程，正常咱们没有办法说当某一个流程发生或者结束做一件事情，因为没有办法把握到某一个流程的节点。可以把握到这个节点并执行一个函数。
一、全局的钩子函数
1. ajaxStart()
会在同一个作用域下多个 ajax 的时候, 第一个 ajax 之前开始的时候触发
如果有多个 ajax 他只触发一次
1)提前准备 钩子函数
$(window).ajaxStart(function () {
console.log('第一个请求要开始了')
})
2)发送一个请求
$.ajax({
url: './server/get.php',
data: { a: 100, b: 200 },
dataType: 'json',
success: function (res) {
console.log(res)
}
})
会在每次开头之前将全局钩子中的函数执行
2. ajaxSend()
每一个 ajax 再发送出去之前, 都会触发一下
xhr.send() 之前触发
1)提前准备 钩子函数
$(window).ajaxSend(function () {
console.log('有一个请求要发送出去了')
})
2)发送一个请求
$.ajax({
url: './server/get.php',
data: { a: 100, b: 200 },
dataType: 'json',
success: function (res) {
console.log(res)
}
})
会在每次 ajax 发送出去之前, 都会触发一下函数
3. ajaxSuccess()
每一个 ajax 再成功的时候触发
只要有一个 ajax 成功了就会触发
1)提前准备 钩子函数
$(window).ajaxSuccess(function () {
console.log('有一个请求成功了')
})
2)发送一个请求
$.ajax({
url: './server/get.php',
data: { a: 100, b: 200 },
dataType: 'json',
success: function (res) {
console.log(res)
}
})
会在每次ajax 成功的时候，都会触发一下函数
4. ajaxError()
每一个 ajax 再失败的时候触发
只要有一个 ajax 失败了就会触发
1)提前准备 钩子函数
$(window).ajaxError(function () {
console.log('有一个请求失败了')
})
2)发送一个请求
$.ajax({
url: './server/get.php',
data: { a: 100, b: 200 },
dataType: 'json',
success: function (res) {
console.log(res)
}
})
会在每次ajax 失败的时候，都会触发一下函数
5. ajaxComplete()
每一个 ajax 完成的时候触发
只要有一个 ajax 完成了, 不管成功还是失败, 都会触发
1)提前准备 钩子函数
$(window).ajaxComplete(function () {
不管成功还是失败, 只要完成了就触发
console.log('有一个请求完成了')
})
2)发送一个请求
$.ajax({
url: './server/get.php',
data: { a: 100, b: 200 },
dataType: 'json',
success: function (res) {
console.log(res)
}
})
会在每次ajax 请求完成的时候，都会触发一下函数（不管成功还是失败）
6. ajaxStop()
会在同一个作用域内多个 ajax 的时候, 最后一个 ajax 完成以后触发
如果有多个 ajax 它只触发一次
1)提前准备 钩子函数
$(window).ajaxStop(function () {
console.log('最后一个请求结束了')
})
2)发送一个请求
$.ajax({
url: './server/get.php',
data: { a: 100, b: 200 },
dataType: 'json',
success: function (res) {
console.log(res)
}
})
会在最后一次请求完成时再触发函数，和ajaxStart一样只触发一次
二、利用钩子函数做 登录过程中的loading 效果
业务逻辑
当点击 button 按钮的时候就会发送一个请求
每一个请求发送出去的时候就会触发 loading 效果, 图片显示出来
当请求完成对的时候, loading 效果消失, 图片再次隐藏起来
一定是 ajaxComplete(), 不管成功失败, 完成就触发
不能是 ajaxSuccess(), 只有成功会触发
简单的布局
<body>
<button>发送请求</button>
<img src="./loading.gif" alt="">
</body>
简单的jquery实现
<script src="./jquery/jquery.min.js"></script>
<script>
提前利用钩子函数准备 loading 效果
每一次发送出去的时候都要显示图片
$(window).ajaxSend(() => {
$('img').show()
})
每一次完成的时候都要图片再隐藏起来
$(window).ajaxComplete(() => {
$('img').hide()
})
每次点击按钮的时候都会发送一个 ajax 请求
$('button').click(() => {
$.ajax({
url: './server/get.php',
data: { a: 100, b: 200 },
dataType: 'json',
success: function (res) {
console.log('请求成功了')
console.log(res)
}
})
})
</script>
