解决ajax重复发送相同请求的问题

最新推荐文章于 2022-05-13 19:12:31 发布

小小小竹子

最新推荐文章于 2022-05-13 19:12:31 发布

阅读量731

点赞数 2

分类专栏： AJAX 初学者的成长日记文章标签： ajax

本文链接：https://blog.csdn.net/qq_42524153/article/details/109495513

版权

初学者的成长日记同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

AJAX

11 篇文章 0 订阅

订阅专栏

重复的相同请求会让服务器压力很大,所以在发送请求前,要判断之前有没有过该请求,如果有,则终止上次该请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>发送请求</button>   
    <script>
        const btns = document.getElementsByTagName('button');
        let xhr = null;
        //标识变量 是否正在发送ajax请求
        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;
                }
            }
        }    
    </script>
</body>
</html>

小小小竹子

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
解决ajax重复发送相同请求的问题

重复的相同请求会让服务器压力很大,所以在发送请求前,要判断之前有没有过该请求,如果有,则终止上次该请求<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</ti
复制链接

扫一扫