Ajax实现的验证用户名是否被注册？

偏执的太偏执、 2021-06-22 15:36 471阅读 0赞

# 用户名是否被注册 AJAX实现 #

## 1. 页面：`user.jsp` ##

给出注册表单页面。  
给用户名文本框添加onblur事件的监听。  
获取文本框的内容，通过ajax四步操作发送给服务器，得到响应结果。  
如果获取的是1，表示用户名已经存在，提示用户已经被注册了。  
如果为0，什么都不需要做。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    	<head>
    		<title>用户注册</title>
    
    		<meta http-equiv="pragma" content="no-cache">
    		<meta http-equiv="cache-control" content="no-cache">
    		<meta http-equiv="expires" content="0">
    		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    		<meta http-equiv="description" content="This is my page">
    		
    		<script type="text/javascript"> // 创建异步对象 function createXMLHttpRequest() { try { return new XMLHttpRequest(); // 支持大多数浏览器 } catch (e) { try { return new ActiveXObject("Msxml2.XMLHTTP"); // 支持IE6浏览器 } catch (e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); //支持IE5.5以及更早版本的浏览器 } catch (e) { alert("不支持您的浏览器！"); throw e; } } } } window.onload = function() { // 获取文本框元素，给它的失去焦点注册监听 var userEle = document.getElementById("usernameEle"); userEle.onblur = function() { // 得到异步对象 var xmlHttp = createXMLHttpRequest(); // 打开与服务器的连接，指定请求的方式，URL，是否为异步请求 xmlHttp.open("POST", "<c:url value='/ValidateUsernameServlet'/>", true); // 设置请求头 Content-Type xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 发送请求,给出请求体 xmlHttp.send("username=" + userEle.value); // 给异步对象的onreadystatechange事件注册监听器 xmlHttp.onreadystatechange = function() { // 双重判断，4 200 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { // 获取服务器的响应内容 var text = xmlHttp.responseText; //判断响应内容是否为1 if (text == "1") { // 获取span元素 var span = document.getElementById("errorSpan"); span.innerHTML = "用户名已经被注册！"; } else { // 获取span元素 var span = document.getElementById("errorSpan"); span.innerHTML = ""; } } }; }; }; </script>
    	</head>
    
    	<body>
    		<h1>用户注册</h1>
    		<form action="" method="post">
    			用户名：<input type="text" name="username" id="usernameEle">
    			<span id="errorSpan"></span> <br />
    			密码：<input type="password" name="password"><br />
    			<input type="submit" value="注册">
    		</form>
    	</body>
    </html>

## 2. servlet: `ValidateUsernameServlet` ##

获取客户端传递的用户名参数。  
判断是否为已存在用户名（这里我们使用判断是否为"veeja"来模拟一下，访问数据库的操作我们先省略掉），如果存在，返回1，如果不存在，返回0。

package com.veeja.web.servlet;
    
    import java.io.IOException;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class ValidateUsernameServlet extends HttpServlet { 
    
    	public void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException { 
    		request.setCharacterEncoding("utf-8");
    		response.setContentType("text/html;charset=utf-8");
    		// 获取参数username
    		String username = request.getParameter("username");
    		System.out.println(username);
    		// 判断用户名是否存在，存在就返回1，不存在就返回0
    		if (username.equalsIgnoreCase("veeja")) { 
    			response.getWriter().print("1");
    		} else { 
    			response.getWriter().print("0");
    		}
    	}
    }

## 3. 我出现的错误 ##

在设置请求头的时候，

// 设置请求头 Content-Type
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

我把单词打错了，后面的urlencoded写成了urlancoded。  
浏览器F12出现了500错误。  
![在这里插入图片描述][20200220105424990.png]  
后台出现了空指针异常。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]  
估计是设置请求头错误，导致出现了无法发送参数的现象，后台获取的时候就获取不到，在比较字符串的时候就出现了空指针异常。

--------------------

END.

[20200220105424990.png]: /images/20210615/f7eaaf18ebb049bea67507a66da85eb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]: /images/20210615/c9d88dc5629c4af080fc0a9803151449.png