解决AJAX IE缓存问题

最新推荐文章于 2024-11-12 23:26:42 发布
最新推荐文章于 2024-11-12 23:26:42 发布
阅读量131 收藏 1
点赞数
分类专栏： AJAX 文章标签： AJAX IE缓存 XMLHttpRequest 时间戳 请求头
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ryyzxf/article/details/108869066
版权

解决AJAX IE缓存问题

问题描述：

IE浏览器会对AJAX请求结果作为一个缓存，当下一次发送请求时，它走的是本地缓存，并不是服务器返回的最新数据对于时效性比较强的场景，AJAX缓存会影响这个结果不够正常的去显示。
请求端代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IE缓存问题</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px pink;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#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) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                    }
                }
            }

        });
    </script>
</body>

</html>

服务器端：

const { request, response } = require('express');
// 1.引入express
const express = require('express');

app.get('/ie', (request, response) => {
    //设置响应头,设置跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
        //设置响应体
    response.send('HELLO IE-1');
});

第一次执行

在这里插入图片描述
改变服务器返回消息后：

 response.send('HELLO IE-2');

在这里插入图片描述
没有及时的更改内容。

解决方案

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

初始化时，在url中加上时间，来区别两次请求的不同。

谢去非
关注
专栏目录
ajax调用中ie缓存问题解决方法
12-09
本文主要探讨了在Ajax调用中遇到的IE浏览器缓存问题及其解决方案。 Ajax请求通常用于向服务器获取数据，更新网页部分区域，而不刷新整个页面。然而，在Internet Explorer（IE）浏览器中，如果XMLHttpRequest请求的...
IE下Ajax缓存问题的快速解决方法(get方式)
12-03
【IE下Ajax缓存问题的快速解决方法(get方式)】 在开发Web应用时，尤其是在使用Ajax技术时，可能会遇到浏览器缓存导致的问题。对于IE浏览器，由于其对GET请求的特殊处理，有时会缓存Ajax请求，从而影响到数据的实时...
解决IE浏览器中AJAX只能运行一次的IE缓存问题
weixin_30374009的博客
10-13 147
大家在系统开发中都可能会在js中用到ajax或者dwr，因为IE的缓存，使得我们在填入相同的值的时候总是使用IE缓存，为了解决这个问题一般可以用一下方法： 1：在ajax或者dwr提交的url后面加时间戳。 例如 http_request.onreadystatechange = funcName（函数名）; http_request.open("GET"...
关于ajax请求，IE浏览器缓存问题
bug_chen_xue的博客
09-30 300
关于ajax请求，IE浏览器缓存问题 之前遇到的，在谷歌等其他浏览器操作时，实时刷新，但是IE浏览器需要每次清空缓存，在请求时才会刷新，解决办法有两种： 1、将IE浏览器的缓存机制关闭即可（不推荐使用，开发中不可能上线后让使用者一个一个去关浏览器缓存） 2、在前端代码中将ajax请求的缓存机制关闭即可，在全局变量中增加 $.ajaxSetup({ cache: false }); 即可， 注意：如果是layui 框架，添加时注意位置，$需要被声明在使用 ...
ie下ajax缓存机制--避免误区
菜鸟前端的博客
07-19 583
在IE下用Ajax请求某一页面，通常会因为缓存的原因而返回上一次的结果，造成混乱， 即get方式时，获取数据，因发送参数和地址都一致，故IE浏览器会从缓存中取，而不会去请求服务器端， 而post方式因为参数的不同，不会产生这个问题]而FF下不会出现这种情况。为了不受缓存影响，可以这样做： 在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数 在javascript发送的URL后加上...
Ajax - 解决IE缓存问题
weixin_45663697的博客
12-04 81
在请求路径上加上?t='+Date.now() xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());
IE浏览器下AJAX缓存问题导致数据不更新的解决办法
尽信书，则不如无书。
07-28 2558
描述 做项目时遇到的问题： 通过AJAX请求后台时，当参数相同，IE浏览器会从缓存中取值而非从重新请求服务器。其他使用非IE内核的浏览器并无此问题。 解决 有两种解决办法; 其一： 在AJAX请求URL后面加随机数。 例如：URL + “&t=” + new Date(); 其二： 直接给AJAX参数：cache设置为false; $.ajaxSet
ajax的IE缓存问题
mantou_riji的博客
05-13 332
文章目录结果的产生ajax解决缓存问题 结果的产生 IE 缓存问题，IE浏览器会将ajax请求的返回结果进行缓存，如果再遇到相同的ajax请求，就直接在缓存中取结果，这样就得不到最新的服务器响应结果。 （chrom浏览器可以实时更新） eg： server.js // 1.引入express const express = require('express'); // 2.创建应用对象 const app = express(); // 3.创建路由规则 // 如果请求行的路径是/server的GET请求就
Ajax学习：Ajax IE缓存问题的解决
weixin_47295886的博客
11-29 373
IE缓存问题：IE浏览器会对ajax请求结果做缓存——导致的问题下次再发送请求的时候，走的是本地的缓存而不会是服务器的最新数据。当界面更改时候 页面加载的内容是在缓存中加载 无法变化。增加一个时间戳代表不同的，不同事件会重新发送请求。点击发送ajax请求 局部刷新。
Ajax解决ie缓存问题
weixin_42541725的博客
02-23 338
Ajax解决ie缓存问题
IE下jquery ajax无法获得最新数据的问题解决(IE缓存)
10-26
本文主要讨论的是一个常见的问题——在Internet Explorer (IE) 浏览器下，使用jQuery AJAX请求无法获取到最新数据，而是返回了缓存中的旧数据。这个问题在其他现代浏览器如Chrome中通常不会出现。 首先，我们要理解...
Spark SQL大数据分析快速上手-伪分布模式安装
brucexia的专栏
11-12 619
前置环境安装参看此博文伪分布模式也是在一台主机上运行，我们直接使用2.2节配置好的CentOS7-201虚拟机。伪分布模式需要启动Spark的两个进程，分别是Master和Worker。启动后，可以通过8080端口查看Spark的运行状态。伪分布模式安装需要修改一个配置文件SPARK_HOME/conf/workers，添加一个worker节点，然后通过SPARK_HOME/sbin目录下的start-all.sh启动Spark集群。
RDD 算子全面解析：从基础到进阶与面试要点
天冬忘忧的博客
11-09 1109
在大数据处理领域，Spark 中的 RDD（弹性分布式数据集）是核心概念之一。RDD 算子则是对 RDD 进行操作的关键工具，它们决定了数据的处理方式和流程。深入理解 RDD 算子对于高效地使用 Spark 处理大规模数据至关重要。本文将详细介绍 RDD 的常用基础算子，包括算子的分类、功能、代码示例、常见问题以及面试相关要点。
php中ajax怎么使用【小白专用24.11.12】
zgscwxd的博客
11-12 629
php中ajax怎么使用方法
️️一篇快速上手 AJAX 异步前后端交互
最新发布
qq_53569667的博客
11-12 492
AJAX 异步前后端交互快速学习手册，使用原生、fetch、jQuery、Axios 发送 AJAX 请求。
探索 HTTP 请求方法：GET、POST、PUT、DELETE 等的用法详解
weixin_44780781的博客
11-12 570
在 Web 开发中，HTTP 请求方法决定了客户端与服务器之间如何交流数据。无论使用 HTTP 还是 HTTPS 协议，这些请求方法都遵循相同的标准。本文将深入探讨常见的请求方法（GET、POST、PUT、DELETE 等）的用法、适用场景及常见误区。提示：以下是本篇文章正文内容，下面案例可供参考在实际开发中，根据不同的业务需求，合理选择 HTTP 请求方法可以提升接口设计的清晰度、可靠性和安全性。
Go语言 HTTP 服务模糊测试教程
mainjay的博客
11-12 258
模糊测试是一种自动化的软件测试技术，它涉及向计算机程序输入大量有效的、接近有效的或无效的随机数据，并观察其行为和输出。模糊测试的目标是揭示通过传统测试方法可能无法发现的bug、崩溃和安全漏洞。// 可能会因运行时错误而崩溃：索引超出范围if a[i]!= b[i] {这个示例函数在两个切片长度相等时可以完美工作。但当第一个切片比第二个长时，它会发生崩溃（索引超出范围错误此外，当第二个切片是第一个切片的子集时，它也不会返回正确的结果。模糊测试技术通过用各种输入轰炸这个函数，可以轻松发现这个bug。
HTTP 客户端怎么向 Spring Cloud Sleuth 传输跟踪 ID
galoiszhou的博客
11-12 251
如果您需要在某些场景下手动指定，可以在发送请求时通过 HTTP 客户端库（如。如果您希望手动传入这些 ID，可以在请求的 HTTP headers 中传入。在 Spring Cloud Sleuth 的请求链路追踪中，，这样下游的服务将会识别并继承这些 ID。会自动生成和传递这些。
http(s)接口设计注意事项
w_t_y_y的博客
11-12 259
支持在极短的时间内，第三方平台用相同的参数请求API接口多次，可能是bug或者接口重试，第一次请求数据库会新增数据，但第二次请求以后就不会新增数据，但也会返回成功。调用我们另外一个查询状态的API接口，每隔一段时间查询一次状态，传入的参数是之前的那个API接口中的id集合。为了进一步加强API接口的安全性，防止接口的签名或者加密被破解了，攻击者可以在自己的服务器上请求该接口。一般的API接口的逻辑都是同步处理的，请求完之后立刻返回结果。第三方平台的接口，告知API接口的处理结果，很多支付接口就是这么玩的。
解决IE中AJAX缓存问题的两种策略
"本文主要介绍了在处理AJAX请求时，尤其是在IE浏览器中遇到的缓存问题及其解决方案。AJAX在实现网页无刷新更新时，可能会因浏览器缓存导致数据不实时，尤其是IE浏览器。文中提供了两种有效的方法来解决这一问题。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值