JavaWeb学习-AJAX-3-练习：验证用户名是否存在

柔情只为你懂 2021-11-23 05:50 351阅读 0赞

开始来做AJAX的练习，就是判断用户名是否存在，这个场景我们在一些网站的注册页面经常看到，这里说的用户名可以是昵称等。只要用户输入一个名称，输入光标离开到其他输入框，旁边就显示这个用户名是否被注册过，就是这么一个场景。

**1.场景分析**

1.  先有一个页面，提供用户名和密码输入的注册页面，例如/reg.jsp
2.  光标离开输入框，这里需要一个事件，onblur就是这个事件。
3.  这个事件需要调用一个函数
4.  这个函数里面就是AJAX操作，发送请求到一个检测名称的servlet
5.  新建一个servlet，用来模拟查库用户名比对。

分析下来就是上面这些步骤，我们在最后一步中，这里就不需要用到数据库，直接用一个硬编

**2.注册页面代码**

<%@ 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=ISO-8859-1">
    <title>注册</title>
    		<script type="text/javascript" src="${pageContext.request.contextPath}/js/myJS.js"></script>
    		<script type="text/javascript">
    			function checkName(){
    				//1. 获取用户名
    				var name = document.getElementsByName("userName")[0];
    				//2. 创建XMLHttpRequest对象
    				var xhr = getXMLHttpRequest();
    				//5. 处理结果，习惯写这个位置
    				xhr.onreadystatechange = function(){
    					if(xhr.readyState == 4){
    						if(xhr.status == 200){//服务器响应一切正常
    							alert(xhr.responseText);
    						}
    					}
    				}
    				//3. 创建连接
    				xhr.open("get", "${pageContext.request.contextPath}/servlet/checkNameServlet?name=" + name.value);
    				//4.
    				xhr.send(null);
    			}
    		</script>
    </head>
    <body>
    		用户名：<input type="text" name="userName" onblur="checkName()" /><br/>
    		密码：<input type="password" name="pwd" /><br/>
    </body>
    </html>

这里面用到了前面学习到的XMLHttpRequest对象，还有我们封装的js的引用，以及注册页面的form表单，因为我们只判断用户名就可以，所以这里不需要什么提交注册按钮。

**3.Servlet代码**

package com.anthony.servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class CheckNameServlet extends HttpServlet {
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		response.setCharacterEncoding("UTF-8");
    		PrintWriter out = response.getWriter();
    		String name = request.getParameter("name");
    		if("Anthony".equals(name)) {
    			out.println(name + "已经被占用，请更换一个用户名。");
    		}else {
    			out.println("恭喜你，该用户名可以注册。");
    		}
    		
    	}
    
    	
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    }

Web.xml内容

<?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
      <display-name>AjaxDemo</display-name>
      <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
      </welcome-file-list>
      <servlet>
        <description></description>
        <display-name>servletDemo</display-name>
        <servlet-name>servletDemo</servlet-name>
        <servlet-class>com.anthony.servlet.ServletDemo</servlet-class>
      </servlet>
      <servlet-mapping>
        <servlet-name>servletDemo</servlet-name>
        <url-pattern>/servlet/servletDemo</url-pattern>
      </servlet-mapping>
      <servlet>
        <description></description>
        <display-name>checkNameServlet</display-name>
        <servlet-name>checkNameServlet</servlet-name>
        <servlet-class>com.anthony.servlet.CheckNameServlet</servlet-class>
      </servlet>
      <servlet-mapping>
        <servlet-name>checkNameServlet</servlet-name>
        <url-pattern>/servlet/checkNameServlet</url-pattern>
      </servlet-mapping>
    </web-app>

项目全部文件结构

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70][]

上面文件1.jsp和 js文件夹中内容，请看上一篇文章中的代码。

**4.测试和调试**

打开浏览器访问[http://localhost:8080/AjaxDemo/reg.jsp][http_localhost_8080_AjaxDemo_reg.jsp]

, 分别在用户名输入框输入“Anthony”和其他任意字符。

如果出现以下弹窗，说明代码工作了。

![20190725231311245.png][]

输入Anthony，会提示名称存在

![20190725231312572.png][]

其他名称就提示不占用。

![20190725231311376.png][]

**5.优化提示信息位置**

上面我们信息是通过弹窗来提示，这个只是我们在开发中使用的调试手段。现在我们优化一下，让在在用户名输入框右侧出现文字提示，而不是弹窗。

Servlet中代码调整下，打印改成true和false

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		response.setCharacterEncoding("UTF-8");
    		PrintWriter out = response.getWriter();
    		String name = request.getParameter("name");
    		if("Anthony".equals(name)) {
    			out.println(true);
    		}else {
    			out.println(false);
    		}
    		
    	}

Reg.jsp中判断输出是不是true这个字符串，如果是提示用户名存在，不是提示可以使用

<%@ 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=ISO-8859-1">
    <title>注册</title>
    		<script type="text/javascript" src="${pageContext.request.contextPath}/js/myJS.js"></script>
    		<script type="text/javascript">
    			function checkName(){
    				//1. 获取用户名
    				var name = document.getElementsByName("userName")[0];
    				//2. 创建XMLHttpRequest对象
    				var xhr = getXMLHttpRequest();
    				//5. 处理结果，习惯写这个位置
    				xhr.onreadystatechange = function(){
    					if(xhr.readyState == 4){
    						if(xhr.status == 200){//服务器响应一切正常
    							var msg = document.getElementById("check_msg");
    							//document.write(xhr.responseText);
    							if(xhr.responseText == "true"){
    								msg.innerHTML="用户名已存在";
    							}else {
    								msg.innerHTML="可以使用";
    							}
    						}
    					}
    				}
    				//3. 创建连接
    				xhr.open("get", "${pageContext.request.contextPath}/servlet/checkNameServlet?name=" + name.value);
    				//4.
    				xhr.send(null);
    			}
    		</script>
    </head>
    <body>
    		用户名：<input type="text" name="userName" onblur="checkName()"/><span id="check_msg"></span><br/>
    		密码：<input type="password" name="pwd"/><br/>
    </body>
    </html>

例如，不存在用户名判断效果是这样的

![20190725231453648.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70]: /images/20211122/ee127b661e464daeb17b70e89101bce4.png
[http_localhost_8080_AjaxDemo_reg.jsp]: http://localhost:8080/AjaxDemo/reg.jsp
[20190725231311245.png]: /images/20211122/d7c1f104879a420c92293d50ed10e43d.png
[20190725231312572.png]: /images/20211122/73cf7570382e450c8943973894b458ec.png
[20190725231311376.png]: /images/20211122/6f22314f85b64e5da85f3d4b8dcd1c4f.png
[20190725231453648.png]: /images/20211122/fd014d93f24d4b2183bb7cb717a19143.png