Ajax - 一些小知识（超时请求、重复请求、取消请求）

最新推荐文章于 2022-09-18 15:05:01 发布

今天会下雨吗

最新推荐文章于 2022-09-18 15:05:01 发布

阅读量659

点赞数

分类专栏： Ajax 文章标签： ajax javascript

本文链接：https://blog.csdn.net/weixin_45663697/article/details/110670445

版权

Ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 请求超时与网络异常

timeout、ontimeout

 //超时设置 2s后为请求成功显示错误；然后取消请求
xhr.timeout = 2000;
//超时回调	超时后给出提示
xhr.ontimeout = function(){
    alert("网络请求超时")
}

2. 取消请求

abort

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

//获取元素
const btn = document.getElementsByTagName('button');
let xhr = null;
btn[0].onclick = function(){
    var xhr = new XMLHttpRequest();
    xhr.open("GET",'http://127.0.0.1:8000/deplay');
    xhr.send();
};

//abort
btn[1].onclick = function(){
    xhr.abort();
}

3. 重复请求问题

设置标识变量

<body>
    <button>发送</button>

    <script>
        const btn = document.getElementsByTagName('button');
        //定义一个标识变量
        //const x = 0;
        let x = null;
        let isSending = false;
        btn[0].onclick = function(){
            //下一次点击按钮时就判断是否有请求正在发送
            if(isSending)   x.abort();
            x = new XMLHttpRequest();
            //正在发送时修改变量
            isSending = true;
            x.open("GET",'http://127.0.0.1:8000/deplay');
            x.send();
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    //发送完成后
                    isSending = false;
                }
            }
        };
    </script>
</body>

今天会下雨吗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax - 一些小知识（超时请求、重复请求、取消请求）

1. 请求超时与网络异常timeout、ontimeout //超时设置 2s后为请求成功显示错误；然后取消请求xhr.timeout = 2000;//超时回调超时后给出提示xhr.ontimeout = function(){ alert("网络请求超时")}2. 取消请求abort<button>发送</button><button>取消</button>//获取元素const btn = document.
复制链接

扫一扫

专栏目录