使用Ajax实现用户名是否已经存在的验证

本文介绍了一个使用AJAX实现的简单用户名验证系统。通过HTML、JavaScript和Servlet技术,该系统能在用户输入用户名后即时反馈是否存在。利用POST方式发送请求,并在服务器端检查用户名是否已被占用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1。02checkUsername.html文件:

<!DOCTYPE html>
<html>
  <head>
    <title>检查用户名是否可用</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <script type="text/javascript" src="util.js"></script>
    <script type="text/javascript">
        window.onload=function(){
            document.getElementById("name").onblur=function(){
                //发异步请求
                var xhr = getXmlHttpRequest();
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4){
                        if(xhr.status==200){
                            //获取响应正文
                            document.getElementById("msg").innerHTML=xhr.responseText;
                        }
                    }
                }
                //get异步请求
                //xhr.open("GET","/Ajax_Project/servlet/ServletDemo2?time="+new Date().getTime()+"&name="+this.value);
                //xhr.send(null);

                //post异步请求
                xhr.open("POST","/Ajax_Project/servlet/ServletDemo2?time="+new Date().getTime());
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send("name="+this.value);
            }
        }
    </script>
  </head>

  <body> 

    用户名:<input type="text" id="name" name="name"/><span id="msg"></span>

  </body>
</html>

2。ServletDemo2.java文件:

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ServletDemo2 extends HttpServlet {

    private List<String> names = new ArrayList<String>();
    public void init()throws ServletException{
        names.add("www");
        names.add("yyy");
        names.add("mmm");
    }

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

        response.setContentType("text/html;charset=UTF-8");//告知客户端是文本
        PrintWriter out = response.getWriter();

        String name = request.getParameter("name");//获取用户输入的数据
        if(names.contains(name)){
            //存在
            out.write("<font color='red'>用户名已经存在</font>");
        }else{
            //不存在
            out.write("<font color='green'>用户名可以使用</font>");
        }

    }

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

        doGet(request, response);
    }

}

3。util.js文件:

function getXmlHttpRequest() {
    var xhr;

    try {
        // Firefox, Opera 8.0+, Safari
        xhr = new XMLHttpRequest();
    } catch (e) {

        // Internet Explorer
        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {

            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("您的浏览器不支持AJAX!");
                return false;
            }
        }
    }
    return xhr;
}

4。web.xml文件:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name></display-name>
  <servlet>
    <servlet-name>ServletDemo1</servlet-name>
    <servlet-class>ServletDemo1</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>ServletDemo2</servlet-name>
    <servlet-class>ServletDemo2</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>ServletDemo1</servlet-name>
    <url-pattern>/servlet/ServletDemo1</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>ServletDemo2</servlet-name>
    <url-pattern>/servlet/ServletDemo2</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

运行:http://localhost:8080/Ajax_Project/02checkUsername.html
输出www时的运行结果:这里写图片描述
输入aaa时的运行结果:这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值