ajax缓存问题

Posted Oh,L.E.D

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax缓存问题相关的知识,希望对你有一定的参考价值。

今天在做一个需求的时候,发现在IE下面通过AJAX获取到的数据和服务器里面的数据不一致,最开始我以为是数据库连接工具的事物没有提交,但是当我提交事物以后,这个问题照样继续,然后我打开IE的开发者工具,将这个AJAX的请求捕获,发现在IE下面他从缓存中获取了数据,没有发起新的请求。

原因

使用GET方法时,如果请求参数相同,则浏览器会认为是同一个请求并且请求结果是一样的,所以存在缓存那么浏览器就优先返回缓存的结果,使用POST则不会出现这种情况。

解决方法:

  1. 使用POST方法。
  2. 在请求参数的后面加一个随机数或者时间戳
var url = "/webtest/Data.jsp?t=" + new Date().getTime();
  1. 后台的响应设置缓存控制的响应头。对于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);
%>

以上是关于ajax缓存问题的主要内容,如果未能解决你的问题,请参考以下文章

Android获取各个应用程序的缓存文件代码小片段(使用AIDL)

Swift新async/await并发中利用Task防止指定代码片段执行的数据竞争(Data Race)问题

Swift新async/await并发中利用Task防止指定代码片段执行的数据竞争(Data Race)问题

Javascript代码片段在drupal中不起作用

如何缓存片段视图

前端面试题之手写promise