IE8浏览器缓存问题导致Ajax的GET请求只能执行一次的解决办法
轉載自??IE8瀏覽器緩存問題導致Ajax的GET請求只能執行一次的解決辦法
最近在測試兼容性問題的時候發現，使用Ajax的GET請求向后臺獲取響應結果時，如果是IE8瀏覽器，第一次發送請求時會得到正常的返回結果，然后當再去發送相同請求訪問后臺時，得到的結果總是第一次請求返回的結果。IE11、Chrome、Firefox都是正常的，只有IE8會出現這種現象。
為了重現遇到的這種現象，自己動手寫了一個非常簡單的小例子。
/*** 獲取當前時間* @param request* @return*/ @RequestMapping(value="/getRealTime") @ResponseBody public ResultBean<String> getCalendarInfo(HttpServletRequest request) {ResultBean<String> result = new ResultBean<String>();Date now = new Date();SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");result.setProperties(true, "獲取當前時間成功", sdf.format(now));return result; } <!DOCTYPE HTML> <html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Ajax測試</title><script src="http://static.blog.csdn.net/scripts/jquery.js" type="text/javascript"></script><script>$(function(){$(".js_btn").click(function(){$.ajax({type:'GET',url:'getRealTime',dataType:'json',success:function(d){if(d.isSuccess){$(".js_text").val(d.data);}},error:function(){alert("請求超時！");}})})})</script></head><body><div><input type="text" class="js_text" value="" /><input type="button" class="js_btn" value="獲取當前時間" /></div></body> </html>在IE8下首次運行結果如下圖。之后再去點擊“獲取當前時間”時，得到的結果都和第一次點擊一樣。
?
在不斷測試后發現，出現這種現象是因為IE8瀏覽器的緩存問題，在清除緩存后重新點擊，這時候就會返回正常的結果顯示在頁面上。IE8瀏覽器的緩存機制會將第一次發送請求的響應返回的結果保存下來，之后我們再去發送相同的請求時IE8會將第一次請求保存下來的結果反復的使用。
翻閱資料并加上自己測試驗證后，總結出了兩種可用的解決辦法。
第一種解決辦法：
在Ajax方法中增加一條發送到服務器的數據，該數據為Math對象方法random()生成的 0 ~ 1 之間的隨機數，服務器端不對數據做任何處理。
data:{r:Math.random()}修改后的JS代碼如下：
<script>$(function(){$(".js_btn").click(function(){$.ajax({type:'GET',url:'getRealTime',data:{r:Math.random()},dataType:'json',success:function(d){if(d.isSuccess){$(".js_text").val(d.data);}else{alert(d.message);}},error:function(){alert("請求超時！");}})})}) </script>每次執行請求的內容如下：
?
點擊“獲取當前時間”后，每次向服務器端發送的請求內容并不一樣，這樣一來IE8就不會去獲取上次請求返回的結果，而是重新向后臺發送新的請求，這樣就解決了IE8每次發送相同請求Ajax時都會首先讀取緩存中內容的問題。
第二種解決辦法：
使用jQuery.ajaxSetup(name:value, name:value, …) 方法設置全局 AJAX 默認選項。?
通過這種辦法可以設置讓Ajax發送請求后得到響應返回的結果不寫入瀏覽器的緩存中。
$.ajaxSetup({ cache:false });修改后的JS代碼如下：
<script>$(function(){$.ajaxSetup({ cache:false });$(".js_btn").click(function(){$.ajax({type:'GET',url:'getRealTime',dataType:'json',success:function(d){if(d.isSuccess){$(".js_text").val(d.data);}else{alert(d.message);}},error:function(){alert("請求超時！");}})})}) </script>每次執行請求的內容如下：
?
我們可以看到，這樣做原理其實和第一種方式差不多，在設置Ajax返回數據不寫入緩存后，每次點擊“獲取當前時間”后，向服務器端發送的請求內容也是不一樣的，同理，這樣做也可以解決了IE8每次發送相同請求Ajax時都會首先讀取緩存中內容的問題。
總結
以上是生活随笔為你收集整理的IE8浏览器缓存问题导致Ajax的GET请求只能执行一次的解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 分布式 | Dubbo 架构设计详解
- 下一篇： JavaFX UI控件教程（二十）之HT