网络异常与网络断开,发送AJAX处理

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
              #result {
                  width: 300px;
                  height: 100px;
                  border: 1px solid red;
              }
        </style>
    </head>
    <body>
        <button>点击发送</button>
    </body>
    <script>
    //当网络存在延迟/异常的特殊处理
        const btm = document.getElementsByTagName('button')[0];
        let x =null;
        let isSending = false;//是否正在发送AJAX请求 true 是 false否
        btm.addEventListener('click',function(){
            if(isSending){//如果正在发送请求则继续请求,在新建一个请求
                x.abort()
            };
            x= new XMLHttpRequest();
            isSending = true;
            x.open('GET','http://127.0.0.1:8000/delly');
            x.send();
            if(x.onreadystatechange === 4){
                //修改变量标识
                isSending = false;
            }
        })
    </script>
</html>

  

 

posted on   爱前端的小魏  阅读(12)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
历史上的今天:
2022-02-08 link的使用(引入)
2022-02-08 css-插入音频视频
2022-02-08 css--针对图片某一个位置进行点击跳转

导航

< 2025年3月 >
23 24 25 26 27 28 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 1 2 3 4 5
点击右上角即可分享
微信分享提示