ajax使用之验证用户名是否存在

迈不过友情╰ 2022-09-21 04:00 202阅读 0赞

ajax使用非常广，比如验证用户名、二级联动等。实现的效果如下：

![SouthEast][]![SouthEast 1][]

前台代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="${pageContext.request.contextPath}/util.js"></script>
    <title>ajax用户名验证</title>
    <script>
    
    	window.onload = function() {
    
    		document.getElementById("userName").onblur = function() {
    			
    			if(this.value=="")
    				{
    					alert("请输入用户名!");
    					this.focus();
    				}
    			//发出已补请求
    			//1/得到xhr对象
    			var xhr = getXHR();
    			//2.注册状态变化监听器
    			
    			xhr.onreadystatechange = function() {
    				if (xhr.readyState == 4) {
    					if (xhr.status == 200) {
    						document.getElementById("msg").innerHTML = xhr.responseText;
    					}
    				}
    				
    			}
    			//3.建立与服务器的连接
    			xhr.open("POST", "AjaxDemo1" + "?time=" + new Date().getTime());
    			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    			//4.向服务器发出请求
    			xhr.send("userName="+this.value);
    			
    		}
    
    	}
    </script>
    </head>
    <body>
    <form action="AjaxDemo1" method="post">
    		用户名:<input type="text" id="userName" name="userName" /><span id="msg"></span><br />
    		密 码:<input type="password" id="password"
    			name="password" /><br /> <input type="submit" value="注册">
    	</form>
    </body>
    </html>

后台代码如下：

package com.levi.servletajax;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * Servlet implementation class AjaxDemo1
     */
    public class AjaxDemo1 extends HttpServlet {
    	private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public AjaxDemo1() {
            super();
            // TODO Auto-generated constructor stub
        }
    
    	/**
    	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		
    		this.doPost(request, response);
    	}
    
    	/**
    	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		
    		String userName=request.getParameter("userName");
    		response.setCharacterEncoding("utf-8");
    		String names[]={"lw","admin","levi"};
    		for (String s : names)
    		{
    			if(s.equals(userName))
    			{
    				response.getWriter().write("<font color='red'>用户名不可用</font>");
    				return;
    			}
    			
    		}
    		response.getWriter().write("<font color='green'>用户名可用</font>");
    		response.getWriter().flush();
    	}
    
    }

其中前台的获取XMLHttpRequest对象我封装到了util.js文件里面，里面代码如下：

/**
     * 得到XMLHttpRequest对象
     */
    function getXHR(){
    	var xmlHttp;
    	try {
    		xmlHttp=new XMLHttpRequest();
    	}catch(e)
    	{
    		try{
    			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    		}
    		catch(e)
    		{
    			try{
    				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    			}
    			catch(e)
    			{
    				alert("你的浏览器不支持ajax");
    				return false;
    			}
    			
    		}
    		
    	}
    	return xmlHttp;
    }

[SouthEast]: https://img-blog.csdn.net/20160614234809818?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: /images/20220721/d7a9c76acc6442ca9dab4194b13cfec1.png