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

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>

猜你喜欢

转载自blog.csdn.net/weixin_45663697/article/details/110670445