【ajax】6.IE缓存问题解决
〇、前情提要
在看b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版(ajax2020最新版),中插了这个知识记录一下。
参考:
我的笔记:
【javaweb】b站-尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版(ajax2020最新版) 笔记
https://blog.csdn.net/weixin_43210113/article/details/110628389b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版(ajax2020最新版)
https://www.bilibili.com/video/BV1WC4y1b78y?p=2笔记视频链接
链接:https://pan.baidu.com/s/1Wnwb42-AaqAlg6cQ0PRHwg
提取码:3waj
————————————————————————————我的笔记:
【ajax】NodeJS的安装与介绍+express框架介绍与基本使用
https://blog.csdn.net/weixin_43210113/article/details/110636188我的笔记:
【ajax】GET:AJAX案例准备+AJAX请求的基本操作+AJAX设置请求参数
https://blog.csdn.net/weixin_43210113/article/details/110656792我的笔记:
【ajax】POST:AJAX发送POST请求+POST设置请求体
https://blog.csdn.net/weixin_43210113/article/details/110664818我的笔记:
【ajax】JSON:服务端响应JSON数据+nodemon自动重启工具安装+Missing write access to /usr/local/lib/node_modules解决方法
https://blog.csdn.net/weixin_43210113/article/details/110792442
一、IE缓存问题解决
问题描述
ie浏览器会对数据进行缓存,下一次发送请求返回走的是原缓存,非最新数据。
4-IE缓存问题.html
<!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 #258;}</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>
server.js
//1. 引入express
const express = require('express');//2. 创建应用对象
const app = express();//3. 创建路由规则
//针对 IE 缓存
app.get('/ie', (request, response) => {//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');//设置响应体response.send('HELLO IE');
});//4. 监听端口启动服务
app.listen(8000, () => {console.log("服务已经启动, 8000 端口监听中....");
});
nodemon打开server,测试,修改Response内容,测试。
chrome会自动改变,而IE不会变,因其走缓存。
时间戳
Date.now()
获取当前时间戳,让每次url不同
xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());
<!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 #258;}</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?t='+Date.now());xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status< 300){result.innerHTML = xhr.response;}}}})</script>
</body>
</html>
【ajax】6.IE缓存问题解决相关推荐
- jquery ajax缓存问题解决方法小结
jquery ajax缓存问题解决方法小结 参考文章: (1)jquery ajax缓存问题解决方法小结 (2)https://www.cnblogs.com/zhuyeshen/p/11599254 ...
- jQuery中ajax的使用和缓存问题解决
jQuery中ajax的使用和缓存问题解决 参考文章: (1)jQuery中ajax的使用和缓存问题解决 (2)https://www.cnblogs.com/fullhouse/archive/20 ...
- ajax和rxjs,javascript – RxJS 5 Observable和Angular2 http:调用ajax一次,保存结果,随后的ajax调用使用缓存结果...
下面的代码是我目前拥有的简化版本: name.service.ts@Injectable() export class NameService { const nameURL = "http ...
- ie ajax异步缓存,IE下发送Ajax请求的缓存问题
IE下发送Ajax请求的缓存问题 (2012-03-22 15:54:25) 标签: it 分类: web 今天下午在做要素页面无刷新添加的时候,IE下遭遇Ajax缓存戏弄,因为刚开始并不知道IE有这 ...
- 解决ajax中ie缓存问题(手动添加时间戳)
回到文章总目录 本章讲解的是ajax的ie缓存 ie浏览器对ajax请求的的结果进行缓存,这会导致ie浏览器ajax请求的的结果(最新返回结果)显示失败,因为它调取了旧的缓存. 1.创建在testsi ...
- vue项目微信端清理缓存问题解决
vue项目微信端清理缓存问题解决 参考文章: (1)vue项目微信端清理缓存问题解决 (2)http://www.cnblogs.com/sakura-lifangfang/p/9660550.htm ...
- Vue项目打包部署Nginx配置及前端缓存问题解决
目录 1.部署单个站点 2.部署多个站点 3.缓存问题解决 1.部署单个站点 配置如下 server {listen 80;server_name localhost;location / {root ...
- IE浏览器缓存问题解决方法(非常严重)
IE浏览器缓存问题解决方法整理 一.IE浏览器缓存的内容分析: IE浏览器会缓存网页中的GET和XHR的内容,并且在IE浏览器中如果请求方式是get方式的话,IE浏览器会进行识别,如果该get请求的u ...
- 304 not modified 缓存问题解决
304 not modified 缓存问题解决 问题引入:一个普通的get请求,当点击按钮,发送第二次请求,Status变为304 not modified,不在是200 解决方法:需在url ...
- jquery ajax 防止浏览器缓存
来源:http://hi.baidu.com/hongliangspace/blog/item/59a94a0851383ba62eddd43b.html 原来jQuery提供一个防止ajax使用缓存 ...
最新文章
- 世界顶级赛事百万座位如何做到票务限时匹配?
- 20161207py学习笔记
- Fanout交换器-编写生产者
- 微型计算机所组装的流程图是,计算机、微型计算机的组成及工作过程.ppt
- npoi 导入 winform excel_勤哲Excel服务器做影视制作企业管理系统 - 科技
- 全局使用dva dispatch
- 配置HAProxy支持https协议
- linux建立ftp用户
- InstallSield更新包快速入门文档
- windows 系列机器查看tcp 配置
- 95后妈妈8成是全职,爸爸去哪了?
- wince与android USB通信,WinCE全站仪如何与手机通过USB互传数据
- ApacheCN 翻译活动进度公告 2019.5.31
- 联想微型计算机安装Win7,联想c340如何安装win7_联想c430一体机改win7系统步骤
- python的 e是什么意思_python中的e是什么意思
- 苹果企业证书发布ipa,使用gitee存放plist文件
- 【java并发探赜索隐】判断标志、死锁、守护进程
- 25分钟破亿 首销火爆的moto edge X30给友商们出了个难题
- 日常编程笔记 | 2022.10.1 | 归并排序_一无序列
- 降噪蓝牙耳机哪个好?2021主流蓝牙耳机当选降噪耳机
热门文章
- Tbase 源码 (一)
- SQLite的主键外键
- 四轴飞行器基础介绍篇
- 华为vlan简单配置
- 调试EasyDarwin开源项目EasyCamera-HK接入海康IPCamera 摄像机所遇到的大坑
- MATLAB时域信号采样,信号时域采样 频谱分析(matlab)
- 学校计算机房的制度,小学计算机房管理制度
- 2017年5月—信息安全工程师—上午综合知识(11-15)
- [文摘20080226]领导法则 - 陈安之
- 联想重装系统去掉保护_联想硬盘保护系统,小编教你联想硬盘保护系统怎么安装...