jQuery的ajax全局钩子函数

一.定义

<script src="./jquery.min.js"></script>
<script>
    jQuery的 ajax 全局钩子函数
    所谓的钩子函数 , 是和 某个程序绑定的函数
    当这个程序执行到不同阶段,不同步骤时,执行不同的函数程序

    当前的 ajax 钩子函数,就是和 ajax程序绑定的函数
    根据的是 ajax的 不同步骤,来执行不同的函数

    ajax的基本步骤
    1, 声明定义一个ajax对象
    2, 定义 open()
    3, 定义 send()
    4, 接收响应体内容

    钩子函数

    钩子函数必须和 jquery 的 ajax请求语法形式绑定
    如果你写原生 js ajax请求,是无效的

    1, $(window).ajaxStart()
            在 ajax 开始之前 触发
            如果一个作用域下,有多个人ajax,只会在第一个 ajax 请求之前触发
            有多个ajax,也只触发一次
    2, $(window).ajaxSend()
            在 ajax 发送之前,会触发
            有几次send,就会触发几次
    3, $(window).ajaxSuccess()
            在 ajax 请求成功时会触发
            有几次请求成功,就触发几次
    4. $(window).ajaxError()
            在 ajax 请求失败时会触发
            有几次请求失败,就触发几次
    5. $(window).ajaxComplete()
            在 ajax 请求完成时会触发
            有几次请求完成,就触发几次
    6. $(window).ajaxStop()
            在 ajax 所有的请求完成时会触发
            多次请求结束,只有最后一次会触发

    先定义钩子函数,再定义ajax请求

</script>

二.demo1

console输出

html

<script src="./jquery.min.js"></script>
<script>
    // 1,定义 钩子函数

    // 在请求,开始时会触发
    // 多个请求,只会触发一次
    $(window).ajaxStart(()=>{
        console.log('第一个请求就要开始了');
    })

    // 在发送请求时会触发
    // 多个请求,会触发多次
    $(window).ajaxSend( function(){
        console.log('发送了一个请求');
    } )

    // 在请求成功时,会触发
    // 多个请求成功,会触发多次
    $(window).ajaxSuccess(()=>{
        console.log('有一个请求成功了')
    })

    // 在请求失败时,会触发
    // 多个请求成功,会触发多次
    $(window).ajaxError(()=>{
        console.log('有一个失败成功了')
    })

    // 在请求结束时,会触发
    // 多个请求结束,会触发多次
    $(window).ajaxComplete(()=>{
        console.log('有一个请求结束了')
    })


    // 在所有请求结束时,会触发
    // 只会触发一次
    $(window).ajaxStop(()=>{
        console.log('所有请求都结束了')
    })


    // 2,定义 ajax 请求
    
    // 定义ajax请求

    // 原生js语法形式
    // 钩子函数必须和 jquery 的 ajax请求语法形式绑定
    // 如果你写原生 js ajax请求,是无效的
    // const xhr1 = new XMLHttpRequest();
    // xhr1.open('get' , './get.php');
    // xhr1.send();
    // xhr1.onload = function(res){
    //     console.log(res);
    // }

    $.ajax({
        url : './get.php',
    });

    $.get('./ghp');

</script>

php

<?php

echo '我是请求结果';

三.demo2

php

<?php

echo '我是请求结果';

css

<style>
    * {margin: 0;padding: 0;}
    img {width: 100%;height: 100%;position: fixed;top: 0;left: 0;opacity: .5;display: none;}
</style>

html+js

总结
开始,是第一条请求开始
结束,是所有请求结束
不同显示效果,无非就是不同的动图的使用