原生ajax补充

最新推荐文章于 2024-08-26 17:07:20 发布

407指导员

最新推荐文章于 2024-08-26 17:07:20 发布

阅读量100

点赞数 1

分类专栏： AJAX 文章标签： ajax

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/115553474

版权

AJAX 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

原生ajax补充

ie缓存问题

在一些浏览器中(IE),由于缓存机制的存在，ajax只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。

解决方式：浏览器的缓存是根据url地址来记录的，所以我们只需要修改url地址即可避免缓存问题

xhr.open("get","/testAJAX?t="+Date.now());

ajax请求超时和网络异常处理

前端超时设置

xhr.timeout = 2000

超过2秒没有返回，取消请求

超时回调

 //超时回调
 xhr.ontimeout = function(){
     alert("网络异常, 请稍后重试!!");
}

网络异常回调

//网络异常回调
 xhr.onerror = function(){
    alert("你的网络似乎出了一些问题!");
}

谷歌浏览器模拟断网

在这里插入图片描述

offline选项

取消请求

调用abort方法即可取消请求

ajax重复发送请求问题

重复多次点击

<body>
    <button>点击发送</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;
        //标识变量
        let isSending = false; // 是否正在发送AJAX请求

        btns[0].onclick = function(){
            //判断标识变量
            if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求
            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;
                }
            }
        }
    </script>
</body>

一旦多次点击，取消上次请求

407指导员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生ajax补充

原生ajax补充ie缓存问题在一些浏览器中(IE),由于缓存机制的存在，ajax只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。解决方式：浏览器的缓存是根据url地址来记录的，所以我们只需要修改url地址即可避免缓存问题xhr.open("get","/testAJAX?t="+Date.now());ajax请求超时和网络异常处理前端超时设置xhr.timeout = 2000超过2秒没有返回，取消请求超时回调 //超时回调 xhr.ontime
复制链接

扫一扫

专栏目录