Back to the general list of articles
This chapter explains that the
ie browser of Ajax caches the results of the Ajax request, which will cause the result of the Ajax request of the ie browser (the latest return result) to fail to display because it retrieves the old cache.
1. Create in testsix文件夹and in this folder
2. Create iecache.html文件
3. Createserver.js文件
Case number one
No solution added
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端口监听中......");
});
Case 2
Add in the url+Date.now()
textone.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());
This will add a timestamp when
you visit, and the timestamp obtained for each visit is different,
so the browser will think that you have two different requests here.
Under normal circumstances, we don't need to add this by ourselves, there will be tools to add this automatically.
jsThere is no modification here
, only the html is modified, the complete one is
<!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>
There
are more t=时间戳and 查询字符串参数more behind the url of the comparison chartt=时间戳
