Ajax学习：IE缓存问题

最新推荐文章于 2022-11-29 10:08:44 发布

凌晨小街

最新推荐文章于 2022-11-29 10:08:44 发布

阅读量147

点赞数

分类专栏：前端学习文章标签：前端 node.js express

本文链接：https://blog.csdn.net/ysj367635984/article/details/117126026

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

问题

情况是这样子的，我一开始通过express来传输一个消息给前端
在这里插入图片描述
然后在谷歌浏览器上面运行前端代码
显示的结果是

但仅仅只在谷歌浏览器测试是不行的，于是我跑到Firefox、IE…浏览器测试，嗯，目前看上去一切良好。
现在我要把传输的信息给换掉，换成一个其他的，如下
在这里插入图片描述
然后我再去测试各个服务器的显示情况
好家伙，这个IE就针不戳，直接还是hello IE这条数据
其他浏览器都没有问题，难道是我忽略了什么？？？

容我喝杯java奶茶静静。

要点

那么这个问题就主要出在IE浏览器本身上面，这是因为IE浏览器会对同一个url链接请求的数据进行一个缓存，这样子就会造成一个坏处，浏览器显示信息就不会去请求接受新数据，而是拿出缓存的老数据显示，肝疼诶~
那咋办呢，总不可能一直显示老数据吧

解决方法

我这里只是推荐比较简单的一种，那就是给url请求字符串加一个时间戳，这样子就会使得每次获取数据的时候，url字符串数据都是不一致的，因为每次获取新数据的时间戳肯定是不一致的。
如下
在这里插入图片描述

现在，加上时间戳，我们再运行一遍
在这里插入图片描述

然后，我们再修改一下express里面的数据

在这里插入图片描述

这样子就没有问题了，这就制造了不同数据的url字符串。
完美解决
放上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <titile>IE缓存问题</titile>
    <style>
        #content {
            width: 200px;
            height: 200px;
            border: 1px solid rgb(4, 247, 25);
            border-width: 3px;
            margin: 20px 0 20px 0;
        }
    </style>
</head>

<body>
    <button type="button">提交</button>
    <div id="content"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const res = document.getElementById('content');
        btn.onclick = function() {
            // Ajax请求
            // 1. 创建XMLHTTPRequest连接
            const xhr = new XMLHttpRequest();
            // 2. 开启：确认访问方式是GET 还是POST，需要访问的URL
            xhr.open('GET', 'http://127.0.0.1:8080/ie?time=' + new Date());
            // 3、发送请求数据
            xhr.send();
            // 4、监听状态及数据
            // readyState有五种如下
            //      0:代表初始化连接完成  1：open已经完成 2：send已经完成 
            //      3：服务器部分数据返回完成  4: 服务器所有数据返回完成
            xhr.onreadystatechange = function() {
                // 3是不合适的，服务器数据没有完全返回，4是最合适的
                if (xhr.readyState === 4) {
                    // 2xx以2开头的状态码我都认为数据返回成功
                    console.log('服务器数据全部返回，readyState状态为4');
                    if (xhr.status >= 200 && xhr.status < 300) {
                        res.innerHTML = xhr.response;
                    }
                } else {

                }
            }
        };
    </script>
</body>

</html>

const express = require("express");

const app = express();

// 命令行启动方式 nodemon server.js,不用node，nodemon便于我们修改server文件时自动重启服务

// 针对IE缓存问题
app.all("/ie", (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 为了解决跨域问题而写
    response.setHeader('Access-Control-Allow-Headers', '*');

    response.send('hello IE');
})

app.listen(8080, () => {
    console.log('正在监听8080端口');
});