【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

相关文章
|
1月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
57 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
2月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
22 0
|
2月前
|
XML JSON 前端开发
JavaWeb----Ajax技术
JavaWeb----Ajax技术
57 0
|
3月前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
|
2月前
|
存储 缓存 NoSQL
作者推荐 | 企业级缓存技术解析,你必须知道的“9“大技术问题与常见误区
本文将深入剖析导致上述问题的九大根源,并提供相应的解决方案。请注意,本文以Java为例进行代码演示,但同样适用于其他技术平台的朋友。只需根据相应技术平台替换相关代码即可!
456 0
作者推荐 | 企业级缓存技术解析,你必须知道的“9“大技术问题与常见误区
|
3天前
|
存储 缓存 运维
软件体系结构 - 缓存技术(5)Redis Cluster
【4月更文挑战第20天】软件体系结构 - 缓存技术(5)Redis Cluster
136 10
|
3天前
|
存储 缓存 NoSQL
软件体系结构 - 缓存技术
【4月更文挑战第20天】软件体系结构 - 缓存技术
36 7
|
28天前
|
缓存 应用服务中间件 数据库
【分布式技术专题】「缓存解决方案」一文带领你好好认识一下企业级别的缓存技术解决方案的运作原理和开发实战(多级缓存设计分析)
【分布式技术专题】「缓存解决方案」一文带领你好好认识一下企业级别的缓存技术解决方案的运作原理和开发实战(多级缓存设计分析)
33 1
|
1月前
|
存储 NoSQL Redis
陌陌技术分享:陌陌IM在后端KV缓存架构上的技术实践
在本文中,陌陌数据库负责人冀浩东将聚焦探讨陌陌的 KV 系统架构选型思路,深入解析如何进行此类系统的甄选决策,同时进一步分享陌陌团队在采用 OceanBase(OBKV)过程中所经历的探索与实践经验。
33 0
|
3月前
|
JSON 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)