本文共 2504 字，大约阅读时间需要 8 分钟。

一、采用原生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()

   
		    
     
			      
用户名:
			      
 		     
		     
			      
密码
			      
		     
		     
			      
		     
	    
   

（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 ="用户名已存在";				}				else{					document.getElementById("span01").innerHTML ="用户可用";				}			}		}				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("用户名已被注册");			}else{				//alert("用户名可用");				$("#span01").html("用户名可以使用");			}		} );		//3. 输出响应的数据到页面上。	}

不需要创建对象，就可以直接实现checkUserName()方法来实现对用户名的校验

浏览效果： 没有被注册过的用户名：

已经被注册过的用户名：

转载地址：http://tfkti.baihongyu.com/