ajax

计时器设置延时以及设置超时取消请求

app.get('/delay', (request, response) => {
    //设置响应头,第一部分是头的名字，后面是值。作用是为了允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    setTimeout(()=>{response.send("延时响应")},3000)
    
});

1
2
3
4
5
6
7

xhr.timeout为设置时间限制，自动取消请求
xhr.onerror表示网络异常

<body>
    <button>发送请求</button>
    <div id="result"></div>
</body>
<script>
    let btn = document.querySelector('button');
    let result = document.querySelector('#result');
    btn.onclick = function () {
        // 1.创建对象,为什么命名xhr是因为其英文代表ajax方便理解
        const xhr = new XMLHttpRequest();
        //超时设置2秒，2秒后未响应取消请求
        xhr.timeout=2000;
        //设置超时提醒
        xhr.ontimeout=function(){
            alert('传输失败，请稍后重试')
        }
          // 加载时出现问题,网络异常如停网时的提醒
         xhr.onerror=function(){
            alert('你的网络似乎出现了一点问题');
        }
        // 2.初始化，设置请求方法和url
        xhr.open('GET','http://127.0.0.1:8000/delay');//?表示传递参数
        // 3.发送
        xhr.send();
        // 4.事件绑定 处理服务端返回的结果,on单词表示当...的时候，
        xhr.onreadystatechange = function () {
            // 判断服务端返回所有结果,类似于第三次握手
            if (xhr.readyState === 4) {
                // 继续判断响应状态 200 404 403 401 500,2开头表示成功
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 处理结果
                result.innerHTML=xhr.response
                }
            }
        }
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

手动取消请求：abort函数

<body>
    <button>点击发送</button>
    <button>点击取消</button>

    <script>
        let send=document.querySelectorAll('button');
        let xhr=null;//为了两个函数调用同一个变量
        send[0].onclick=function(){
            xhr=new XMLHttpRequest();
            xhr.open('GET','http://127.0.0.1:8000/delay');
            xhr.send();
        }
        //abort()函数，手动取消发送请求
        send[1].onclick=function(){
            xhr.abort();
        }
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

解决请求重复问题（防抖或节流阀）
实现逻辑：
1.再次点击发送，若状态为true,即发送正在进行时，取消前一次xhr
2.初始状态为false,发送过程中状态改为true
3.发送成功状态改为false

<body>
    <button>点击发送</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelectorAll('button');
        let result = document.querySelector('#result');
        let x = null;//为了两个函数调用同一个变量
        let issending = false;//设置防抖
        btn[0].onclick = function () {
            if (issending) x.abort();//如果正在发送请求就取消，必须放在x =new前面，否则第二次点击取消的是第二次的x，但取消后下面代码继续运行第二次x请求不受影响
            x = new XMLHttpRequest();
            issending = true;
            x.open('GET', 'http://127.0.0.1:8000/delay');
            x.send();
            x.onreadystatechange = function () {
                // 判断服务端返回所有结果,类似于第三次握手
                if (x.readyState === 4) {
                    issending = false;//响应成功就改变布尔值
                    if (x.status >= 200 && x.status < 300) {
                        // 处理结果
                        // result.innerHTML = xhr.response;
                        result.innerHTML += x.response
                    }
                }
            }
        }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

防抖，注意防抖判断条件要用==双等于号
防抖：当用户再次触发请求时，如果请求未响应的话取消上次请求，重新发请求

<body>
        <button>点击发送</button>
        <div id="result"></div>
        <script>
            const btn = document.querySelectorAll('button');
            let result = document.querySelector('#result');
            let x = null;//为了两个函数调用同一个变量
            let issending = false;//设置防抖
            btn[0].onclick = function () {
                if (issending==false){console.log('成功'); //如果正在发送请求就取消，注意一定要双等于号
                x = new XMLHttpRequest();
                issending = true;
                x.open('GET', 'http://127.0.0.1:8000/delay');
                x.send();
                x.onreadystatechange = function () {
                    // 判断服务端返回所有结果,类似于第三次握手
                    if (x.readyState === 4) {
                        issending = false;//响应成功就改变布尔值
                        if (x.status >= 200 && x.status < 300) {
                            // 处理结果
                            // result.innerHTML = xhr.response;
                            result.innerHTML += x.response
                        }
                    }
                }
            }}
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

编辑

上次更新: 2023/7/11 18:57:41

← 使用Gitalk实现静态博客无后台评论系统 ajax基础→