AJAX请求问题

2023-10-08 20:55:52

AJAX

页面不刷新，即可获得数据更新。
登录检测。懒加载，按需加载。提高网页的加载速度。
优点
无需刷新页面就可以与服务器端进行通信。
允许根据用户事件来更新部分页面内容。
缺点
没有浏览历史，不能后退。
存在跨域问题，（同源）
SEO（爬虫）不友好，爬虫爬不到。因为网页节点中没有。

请求报文

格式与参数

行

请求类型 get post
URL
http协议版本

头

名字：值
host:atguigu.com

空行

固定的，必须有

体

请求类型为get时，可以为空，
请求类型为post时，不可以为空。

响应报文

行

协议版本
响应状态码
状态字符串
http/1.1 200 ok

头

对响应的一些描述，比如长度，格式等

空行

一定要有

体

返回请求的结果

AJAX基本步骤

第一步

//1.创建对象
            const xhr = new XMLHttpRequest();

第二步

//2.初始化  设置请求方法和url
            //传递参数的话，就在url后面用？分隔&连接
            xhr.open('GET', 'http://127.0.0.1:8000/server');

第三步

 //3.发送
            xhr.send();

第四步

//4.事件绑定 处理服务器端返回的结果
            //on 表示当...时候
            //readystate  是xhr  对象中的属性，表示状态  0 1 2 3 4
            //3表示服务器返回了部分结果，4表示返回了全部结果
            //change 改变
            xhr.onreadystatechange = function() {
                //服务端返回了所有结果
                if (xhr.readyState === 4) {
                    //判断响应状态码 200 404 403 2开头的都是成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                        console.log(xhr.status); //状态码
                        console.log(xhr.statusText); //状态字符串
                        console.log(xhr.getAllResponseHeaders()); //所有响应头
                        console.log(xhr.response); //响应体
                    }
                }
            }
        })

超时与网络异常处理

 //设置AJAX步骤
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //超时设置2s 设置
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function() {
                    alert("网络异常，请稍后重试")
                }
                //网络异常回调
            xhr.onerror = function() {
                    alert("你的网络似乎出现了一些问题！")
                }
                //2.初始化
            xhr.open('GET', 'http://127.0.0.1:8000/delay');
            //3.发送
            xhr.send()
                //4.处理服务端返回的结果
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status <= 400) {
                        result.innerHTML = xhr.response
                    }
                }
            }


        })

重复请求问题

    <button>发送请求</button>
    <button>取消请求</button>

    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button')
        let xhr = null;
        //标识变量
        let isSending = false; //是否正在发送请求
        btns[0].onclick = function() {
            //判断标识符变量
            if (isSending) xhr.abort() //如果正在发送请求，则取消该请求，创建一个新的
            xhr = new XMLHttpRequest()
                //修改标识符变量,证明有一个请求正在发送
            isSending = true
            xhr.open('GET', 'http://127.0.0.1:8000/delay')
            xhr.send()
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    //请求完成后，修改标识符变量的值
                    isSending = false
                }
            }
        }

        btns[1].onclick = function() {
            //调用abort方法来取消请求
            xhr.abort()
        }

AJAX中的axios

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 发送 AJAX请求</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>

    <script>
        const btns = document.querySelectorAll('button')
            //配置baseURl
        axios.defaults.baseURL = 'http://127.0.0.1:8000';
        //发送GET请求
        btns[0].onclick = function() {

            //GET请去
            axios.get('/axios-server', {
                //url参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'shagnguigu',
                    age: 10

                }
            }).then(value => {
                console.log(value);
            })
        }

        //发送POST请求
        btns[1].onclick = function() {
            axios.post('/axios-server',
                //配置请求体信息
                {
                    username: 'admin',
                    password: 'admin'
                },
                //先配置请求体信息，在配置其他参数信息
                {
                    //配置URL参数
                    params: {
                        id: 100,
                        vip: 9
                    },
                    //配置请求头信息
                    headers: {
                        height: 180,
                        weight: 180
                    },

                })
        }

        //利用axios函数发送请求
        btns[2].onclick = function() {
            axios({
                //请求方法
                methods: 'POST',
                //url
                url: '/axios-server',
                //配置URL参数
                params: {
                    vip: 200,
                    level: 30
                },
                //头信息
                headers: {
                    a: 200,
                    b: 300
                },
                //配置请求体信息
                data: {
                    username: 'admine',
                    password: 'admine'
                }
                //处理返回结果
            }).then(response => {
                console.log(response);
            })
        }
    </script>
</body>

码农公寓