解决ajax中ie缓存问题(手动添加时间戳)

回到文章总目录

本章讲解的是ajax的ie缓存
ie浏览器对ajax请求的的结果进行缓存，这会导致ie浏览器ajax请求的的结果（最新返回结果）显示失败，因为它调取了旧的缓存。
1.创建在testsix文件夹并在这个文件夹里面
2.创建iecache.html文件
3.创建server.js文件

案例一

未添加解决方法
iecache.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>点击获取信息</button><div id="result" style="width: 300px;height: 200px;border: solid 2px teal;"></div><script>// 一:获取元素对象const texttwo = document.getElementsByTagName('button')[0];// const result = document.querySelector('#result');// texttwo.addEventListener('click', function(){console.log('点击发送测试成功.')// 1.发送请求const textone = new XMLHttpRequest();// // 自动转化// 借助textone对象里面的属性来转化// 设置响应体数据的类型textone.responseType = 'json';// 2.初始化textone.open('GET','http://127.0.0.1:8000/ie');// 3.发送textone.send();// 4.事件绑定textone.onreadystatechange = function(){if(textone.readyState === 4){if(textone.status >= 200 && textone.status < 300){// 测试打印console.log(textone.response);//  使用自动转化result.innerHTML = textone.response.name;}}}});</script>
</body>
</html>

server.js文件

// 1. 引入express
const express = require('express');// 2.创建对象
const app = express();// 3.创建路由规则  里面的形参 request与response   (自己可以随便定义名字的)
//  建议写成  request与response  因为可以见名思意，方便自己看
// request  对请求报文的封装
// responst 对响应报文的封装
//  请求路径为'/server'// 当使用post请求时候会因为发送的信息没有收到对应的结果所以回报错
// 所以该处使用all  表示可以接收任意类型的请求      如get post 等等
app.get('/ie', (request, response)=>{// 设置响应头 设置允许跨域// 头名字为Access-Control-Allow-Origin// 头的值为response.setHeader('Access-Control-Allow-Origin','*');// 响应头        *号表示所有的头信息都可以接收response.setHeader('Access-Control-Allow-Headers','*');// 响应一个数据   把这个对象返回给浏览器const data = {name: 'HELLO IE'};// 对对象进行字符串转换let str = JSON.stringify(data);// 设置响应体response.send(str);});// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调，用来提示，告诉自己是否监听成功
app.listen(8000, ()=>{console.log("服务已经启动，8000端口监听中......");
});

案例二
在url里面添加+Date.now()

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

这样会在访问的时候添加一个时间戳
那么每次访问获取的时间戳都是不一样的
那么浏览器就会认为你这里是两次不同的请求

一般情况下我们不需要自己去添加这个，会有工具自动把这个添加上去。
js这边没有修改
修改的只是html，完整的是

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>点击获取信息</button><div id="result" style="width: 300px;height: 200px;border: solid 2px teal;"></div><script>// 一:获取元素对象const texttwo = document.getElementsByTagName('button')[0];// const result = document.querySelector('#result');// texttwo.addEventListener('click', function(){console.log('点击发送测试成功.')// 1.发送请求const textone = new XMLHttpRequest();// // 自动转化// 借助textone对象里面的属性来转化// 设置响应体数据的类型textone.responseType = 'json';// 2.初始化textone.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());// 3.发送textone.send();// 4.事件绑定textone.onreadystatechange = function(){if(textone.readyState === 4){if(textone.status >= 200 && textone.status < 300){// 测试打印console.log(textone.response);//  使用自动转化result.innerHTML = textone.response.name;}}}});</script>
</body>
</html>

对比图

url后面多了t=时间戳,并且查询字符串参数多了t=时间戳

解决ajax中ie缓存问题(手动添加时间戳)相关推荐

解决Ajax中的缓存问题
当我们向服务器发送Ajax请求时,在W3C浏览器下,数据可以及时更新,但是如果使用的是IE浏览器且发送的是GET请求,系统会自动缓存请求结果,当下次访问时,系统自动会调用缓存信息,这会造成数据更新不及 ...
解决Ajax中IE浏览器缓存问题
解决Ajax中IE浏览器缓存问题 1.首先,先看一张图.从这张图中我们可以清楚的了解到从请求的发出到解析响应的过程. 2.根据图中的三个节点我们可以使用三种方式解决这个缓存问题(主要是针对ie) 2. ...
304 ajax,ajax中304缓存处理
这是废话.... [写的可能不专业,但是我会加油的,ヾ(◍°∇°◍)ﾉﾞ ] 与后台的交互用的是axios,从来也没有考虑过缓存的事情,这次后台提出了一个需求,get请求的请求头加上If-Modifi ...
sql中还在傻傻的手动添加创建人、创建时间？高级开发工程师不得不知的一个通用技巧！
背景数据库设计过程中,我们往往会给数据库表添加一些通用字段,比如创建人.创建时间.修改人.修改时间,在一些公司的设计过程中有时会强制要求每个表都要包含这些基础信息,以便记录数据操作时的一些基本日志记 ...
maven 加入第三方库_maven 手动添加第三方的jar包
maven项目手动引入第三方jar包项目打包项目有时候需要依赖第三方jar包,一般会去maven仓库寻找坐标,但有时候maven仓库并没有提供,我们需要手动下载jar包并导入项目. maven库中并 ...
ajax的send方法参数格式,Ajax中send参数
一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null. 例如: var url = "l ...
ajax中cache什么意思,ajax之cache血与泪~~
场景:项目以ie5渲染页面,点击导出列表数据(Excel形式),点击导出发送get请求,后台生成Excel文件,返回文件地址信息异常:ie第一次返回的信息正常,之后返回的都是第一次的结果,googl ...
oracle 11G GI 如何手动添加vip 资源
3节点rac,在新添加节点3 lixora0 时出现了异常,发现vip 资源没有添加到crs 中,尝试自己手动添加vip资源 ---添加节点3:lixora0 ./addNode.sh -silen ...
Android 录像添加时间戳水印
最近项目中需要后台录像并添加时间戳,就类似监控视频,直接放效果图了, demo界面功能如图:跑的时候注意自己到设置加相机权限这个demo主要做到了两点,一.添加时间戳水印.二.暂停,继续录像.git ...

解决ajax中ie缓存问题(手动添加时间戳)

案例一

解决ajax中ie缓存问题(手动添加时间戳)相关推荐

最新文章

热门文章