【Ajax技术】解决XHR与图片缓存问题

简介:
在这个Servlet中,我们在session中记录了验证用户名这个操作的次数。
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServer extends HttpServlet {

	 protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
	        doGet(httpServletRequest, httpServletResponse);
	 }

	 protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
	        try{

	            httpServletResponse.setContentType("text/html;charset=utf-8");
	            PrintWriter out = httpServletResponse.getWriter();

	            //inte用来记录验证次数
	            Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");
	            int temp = 0;
	            if (inte == null) {
	                temp = 1;
	            } else {
	                temp = inte.intValue() + 1;
	            }
	            httpServletRequest.getSession().setAttribute("total",temp);

	            //1.取参数
	            String old = httpServletRequest.getParameter("name");
	            //String name = new String(old.getBytes("iso8859-1"),"UTF-8");
	            String name = URLDecoder.decode(old,"UTF-8");
	            System.out.println(old+" oooooooooooooooooo");
	            //2.检查参数是否有问题
	            if(old == null || old.length() == 0){
	                out.println("用户名不能为空");
	            } else{

	                if(name.equals("hpu")){
	                    //4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段,而不是将一个新的页面发送给用户
	                    //写法没有变化,本质发生了改变
	                    out.println("用户名[" + name + "]已经存在,请使用其他用户名, " + temp);
	                } else{
	                    out.println("用户名[" + name + "]尚未存在,可以使用该用户名注册, " + temp);
	                }
	            }
	        } catch(Exception e){
	            e.printStackTrace();
	       } 
	 }
}

静态页面
ajaxXml.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>用户校验ajax实例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
    <script type="text/javascript" src="js/verify.js"></script>
  </head>
  
  <body>
    <h1> 用户校验ajax实例</h1><br>
    请输入用户名:<br/>
    <!-- ajax不需要使用表单进行数据提交,因此不用写表单标签 -->
    
    <!-- ajax不需要name属性,只需要一个id的属性 -->
    <input type="text" id="username"/>
    <input type="button" value="校验" onclick="verify()"/>
    <!-- 这个div用于存放服务器返回的信息,开始为空 -->
    <!-- id属性定义是为了利用dom的方式找到某一个节点,进行操作 -->
    <div id="result">
    
    </div>
    
  </body>
</html>

verify.js:
function verify(){
	var jqueryObj=$("#username");
	var userName=jqueryObj.val();
	$.get("AjaxServer?name="+userName,null,callback);

}

function callback(data){
	var resultObj=$("#result");
	resultObj.html(data);
}

但是,当我们在页面输入诸如:"123"并点击提交的时候,第一次会给我们这样一个结果:
用户名[123]尚未存在,可以使用该用户名注册, 1

我们再次点击提交的时候,返回的结果还和上次一样,末尾的验证次数还是1。
这说明浏览器去拿了缓存,也就是你这次的请求和上次的一样,那么我就不再去向服务器端发出申请,直接引用上次已经加载过的界面。

当然,这对于网站的访问而言是好事,它节省了带宽,但是对于开发的时候来说,某些情况下就有必要避免这种机制,避免引发一些刷新错误,这时候我们就要"骗"浏览器。

那么浏览器是什么时候拿缓存的呢?
只要发现与服务器交互的内容(请求的url路径和post、get信息)与上次一样。即是在浏览器看来,只要地址一样就去取缓存。
我们就让两次请求的地址不一样,我们在每次请求上加一个"时间"信息。

改写使用Jquery来实现ajax的js文件:
verify.js:
function verify(){
	var jqueryObj=$("#username");
	var userName=jqueryObj.val();
	$.get("AjaxServer?name="+userName,null,callback);
}

function callback(data){
	var resultObj=$("#result");
	resultObj.html(data);
}

//给URL加一个时间戳,骗过浏览器,不读取缓存
function convertURL(url){
	
	//获取时间戳
	var timstamp=(new Date()).valueOf();
	//将时间戳信息拼接到url上
	if(url.indexOf("?")>0){
		url=url+"&t="+timstamp;
	}else{
		url=url+"?t="+timstamp;
	}
	return url;
}

这样,就可以保证每次发出的url请求地址与上次不一样,让浏览器不去使用缓存来达到我们的效果

转载请注明出处:http://blog.csdn.net/acmman/article/details/47755539

相关文章
|
19天前
|
JSON 前端开发 JavaScript
java-ajax技术详解!!!
本文介绍了Ajax技术及其工作原理,包括其核心XMLHttpRequest对象的属性和方法。Ajax通过异步通信技术,实现在不重新加载整个页面的情况下更新部分网页内容。文章还详细描述了使用原生JavaScript实现Ajax的基本步骤,以及利用jQuery简化Ajax操作的方法。最后,介绍了JSON作为轻量级数据交换格式在Ajax应用中的使用,包括Java中JSON与对象的相互转换。
33 1
|
1月前
|
存储 缓存 数据库
缓存技术有哪些应用场景呢
【10月更文挑战第19天】缓存技术有哪些应用场景呢
|
1月前
|
存储 缓存 运维
缓存技术有哪些优缺点呢
【10月更文挑战第19天】缓存技术有哪些优缺点呢
|
2月前
|
存储 缓存 NoSQL
解决Redis缓存击穿问题的技术方法
解决Redis缓存击穿问题的技术方法
74 2
|
2月前
|
存储 缓存 Java
在Spring Boot中使用缓存的技术解析
通过利用Spring Boot中的缓存支持,开发者可以轻松地实现高效和可扩展的缓存策略,进而提升应用的性能和用户体验。Spring Boot的声明式缓存抽象和对多种缓存技术的支持,使得集成和使用缓存变得前所未有的简单。无论是在开发新应用还是优化现有应用,合理地使用缓存都是提高性能的有效手段。
41 1
|
3月前
|
缓存 NoSQL Java
SpringBoot的三种缓存技术(Spring Cache、Layering Cache 框架、Alibaba JetCache 框架)
Spring Cache 是 Spring 提供的简易缓存方案,支持本地与 Redis 缓存。通过添加 `spring-boot-starter-data-redis` 和 `spring-boot-starter-cache` 依赖,并使用 `@EnableCaching` 开启缓存功能。JetCache 由阿里开源,功能更丰富,支持多级缓存和异步 API,通过引入 `jetcache-starter-redis` 依赖并配置 YAML 文件启用。Layering Cache 则提供分层缓存机制,需引入 `layering-cache-starter` 依赖并使用特定注解实现缓存逻辑。
1058 1
SpringBoot的三种缓存技术(Spring Cache、Layering Cache 框架、Alibaba JetCache 框架)
|
3月前
|
前端开发 Java UED
告别页面刷新时代:Struts 2 Ajax技术揭秘,轻松实现动态加载,Web应用焕然一新!
【8月更文挑战第31天】在Web应用开发中,用户体验至关重要。为减少页面刷新带来的不适,Ajax技术应运而生。Struts 2作为流行的Java EE框架,通过内置的Ajax支持简化了无刷新页面动态加载的实现。本文通过对比传统请求响应模式,展示了Struts 2如何轻松实现Ajax功能,提升了用户体验和开发效率,并灵活地实现了数据交换。然而,使用Ajax时还需注意SEO和跨域请求等局限性。
44 0
|
3月前
|
存储 缓存 NoSQL
【性能飙升的秘密】FastAPI应用如何借助缓存技术实现极速响应?揭秘高效Web开发的制胜法宝!
【8月更文挑战第31天】FastAPI是一个高性能Web框架,利用Starlette和Pydantic实现高效API构建。本文介绍如何通过缓存提升FastAPI应用性能,包括使用`starlette-cache[redis]`实现Redis缓存,以及缓存一致性和缓存策略的注意事项。通过具体示例展示了缓存的配置与应用,帮助开发者构建更高效的Web应用。
227 0
|
4月前
|
存储 缓存 算法
深入了解Memcached:缓存技术的利器
Memcached是一个开源的高性能分布式内存缓存系统,用于加速动态Web应用。它通过将数据库查询结果、API调用结果或其他数据缓存到内存中,减少对数据库的访问频率,从而提高应用的响应速度。本文详细介绍了Memcached的基本原理、架构、安装配置、使用方法、测试方法以及应用场景。通过Memcached,开发者可以有效提升Web应用的性能,减少数据库负载,改善用户体验。
60 5
|
4月前
|
存储 缓存 NoSQL
Java中的内存数据库与缓存技术
Java中的内存数据库与缓存技术