ssm用ajax异步验证用户名是否存在

ajax异步验证可以使页面无需刷新，即可使页面与服务器通信，尤其是注册页面，能给用户非常好的体验。在此记录下，方便大家使用，使用框架为（MyBatis+SpringMVC+Spring）。

jsp页面：

<input type="text" name="name"  id="name" placeholder="请输入用户名" required onchange="validateName()">  

<script type="text/javascript">
	var xmlHttp;
	//创建Ajax对象
    function createXMLHttpRequest() {
        if (window.ActiveXObject) {
        	//IE6
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }else if (window.XMLHttpRequest) {
        	//W3C浏览器和IE7及其以上版本
            xmlHttp = new XMLHttpRequest();                
        }
    }
    //验证用户名
    function validateName() {
	//调用创建Ajax方法
        createXMLHttpRequest(); 
	//获取用户名的值
        var name = document.getElementById("name");
	//将内容发送给哪个url处理
        var url = "${pageContext.request.contextPath }/seller/findBrandByName?name=" + escape(name.value);    
	//创建HTTP请求（请求方式，请求URL，是否异步）
        xmlHttp.open("GET", url, true);
	//状态改变时
        xmlHttp.onreadystatechange = function(){
		//如果都ok
    		if(xmlHttp.readyState==4 && xmlHttp.status==200){
    			// 用户名验证,以字母开头，后面内容可以是字母，数字，下划线，且6~20位
    			var nameReg = /^[a-zA-Z][\w]{5,19}$/;
    			if (nameReg.test(document.getElementById('name').value) == false) {
    				document.getElementById('nameInfo').innerText = "用户名必须6~20位字母数字下划线，且只能以字母开头";
    			}else{
    				var color ="red";
        			var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
                    var passed = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
        			if(passed=="true"){
        				color ="green";
        			}
        			document.getElementById("nameInfo").innerHTML = "<span style=color:"+color+">"+message+"</span>";
        		}
    		}
    	};
        xmlHttp.send(null);
    }
  	//验证身份证号
    function validateID() {
		//调用创建Ajax方法
        createXMLHttpRequest(); 
		//获取用户名的值
        var idnumber = document.getElementById("idnumber");
		//将内容发送给哪个url处理
        var url = "${pageContext.request.contextPath }/seller/findBrandByID?idnumber=" + escape(idnumber.value);    
		//创建HTTP请求（请求方式，请求URL，是否异步）
        xmlHttp.open("GET", url, true);
        xmlHttp.onreadystatechange = function(){
    		if(xmlHttp.readyState==4 && xmlHttp.status==200){
    			// 身份证验证
    			var idnumberReg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/;
    			if (idnumberReg.test(document.getElementById('idnumber').value) == false) {
    				document.getElementById('idnumberInfo').innerText = "身份证号有误，请输入正确的身份证号";
    			}else{
    				var color ="red";
        			var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
                    var passed = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
        			if(passed=="true"){
        				color ="green";
        			}
        			document.getElementById("idnumberInfo").innerHTML = "<span style=color:"+color+">"+message+"</span>";
        		}
    		}
    	};
        xmlHttp.send(null);
    }
</script>

    controller：

         /**
	 * 根据用户名查询
	 * @throws IOException 
	 */
	@RequestMapping("/findBrandByName")
	public void findBrandByName(String name,HttpServletRequest request,HttpServletResponse response) throws IOException {
		//初始化
		String message="";
		boolean flag=true;
		//查询是否有输入的用户名
		int rel = brandService.selectOnlinNameAndBrandName(name);
		//如果为1（没有该用户名）即可用
		if(rel==1){
			message="用户名可用";
		}else{
			flag=false;
			message="用户名已经存在，请使用其他用户名";
		}
		//System.out.println(message);
		//设置返回数据为utf-8
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();  
		 out.println("<response>");
	     out.println("<passed>" + Boolean.toString(flag) + "</passed>");
	     out.println("<message>" + message + "</message>");
	     out.println("</response>");
	}