原生ajax和JQuery实现异步对注册姓名的校验

一、采用原生ajax实现对用户注册的校验
1.创建一个servlet来实现逻辑
其中省略了数据库的连接操作以及CheckUser(name)方法

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			request.setCharacterEncoding("UTF-8");
			//收到来自网页的用户名
		String name  = request.getParameter("name");
		//调用CheckUser(name)方法对改姓名查重
		UserDao userDao = new UserDaoImpl();
			boolean checkUser = userDao.CheckUser(name);
			//对前段返回值
			if(checkUser) {
				response.getWriter().println(1);
			}
			else
				response.getWriter().println(2);
		} catch (Exception e) {
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

2.前段网页注册用户代码
（1）注册表格的创建
解释： οnblur="checkUserName()，onblur是鼠标失去焦点的时候执行的行为，也就是鼠标移开用户名这一栏，我这里设置了失去焦点实现一个方法checkUserName()

<table border="1" width="500">
		<tr>
			<td>用户名:</td>
			<td><input type="text" name="name" id="name"  onblur="checkUserName()"><span id="span01"></span></td> 
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="text" name=""></td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" value="注册"></td>
		</tr>
	</table>

（2）ajax对象的创建
死代码，不需要记忆

function ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }		
		return xmlHttp;
	 }

（3）对上面的checkUserName()方法的实现

function checkUserName(){
		//获取输入框的值 document 整个网页
		var name = document.getElementById("name").value;
		//1. 创建对象
		var request  = ajaxFunction();
		//2. 发送请求
		request.open("POST","/ajaxTest/CheckUserNameServlet",true); 
		//注册状态改变监听，获取服务器传送过来的数据
		request.onreadystatechange =function(){
			if(request.readyState ==4&&request.status==200){
			//设置变量data接受后端传来的返回值
				var data = request.responseText;
				if(data ==1){
					document.getElementById("span01").innerHTML ="<font color = 'red'>用户名已存在</font>";
				}
				else{
					document.getElementById("span01").innerHTML ="<font color = 'green'>用户可用</font>";
				}
			}
		}
		
		request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		request.send("name="+name);
	}

二、采用jQuery的方法来实现
前面的方法都不变，唯一改变的就是前段jsp里面的代码

function checkUserName() {
		//1. 获取输入框的内容
		var name = $("#name").val();
		
		//2. 发送请求
		$.post("/day16/CheckUserNameServlet" , {name:name} , function(data , status){
			//alert(data);
			if(data == 1){//用户名存在
				//alert("用户名存在");
				$("#span01").html("<font color='red'>用户名已被注册</font>");
			}else{
				//alert("用户名可用");
				$("#span01").html("<font color='green'>用户名可以使用</font>");
			}
		} );
		//3. 输出响应的数据到页面上。
	}

不需要创建对象，就可以直接实现checkUserName()方法来实现对用户名的校验
浏览效果：
没有被注册过的用户名：

已经被注册过的用户名：