点击发送ajax请求 局部刷新
IE缓存问题:IE浏览器会对ajax请求结果做缓存——导致的问题下次再发送请求的时候,走的是本地的缓存而不会是服务器的最新数据。
服务器部分
//1、导入expressconst express=require('express')//2、创建应用对象 创建web服务器const app=express()//3、创建路由规则//监听客户端的GET请求和POST请求,并向客户端响应具体内容//requset是对请求报文的封装//response是对响应报文的封装app.get('/ie',function(requset,response){//设置响应头 名称 值----设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//设置响应体response.send('ie缓存1');})//4、监听端口 启动服务//启动服务器.lisen(端口号,(启动成功职之后的回调函数)) 端口号是80可以省略app.listen(8000,()=>{console.log('8000启动成功')})
前端界面部分
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#result {width: 200px;height: 200px;border: solid seagreen 1px;}</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() {console.log('s')//4步骤走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 < 300 && xhr.status >= 200) {result.innerHTML = xhr.response;}}}})</script></body></html>
当界面更改时候 页面加载的内容是在缓存中加载 无法变化
增加一个时间戳代表不同的,不同事件会重新发送请求
xhr.open('GET', 'http://127.0.0.1:8000/ie?t='+Date.now());//Date.now()获取当前时间戳 代表不同的请求会重启发送请求
会随着响应的不同而不同
如果觉得《Ajax学习:Ajax IE缓存问题的解决》对你有帮助,请点赞、收藏,并留下你的观点哦!