【JavaScript】關於history.go()的ajax請求快取問題
阿新 • • 發佈：2019-02-03
前言：window.history.go()方法可載入歷史列表中的某個具體的頁面，例如你開啟一個瀏覽器後，然後又連續跳轉了幾個頁面，window.history.go(-1)就會跳轉到當前頁面的上一個頁面，window.history.go(1)就會跳轉到當前頁面的下一個頁面。跟瀏覽器自帶的“後退”“前進”鍵一樣的效果。他們的特點就是，跳轉頁面後瀏覽器不會向伺服器重新提交請求，而是會從快取記錄中載入資料。其中包括ajax請求的資料。
相對應後退、前進的方法window.history.back()，window.history.forward()
一、問題重現
<?php //server.php程式碼 echo (int)microtime(true) ;
<!-- demo1頁面程式碼 -->
<body>
<a href="demo2.php">跳轉到demo2頁面</a>
<script>
$.get('server.php',function(res,status){
if(status){
console.log('demo1頁面');
console.log(res);
}
});
</script>
</body><!-- demo2頁面程式碼 --> <body> <a onclick="window.history.go(-1)">返回到demo1</a> <script> $.get('server.php',function(res,status){ if(status){ console.log('demo2頁面'); console.log(res); } }); </script> </body>
其中，php程式碼返回的當前時間的時間戳。第一個頁面跟第二個頁面分別對server.php進行了get請求，物件響應資訊進行了輸出。
開啟demo1頁面，檢視輸出。然後點選“跳轉到demo2頁面”按鈕，跳轉到demo2頁面，一段時間後，點選“返回到demo1”按鈕。
這時會發現 使用window.history.go(-1)返回到demo1，demo1輸出的時間戳還是跟demo2的一樣，說明頁面對ajax請求返回的資訊也進行了快取。
二、解決方案
給請求連結後面新增隨機數
<!-- demo1頁面程式碼 --> <body> <a href="demo2.php">跳轉到demo2頁面</a> <script> $.get('server.php?'+Math.random(),function(res,status){ if(status){ console.log('demo1頁面'); console.log(res); } }); </script> </body>
<!-- demo2頁面程式碼 -->
<body>
<a onclick="window.history.go(-1)">返回到demo1</a>
<script>
$.get('server.php?'+Math.random(),function(res,status){
if(status){
console.log('demo2頁面');
console.log(res);
}
});
</script>
</body>