使用Ajax实现无刷新用户名验证和分页的效果（一）

Ajax是一种使用现有标准的新方法（异步JavaScript、XML），是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

一、同步与异步的区别？

同步：客户端请求服务器，等待响应再执行

异步：客户端请求Ajax引擎，Ajax再请求服务器，服务器响应到Ajax，客户端可以同时执行其他操作

二、XMLHttpRequest对象：

属性：responseText：获得字符串形式的响应数据。

    responseXML:获得XML形式的响应数据。

    onreadystatechange：存储函数（或函数名），当readyState属性改变时就会调用函数。

    status：响应的HTTP状态。

    statusText：HTTP状态说明。

    readyState：存有XMLHttpRequest状态。从0到4发生变化。

0：请求未初始化

1：服务器连接已经建立

2：请求已接受

3：请求处理中

4：请求已完成，且响应已就绪

方法：open(method,url,async)规定请求的类型、URL以及是否异步处理请求。

method:请求的类型：GET、POST

url:文件在服务器上的位置

async:  true（异步）或false（同步）

    send(data)将请求发送到服务器。

data:仅用于post请求

    setRequestHeader(header,value)向请求添加HTTP头

header:规定头的名称

value：规定头的值

    getResponseHeader()获取响应头

三、使用AJAX步骤：

1.创建XMLHttpRequest对象

a) var xhr = new XMLHttpRequest();  //IE7及以后

b) var xhr = new ActiveXObject("Microsoft.XMLHTTP");  //IE5、IE6

2.设置回调函数

xhr.readystatechange = callback;

3.设置xhr的相关方法

xhr.open("post",url,true);

xhr.setRequestHeader("","");

xhr.send(data);

4.编写回调函数处理结果

function callback(){

if(xhr.readystate==4 && xhr.status==200){

//获取结果

var xml = xhr.responseXML;

}

}

四、代码实现

1.js

<script type="text/javascript">
		window.οnlοad=function(){
			var email = document.getElementById("email");
			//添加失去焦点事件
			email.οnblur=function(){

<span style="white-space:pre">				</span>//调用checkEmail(email)函数
				checkEmail(this);				
			};
		};
		function checkEmail(email){
			//1.创建XMLHttpRequest对象
			var xhr = createXHR();
			//2.设置回调函数
			xhr.onreadystatechange=function(){
				//alert(xhr.readyState);
				//判断readyState是否完成
				if(xhr.status==200 && xhr.readyState==4){
					//获取响应的文本
					//alert(xhr.responseText);
					var error = document.getElementById("error");
					if(xhr.responseText=='true'){
						error.innerHTML = "邮箱已存在！";
					}else{
						error.innerHTML = "邮箱可以注册！";
					}
				}
			};
			//3.设置相关方法
			/*
			//GET请求
			var url = "user.do?email="+email.value;
			xhr.open("GET",url,false);//同步
			xhr.send(null);
			*/
			//POST请求
			var url = "user.do";
			xhr.open("POST",url,false);
			//设置请求头
			xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			//发送数据
			xhr.send("email="+email.value+"&time="+new Date().getTime());
			
		}

<span style="font-size: 18.018px;"><span style="white-space: pre;">	</span>	//创建XMLHttpRequest对象</span>

<pre name="code" class="html" style="font-size: 18.018px;">		function createXHR(){
			if(window.XMLHttpRequest){
				return new XMLHttpRequest();
			}else if(window.ActiveXObject){
				return new ActiveXObject("Microsoft.XMLHTTP");
			}else{
				alert("你的浏览器不支持AJAX！");
				return null;
			}
		}
	</script>

</pre><pre name="code" class="html">2.servlet

<pre name="code" class="java">@WebServlet("/user.do")
public class UserServlet extends HttpServlet {
	private UserManager userManager = new UserManager();

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 设置请求的编码
		req.setCharacterEncoding("UTF-8");
		// 获取参数
		String email = req.getParameter("email");
		//调用业务层的方法
		boolean flag = userManager.checkEmail(email);
		//输出的内容类型,text/plain普通文本，text/html页面
		resp.setContentType("text/plain");
		PrintWriter out = resp.getWriter();
		//输出结果
		out.print(flag);
		//释放资源
		out.close();

	}
}

		//创建XMLHttpRequest对象
		function createXHR(){
			if(window.XMLHttpRequest){
				return new XMLHttpRequest();
			}else if(window.ActiveXObject){
				return new ActiveXObject("Microsoft.XMLHTTP");
			}else{
				alert("你的浏览器不支持AJAX！");
				return null;
			}
		}
	</script>