验证用户名，AJAX步骤示例

荒唌Blog

2016-10-05

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册</title>
<style type="text/css">
	*{margin:0px;padding:0px;}
	#loginDiv{width:500px;  oveflow:hidden;border:1px solid #ccc;margin:30px auto;background-color:#eee;}
	.top{height:40px;line-height:40px;border-bottom:1px solid #ccc;text-indent:1em;font-weight:bold;}
	#loginDiv p{line-height:24px;height:24px;margin:14px;}
	#btn{padding:5px 10px;cursor:pointer;margin-left:66px;}
	#msg{line-height:24px;height:24px;margin:14px;}
	.red{color:red;}
	.green{color:green;}
</style>
<script type="text/javascript" >
	 window.onload = function(){
		var username = document.getElementById("username");
		var username_msg = document.getElementById("username_msg");
		
		//创建XMLHttpRequestc对象
		var  xmlHttp=false;
		//获取XMLHttpRequest对象， 并兼容浏览器
		function getXMLHttp(){
			if(window.ActiveXObject){//IE浏览器
				try{
					xmlHttp = new ActiveXobject("Msxml2.XMLHTTP");
				}catch(e){
					try{
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					}catch(e){
						alert("您的IE浏览器不支持XMLHttp");
					}
				}
			}else if(window.XMLHttpRequest){//其他浏览器，如mozilla的firefox或者 Netscape...
					xmlHttp = new XMLHttpRequest();
				if(xmlHttp.overrideMimeType){//firefox的特殊版本需要设置overrideMimeType 7
					xmlHttp.overrideMimeType("text/html");
				}
			}else{
				alert("您的浏览器不支持XMLHTTP");
			}
		};
		
		function processResponse(){
			
			alert("XMLHttp.readyState交互状态码---> "+xmlHttp.readyState+"\n"+
			"xmlHttp.status，HTTP状态码--->  "+xmlHttp.status);
			
			if( xmlHttp.readyState == 4){
				if(xmlHttp.status==200){
					if( xmlHttp.responseText.match(/OK/)){
						username_msg.innerHTML = "<span class='green'>恭喜，用户名可以使用</span>";
					}else if( xmlHttp.responseText.match(/ERROR/) ){
						username_msg.innerHTML = "<span class='red'>用户名已存在，请更换</span>";
					}
				}else{
      				alert("你所请求的页面有异常。");
   				}
			}else{
				//请等待...
				username_msg.innerHTML = "<span class='red'>请等待...</span>";
			}
		};
		
		//采用AJAX技术异步验证 username
		username.onblur = function(){
			if(username.value == ""){
				alert("请输入用户名");
				return;
			}else{
				//ajax验证
				getXMLHttp();
				//open();创建一个新的http请求，并指定此请求的方法、URL以及验证信息
				//true:异步方式发送 异步:请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
				//false：同步方式发送，同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
				xmlHttp.open("GET","deal.jsp?username="+username.value,true);
				xmlHttp.onreadystatechange = processResponse;
				xmlHttp.send(null);
			}
				//get方式
				//xmlHttp.open("GET","deal.jsp?username="+username.value,true);
				//xmlHttp.send(null);
				
				//POST方式
				//xmlHttp.open("POST","deal.jsp",true);
				//xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				//xmlHttp.send("username="+username.value);
		};
		

	 };
</script>
</head>
<body>
	<div id="loginDiv">
		<div class="top">会员注册</div>
		<p>用户名：<input type="text" id="username" ><span id="username_msg"></span></p>
		<p>密&nbsp;&nbsp;码：<input type="password" id="password" > </p>
		<p>确认密码：<input type="password" id="password" value=""> </p>
		<p>邮箱：<input type="text" id="email" ><span id="email_msg"></span></p>
		<p>性别： <input type="radio" >男 <input type="radio" >女</p>
		<p><input type="button" value="注册" id="btn"></p>

	</div>
</body>
</html>

=========

<%
 String username = request.getParameter("username");
 String msg = "";
 if("admin".equals(username) || "administrator".equals(username)  || "ajax".equals(username) ){
    msg = "ERROR";
 }else{
 	msg = "OK";
 }
 out.println(msg);
 %>

用户名 ajax utf8