河源市网站建设公司,wordpress官方中文主题,wordpress获取文章内图片不显示,影视类网站建设转载自 IE8浏览器缓存问题导致Ajax的GET请求只能执行一次的解决办法
最近在测试兼容性问题的时候发现#xff0c;使用Ajax的GET请求向后台获取响应结果时#xff0c;如果是IE8浏览器#xff0c;第一次发送请求时会得到正常的返回结果#xff0c;然后当再去发送相同请求访…转载自 IE8浏览器缓存问题导致Ajax的GET请求只能执行一次的解决办法
最近在测试兼容性问题的时候发现使用Ajax的GET请求向后台获取响应结果时如果是IE8浏览器第一次发送请求时会得到正常的返回结果然后当再去发送相同请求访问后台时得到的结果总是第一次请求返回的结果。IE11、Chrome、Firefox都是正常的只有IE8会出现这种现象。
为了重现遇到的这种现象自己动手写了一个非常简单的小例子。
/*** 获取当前时间* param request* return*/
RequestMapping(value/getRealTime)
ResponseBody
public ResultBeanString getCalendarInfo(HttpServletRequest request) {ResultBeanString result new ResultBeanString();Date now new Date();SimpleDateFormat sdf new SimpleDateFormat(yyyy-MM-dd HH:mm:ss);result.setProperties(true, 获取当前时间成功, sdf.format(now));return result;
}
!DOCTYPE HTML
htmlheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedge,chrome1titleAjax测试/titlescript srchttp://static.blog.csdn.net/scripts/jquery.js typetext/javascript/scriptscript$(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/headbodydivinput typetext classjs_text value /input typebutton classjs_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时都会首先读取缓存中内容的问题。
