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

发布时间：2020-12-16 01:53:21 所属栏目：百科来源：网络整理

导读：在这个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.servl

在这个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,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,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://www.52php.cn/article/p-cuheqtrc-bay.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!