解決ajax中ie快取問題(手動新增時間戳)

2021春節晚會發表於2021-01-02
快取時間戳

回到文章總目錄

本章講解的是ajax的ie快取
ie瀏覽器對ajax請求的的結果進行快取，這會導致ie瀏覽器ajax請求的的結果（最新返回結果）顯示失敗，因為它調取了舊的快取。
1.建立在testsix資料夾並在這個資料夾裡面
2.建立iecache.html檔案
3.建立server.js檔案

案例一

未新增解決方法
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埠監聽中......");
});

案例二
在url裡面新增+Date.now()

textone.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());

這樣會在訪問的時候新增一個時間戳
那麼每次訪問獲取的時間戳都是不一樣的
那麼瀏覽器就會認為你這裡是兩次不同的請求

一般情況下我們不需要自己去新增這個，會有工具自動把這個新增上去。
js這邊沒有修改
修改的只是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?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>

對比圖
在這裡插入圖片描述
url後面多了t=時間戳,並且查詢字串引數多了t=時間戳
在這裡插入圖片描述

相關文章