您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

Ajax学习笔记五

Ajax学习笔记五

  • 5.1AJAX-IE缓存问题解决
    • 5.1.1 定义
    • 5.2.2 示例
    • 5.2.3 解决办法

5.1AJAX-IE缓存问题解决

5.1.1 定义

IE浏览器会对AJAX请求结果做一个缓存,这样会导致一个问题:下次再一次发送请求时,它走的是本地的缓存,而不是服务器缓存的最新数据,这样对与那种时效性强的环境下,ajax就不能正常去显示。

5.2.2 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE缓存问题</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #903;
        }
    </style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
    // 获取绑定事件
    const btn=document.getElementsByTagName('button')[0];
    const result=document.getElementById('result');

    // 申明绑定的函数
    btn.addEventListener('click',function () {
        const  xhr=new XMLHttpRequest();
        xhr.open('GET','http://127.0.0.1:8000/ie');
        xhr.send();
        xhr.onreadystatechange=function () {
            if(xhr.readyState===4&&xhr.status>=200&&xhr.status<300){
                result.innerHTML=xhr.response;
            }
        }
    })
</script>
</body>
</html>

显示响应体的结果:
在这里插入图片描述
但是,当我更改响应体结果后,IE浏览器的内容不变:

//针对IE缓存
app.get('/ie',(request,response)=>{
    // 设置响应头   设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应
    //response.send('Hello IE!');
    //更改成Hello IE-1!
    response.send('Hello IE-1!');
});

5.2.3 解决办法

在请求方法里面的url参数添加如下代码,获取当前时间戳,这样每次请求的url都不同,就是一次新的请求。

xhr.open(‘GET’,‘http://127.0.0.1:8000/ie?t=’+Date.now());


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进