今天在做一个需求的时候,发现在IE
下面通过AJAX
获取到的数据和服务器里面的数据不一致,最开始我以为是数据库连接工具的事物没有提交,但是当我提交事物以后,这个问题照样继续,然后我打开IE
的开发者工具,将这个AJAX
的请求捕获,发现在IE
下面他从缓存中获取了数据,没有发起新的请求。
原因
使用GET
方法时,如果请求参数相同,则浏览器会认为是同一个请求并且请求结果是一样的,所以存在缓存那么浏览器就优先返回缓存的结果,使用POST
则不会出现这种情况。
解决方法:
- 使用
POST
方法。 - 在请求参数的后面加一个随机数或者时间戳。
var url = "/webtest/Data.jsp?t=" + new Date().getTime();
- 后台的响应设置缓存控制的响应头。对于jsp或者servlet设置如下。
response.setHeader("Cache-Control", "no-cache,no-store");
4.在使用jQUery下使用jQuery.ajax( url [, settings ])
,设置cache参数为false。
5.其他方法待续。
测试用JSP代码
测试用前台页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<body>
<h2>Hello World!</h2>
<script type="text/javascript" src="/webtest/static/jquery.min.js"></script>
<button id="btn">获取数据</button>
<hr>
<h2 id="show"></h2>
</body>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
var url = "/webtest/Data.jsp?";
$.get(url, function(res) {
$("#show").text(JSON.stringify(res));
}, 'json');
});
});
</script>
</html>
返回数据页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
response.setContentType("application/json");
String data = "300";
String name = "oops";
String json = "{"name"" + ":"" + name + """ + ","data"" + ":" + data + "}";
out.write(json);
%>