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());
