IE8浏览器缓存问题导致Ajax的GET请求只能执行一次的解决办法
轉(zhuǎn)載自??IE8瀏覽器緩存問題導(dǎo)致Ajax的GET請求只能執(zhí)行一次的解決辦法
最近在測試兼容性問題的時候發(fā)現(xiàn)，使用Ajax的GET請求向后臺獲取響應(yīng)結(jié)果時，如果是IE8瀏覽器，第一次發(fā)送請求時會得到正常的返回結(jié)果，然后當(dāng)再去發(fā)送相同請求訪問后臺時，得到的結(jié)果總是第一次請求返回的結(jié)果。IE11、Chrome、Firefox都是正常的，只有IE8會出現(xiàn)這種現(xiàn)象。
為了重現(xiàn)遇到的這種現(xiàn)象，自己動手寫了一個非常簡單的小例子。
/*** 獲取當(dāng)前時間* @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, "獲取當(dāng)前時間成功", 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="獲取當(dāng)前時間" /></div></body> </html>在IE8下首次運(yùn)行結(jié)果如下圖。之后再去點(diǎn)擊“獲取當(dāng)前時間”時，得到的結(jié)果都和第一次點(diǎn)擊一樣。
?
在不斷測試后發(fā)現(xiàn)，出現(xiàn)這種現(xiàn)象是因為IE8瀏覽器的緩存問題，在清除緩存后重新點(diǎn)擊，這時候就會返回正常的結(jié)果顯示在頁面上。IE8瀏覽器的緩存機(jī)制會將第一次發(fā)送請求的響應(yīng)返回的結(jié)果保存下來，之后我們再去發(fā)送相同的請求時IE8會將第一次請求保存下來的結(jié)果反復(fù)的使用。
翻閱資料并加上自己測試驗證后，總結(jié)出了兩種可用的解決辦法。
第一種解決辦法：
在Ajax方法中增加一條發(fā)送到服務(wù)器的數(shù)據(jù)，該數(shù)據(jù)為Math對象方法random()生成的 0 ~ 1 之間的隨機(jī)數(shù)，服務(wù)器端不對數(shù)據(jù)做任何處理。
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>每次執(zhí)行請求的內(nèi)容如下：
?
點(diǎn)擊“獲取當(dāng)前時間”后，每次向服務(wù)器端發(fā)送的請求內(nèi)容并不一樣，這樣一來IE8就不會去獲取上次請求返回的結(jié)果，而是重新向后臺發(fā)送新的請求，這樣就解決了IE8每次發(fā)送相同請求Ajax時都會首先讀取緩存中內(nèi)容的問題。
第二種解決辦法：
使用jQuery.ajaxSetup(name:value, name:value, …) 方法設(shè)置全局 AJAX 默認(rèn)選項。?
通過這種辦法可以設(shè)置讓Ajax發(fā)送請求后得到響應(yīng)返回的結(jié)果不寫入瀏覽器的緩存中。
$.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>每次執(zhí)行請求的內(nèi)容如下：
?
我們可以看到，這樣做原理其實和第一種方式差不多，在設(shè)置Ajax返回數(shù)據(jù)不寫入緩存后，每次點(diǎn)擊“獲取當(dāng)前時間”后，向服務(wù)器端發(fā)送的請求內(nèi)容也是不一樣的，同理，這樣做也可以解決了IE8每次發(fā)送相同請求Ajax時都會首先讀取緩存中內(nèi)容的問題。
總結(jié)
以上是生活随笔為你收集整理的IE8浏览器缓存问题导致Ajax的GET请求只能执行一次的解决办法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 分布式 | Dubbo 架构设计详解
- 下一篇： 冬是什么结构 冬字是什么结构