在JSP页面下使用AJAX实现用户名存在的检测

	function init(){
		document.getElementById("username").focus();
	}
	function validate(userfield) {
		if (trim(userfield.value).length != 0) {
			var xmlHttpRequest = null;
			var url = "../AccountIsExistServlet?account=" + userfield.value;
			var usermsg = document.getElementById("usermsg");
			if (window.XMLHttpRequest) {//表示当前浏览器不是IE
				xmlHttpRequest = new XMLHttpRequest();
			} else if (window.ActiveXObject) {
				xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlHttpRequest.open("GET", url, true);//设置请求方式为GET，设置请求的URL，设置为异步提交
			xmlHttpRequest.onreadystatechange = function(){//将方法地址复制给onreadystatechange属性
				if(xmlHttpRequest.readyState == 4){//Ajax引擎状态为成功
					if(xmlHttpRequest.status == 200){//HTTP协议状态为成功
						if(trim(xmlHttpRequest.responseText) != ""){
							usermsg.innerHTML = "" + trim(xmlHttpRequest.responseText) + "";
							userfield.focus();
						}else{
							usermsg.innerHTML = "恭喜您，用户名可以使用。 ";
						}
					}else{
						alert("请求失败，错误码=" + xmlHttp.status);
					}
				}
			};
			xmlHttpRequest.send(null);//将设置信息发送到Ajax引擎
		}else{
			usermsg.innerHTML = "";
		}
	}

    *用户名：
    
    

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.gas.bo.UserInfoBO;

@WebServlet("/AccountIsExistServlet")
public class AccountIsExistServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// 阻止缓存
		response.setContentType("text/xml");
		response.setHeader("Cache-Control", "no-store"); // HTTP1.1
		response.setHeader("Pragma", "no-cache"); // HTTP1.0
		response.setDateHeader("Expires", 0); // prevents catching at proxy
												// server

		PrintWriter out = response.getWriter();
		
		//js传过来的汉字进行转码，避免汉字的时候会出现乱码
		String account = request.getParameter("account");
		UserInfoBO userInfoBO = new UserInfoBO();
		boolean b = userInfoBO.accountIsExist(account);
		if (b) {
			out.print("用户名已存在，请重新输入。");
		}
	}

}

第一部分js，ajax。第二部分html。第三部分servlet。。。有不理解的地方继续问我。

使用jquery
用它里面的validate.js插件。
$().ready(function(){
$(form).validate({

rulus:{

},

messages:{

},
.....

});

});

楼主自己百度下吧，这里就不细说了

$(document).ready(function(){
//用户名失去焦点
$('#name').blur(function(){
goinName();
}
)
}

);
//验证用户名
function goinName(){
$('#name').css('border','1px solid green');
$('#nameError').html("");
}
function outName(){
var name=$('#name').val(); //获得用户名
var tager=/^[a-z,A-z][a-z,A-Z,0-9]{1,23}$/; //处理乱码
if(!tager.test(name)){
$('#name').css('border','1px solid red');
$('#nameError').html("用户名不合法");
$('#nameError').css('color','red');
i=1;

}

else{
$.ajax({
type: "POST",
url: "checkNameuser.action",
data: "user.vuUserName='"+name,
success: function(date){
date=date.replace(/^\s+|\s+$/g,"");
if(date=="true"){
$('#nameError').html("用户名可用");
i=0;
}
else{
$('#nameError').html("用户名已被占用");
$('#nameError').css('color','red');
i=1;
}
}
});
}
}