Ajax篇--01 Ajax、缓存问题

最新推荐文章于 2020-03-26 14:14:57 发布

mind_programmonkey

最新推荐文章于 2020-03-26 14:14:57 发布

阅读量331

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/mind_programmonkey/article/details/80149741

版权

javaweb的学习路径同时被 2 个专栏收录

84 篇文章 1 订阅

订阅专栏

javaweb封神之路

54 篇文章 7 订阅

订阅专栏

Ajax篇--01 Ajax

1、Ajax是什么？（asynchrous javascript and xml）

是一种用来改善用户体验的技术，其本质是利用游览器提供的一个特殊对象（XMLHttpRequest，也可称之为ajax对象）向服务器发送异步请求。服务器返回部分数据（通常不需要返回完整页面），游览器利用这些数据对当前页面做部分更新，整个过程，页面无刷新，不打断用户的操作。

注：异步请求是在发送请求的同时，游览器不会销毁当前页面，用户仍然可以对当前页面做其他操作。

2.如何获得Ajax对象？

//获得ajax对象
function getXhr(){
	var xhr=null;
	if(window.XMLHttpRequest){
		//非IE游览器
		xhr=new XMLHttpRequest();
	}else{
		xhr=new ActiveXObject("Microsoft.XMLHttp");
	}
	return xhr;
}

3.Ajax对象的几个重要属性？

a.onreadystatechange：用来绑定一个事件处理函数，用来处理readystatechange事件。

注：当ajax对象的readystate属性值发生了任何改变（比如从0变成了1），就会产生readystatechange事件。

b.readyState:有五个值（0,1,2,3,4），表示ajax对象与服务器通信的状态。其中，当值为4时，表示ajax对象已经获得了服务器返回的所有的数据。

c.responseText:获得服务器返回的文本数据

d.responseXML：获得服务器返回的xml数据

e.status:获得状态码

4.编程步骤（以一个注册为例）

<%@ page contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript" src="js/ajax.js"></script>
	<script type="text/javascript">
		function check_adminCode() {
			//step1:先获得ajax对象
			var xhr=getXhr();
			//step2：发送请求;
			xhr.open('get','check_admin.do?adminCode='+$F('adminCode'),true);
			xhr.onreadystatechange=function(){
				//step4:处理服务器返回的数据
				if(xhr.readyState==4){
					//获得服务器返回的数据
					var text=xhr.responseText;
					//更新页面
					$('adminCode_msg').innerHTML=text;
				}
			};
			xhr.send(null);
		}
	</script>
</head>
<body style="font-size:30px;">
	<form action="" method="post">
		账号:<input name="adminCode" id="adminCode" οnblur="check_adminCode();"/><span id="adminCode_msg"></span><br>
		密码:<input name="pwd" type="password"/><br>
		<input type="submit" value="确定">
	</form>
</body>
</html>

ajax.js

//依据id查找节点
function $(id){
	return document.getElementById(id);
}
//依据id查找节点，然后返回节点的value
function $F(id){
	return $(id).value;
}
//获得ajax对象
function getXhr(){
	var xhr=null;
	if(window.XMLHttpRequest){
		//非IE游览器
		xhr=new XMLHttpRequest();
	}else{
		xhr=new ActiveXObject("Microsoft.XMLHttp");
	}
	return xhr;
}

ActionServlet.java

//依据id查找节点
function $(id){
	return document.getElementById(id);
}
//依据id查找节点，然后返回节点的value
function $F(id){
	return $(id).value;
}
//获得ajax对象
function getXhr(){
	var xhr=null;
	if(window.XMLHttpRequest){
		//非IE游览器
		xhr=new XMLHttpRequest();
	}else{
		xhr=new ActiveXObject("Microsoft.XMLHttp");
	}
	return xhr;
}

5.缓存问题

（1）什么是缓存问题？

当使用IE游览器发送get请求时，游览器会查看请求地址是否访问过，如果访问过，则不再发送新的请求，而是显示第一次访问的结果。（也就是说，会将第一次的请求结果缓存下来）。

（2）如何解决？

在请求地址后面添加一个随机数

6.以post方式提交

<%@ page contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript" src="js/ajax.js"></script>
	<script type="text/javascript">
		function check_adminCode() {
			//step1:先获得ajax对象
			var xhr=getXhr();
			//step2：发送请求;
			xhr.open('post','check_admin.do',true);
			xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
			xhr.onreadystatechange=function(){
				//step4:处理服务器返回的数据
				if(xhr.readyState==4){
					//获得服务器返回的数据
					var text=xhr.responseText;
					//更新页面
					$('adminCode_msg').innerHTML=text;
				}
			};
			xhr.send('adminCode='+$F('adminCode'));
		}
	</script>
</head>
<body style="font-size:30px;">
	<form action="" method="post">
		账号:<input name="adminCode" id="adminCode" οnblur="check_adminCode();"/><span id="adminCode_msg"></span><br>
		密码:<input name="pwd" type="password"/><br>
		<input type="submit" value="确定">
	</form>
</body>
</html>