jsp&xml ajax来传参注册界面用户名的实时检测

注册界面 ：Form表单提交 onsubmit="return checkForm()"     利用checkForm()来对Form进行在验证     不要忘记return

						/* 表单进行验证再进行提交*/
<form action="UserServlet" method="post" onsubmit="return checkForm()">
<input type="hidden" name="action" value="registe">
<h2>注册 <strong>用户</strong> </h2>
<label for="username">用户名</label>
<font color="red" id="user_nameMSG"></font>  /*提示消息：已存在、可注册、不为空*/
<input type="text" id="username" onblur="checkUname()" name="user_name" >
 
<label for="password">密码</label>
<input type="password" id="password" name="user_pass" >
<button type="submit">注册</button>
</form>

下方是js代码

<script type="text/javascript">
        	var checkUnameFlag=0;
        	function checkUname(){
        		var uname = document.getElementById("username").value;
        		if(uname != ""){
        			
        			$.ajax({
        				method:"POST",
        				url:"UserServlet",
        				async:true,
        				data:{
        					"action":"checkUname",
        					"user_name":uname
        				},
        				dataType:"json",
        				success:function(result){
        					//得到的直接就是json类型的结果
        					console.log(result);
        					
        					checkUnameFlag = result.msg_code;
        					document.getElementById("user_nameMSG").innerHTML=result.msg;
        				}
        				
        			})
        		}
        		console.log("开始测试...");
        	}
        	
        	function checkForm(){
        		var uname = document.getElementById("username").value;
        		if(uname == ""){
        			document.getElementById("user_nameMSG").innerHTML="用户名不能为空";
        			return false;
        		}else{
        			if(checkUnameFlag == 0)
        				return false;
        		}
        		return true;
        	}
</script>

利用 $.ajax({}) 代码，内部为json的格式，省略了用与xhr有关的操作

var xhr = new XMLHttpRequest();

xhr.open(method,uri,async);

xhr.onreadystatechange = checkun; /*readystatechange接收xhr.reayState响应*/

xhr.send();

 与之继续的是定义checkun函数

function checkun(){

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

//与上方success：的效果一样 ->成功的标志

}

}

在验证表单的操作：onsubmit="return checkForm()"

function checkForm(){
        		var uname = document.getElementById("username").value;
        		if(uname == ""){
        			document.getElementById("user_nameMSG").innerHTML="用户名不能为空";
        			return false;
        		}else{
        			if(checkUnameFlag == 0)
        				return false;
        		}
        		return true;
        	}

可以通过验证为true; 反之为false；