ajax+servlet实现注册验证(验证用户名是否存在)

最新推荐文章于 2025-10-12 11:09:05 发布

原创最新推荐文章于 2025-10-12 11:09:05 发布 · 1.6w 阅读

47 ·

CC 4.0 BY-SA版权

文章标签：

#servlet #ajax

java 同时被 3 个专栏收录

41 篇文章

订阅专栏

struts2

2 篇文章

订阅专栏

servlet

1 篇文章

订阅专栏

本文介绍了如何使用Ajax和Servlet进行实时注册验证，确保用户名未被占用。通过四个关键文件：web.xml、login.jsp、login.js和LoginServlet.java实现。在Eclipse项目中，需引入相关jar包。验证过程包括检查Ajax的readyState状态码和HTTP状态码。此外，文章还提到在Struts2框架下，如何配置web.xml和.js文件，避免Struts2拦截Servlet请求，实现Servlet、Struts2和Ajax的整合。

做项目过程中，需要用到 ajax 实时验证注册的用户名是否已经存在。所以写了一个小例子，经过测试直接可用。

主要分为4个文件，分别为 web.xml 文件，login.jsp文件，login.js 以及
LoginServlet.java文件。
在eclipse中新建项目，文件的存放树如下：

这里写图片描述
注意引进所需的 jar 包.

1 . login.jsp

<%@ 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">
<title>验证用户名是否存在</title>
<script type="text/javascript" src="./login.js"></script>
</head>
<body>
<form action="" enctype="application/x-www-form-urlencoded" >
用户名：<input type="text" name="username" value="" id="username">
<div id="divcheck"></div>
<input type="button" name="checkusername" value="查看用户名" id="checkusername"/>
</form>
</body>
</html>

login.jsp 即界面，在login.jsp中引入.js文件用来做ajax处理。

2 . login.js

window.onload = function() {
//通过id获取页面button的onclick点击事件
    document.getElementById("checkusername").onclick = function() {
        var username = document.getElementById("username").value;
        //测试打印出username(输入值)
        alert(username);
        //1.创建ajax对象
        var xhr = ajaxFunction();
        xhr.onreadystatechange = function() {
            //处理后台返回的数据
            if(xhr.readyState == 4) {
                if(xhr.status == 200) {
                    var data= xhr.responseText;
                    document.getElementById("divcheck").innerHTML = data;
                }
            }
        }
    //规定发送数据的形式（post/get），url，以及传输方式(同步/异步)
        xhr.open("post","./LoginServlet?timeStamp="+new Date().getTime(),true);
        //post方式需要加下边这句，get方式不需要
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //将页面输入数据发送到后台
        xhr.send("username="+username);
    }
}

function ajaxFunction() {
    var xmlHttp;
    try {
        xmlHttp = new XMLHttpRequest();
    } catch(e) {
        try {
            xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
        } catch(e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {}
        }
    }
    return xmlHttp;
}

在.js文件中进行ajax的处理过程，处理过程分为4个阶段
1.创建ajax对象(XMLHttpRequest对象)
2.与服务器建立连接
3.客户端发送请求数据到服务器
4.服务器返回响应到客户端，客户端接收响应。
需要注意的是，第一步创建XMLHttpRequest对象，之后所有的操作都是针对于这个对象的属性来完成的。

3 . 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_3_0.xsd" id="WebApp_ID" version="3.0">

  <welcome-file-list>

    <welcome-file>register.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
     <servlet-name>LoginServlet</servlet-name>
     <servlet-class>com.test.Servlet.LoginServlet</servlet-class>
  </servlet>

   <servlet-mapping>
       <servlet-name>LoginServlet</servlet-name>
       <url-pattern>/LoginServlet</url-pattern>
  </servlet-mapping>
</web-app>

web.xml是配置文件，配置前台页面和后台Servlet的映射关系，注意url路径的对应。

4 . LoginServlet.java

package com.test.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 LoginServlet extends HttpServlet {

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

    public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
        response.setContentType("text/html;charset=utf-8");
        //定义输出流
        PrintWriter out = response.getWriter();
        //获取前端页面输入数据
        String username = request.getParameter("username");
        //测试打印，测试接收前台数据是否成功
        System.out.println(username);
        //进行比较并作出响应。
        if(username==null || username.equals("")) {
            out.println("请输入用户名 ");
        } else if("sa".equals(username)) {
            out.println("该用户名已经存在");
        } else {
            out.println("可以注册");
        }

    }
}

效果展示：
这里写图片描述

这里写图片描述

关于ajax验证的过程—-》需要验证两部分：
1 .验证ajax的状态，通过 readyState 状态码来验证 0-4

0 表示未初始化，还没有调用open方法
1 表示已经初始化，但是没有发送请求，即没有调用send方法，即正在加载
2 表示加载完毕，send已经被调用，请求开始
3 代表交互中，服务器正在发送响应
4 代表交互完成

2 . 验证返回的状态码是否为200或者304

404 没有找到页面
403 禁止访问
500 访问出错
200 一切正常
304 源文件没有被修改

做完这个小例子之后，我将servlet+ajax 和我之前写的项目结合到了一起。

之前的项目我用struts2框架写的，所以我将servlet+ajax+struts2结合到了一起去，并且成功运行。

需要注意的是默认情况下struts会拦截servlet的请求，所以我们只需要修改和servlet处理有关的配置文件就行，在web.xml配置文件中找到servlet的配置路径，加入.servlet后缀名。在ajax处理的.js文件中，找到servlet处理的路径，加入.servlet后缀名。如下图所示：
这里写图片描述