AJAX Java 验证用户名

需求:Java版本完成异步检查用户名是否存在。

一、页面制作一个表单

<h3>异步检查用户名是否存在</h3>
    <form method="post">
    	用户名:<input id="nameID" type="text" name="name" /><span id="nameTip"></span><br/>
    	密码:<input type="password" name="password"/><br/>
    	<input type="submit" value="提交"/>
    </form>

二、编写JS异步提交请求后台

<script type="text/javascript">
  		window.onload = function(){
  			document.getElementById("nameID").onblur = function(){
  				//获取name的值
  				var nameValue = this.value;
  				
				 //1.创建异步对象
  				var ajax = null;
				try{
					//IE浏览器(低版本)
					ajax = new ActiveXObject("microsoft.xmlhttp");
				}catch(e){
					//非IE浏览器或者IE高版本	
					ajax = new XMLHttpRequest();
				}
				
				 //2.设置参数
				 ajax.open("POST","${pageContext.request.contextPath}/CheckUser");
				 
				 //注意:异步提交不不会携带请求正文类型的,需要在请求send()之前手动设置请求正文类型
				 ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
				 
  				 //3.发生请求 :  注意:POST方式提交参数放在这里
  				 ajax.send("name="+nameValue);
				 //4.监听
				 ajax.onreadystatechange = function(){
					 if(ajax.readyState==4 && ajax.status==200){
							var result = ajax.responseText;
							if(result=="1"){
								//已经被注册
								document.getElementById("nameTip").innerHTML = "抱歉,该用户已经占用,请更换".fontcolor("red");
							}else{
								//没有被注册
								document.getElementById("nameTip").innerHTML = "恭喜,该用户可用".fontcolor("green");
							}
					 }
				 };
  			};
  			
  			
  		};
  	
  	
  	</script>

三、编写一个CheckUser的Servlet程序

/**
 * 
 * @author http://www.yiidian.com
 *
 */
//检查用户名是否已经被注册
public class CheckUser extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//1.接收参数
		String name = request.getParameter("name");
		System.out.println(name);
		//2.检查
		PrintWriter out = response.getWriter();
		if(name.equals("yiidian")){
			//已经被注册
			out.write("1");
		}else{
			//没有被注册
			out.write("0");
		}
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}

四、在web.xml配置Servlet程序

 <servlet>
    <servlet-name>CheckUser</servlet-name>
    <servlet-class>com.yiidian.CheckUser</servlet-class>
  </servlet>
   <servlet-mapping>
    <servlet-name>CheckUser</servlet-name>
    <url-pattern>/CheckUser</url-pattern>
  </servlet-mapping>

五、运行效果

输入不存在的用户名:

输入存在的用户名:

案例源码下载:http://pan.baidu.com/s/1c19Vx9Q

热门文章

优秀文章