使用Ajax實現用戶名是否已經存在的驗證

原創

2020-02-21 16:13

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.οnlοad=function(){
            document.getElementById("name").οnblur=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>