原理

当输入框有变动时,客户端会与服务器进行联系,联系的内容只包括输入框内的消息,而不是整个页面,即局部联系(ajax)
(系统内现已有一个用户名:zhangsan)

效果演示

视频链接:https://pan.baidu.com/s/1RH5oFcZ5G4fCExboa5IUpQ
提取码:1111
 
项目源码:checkuserexist

步骤:

(1)打开idea,创建新项目,选择Web Application(4.0)

(2)填写项目名称及路径

(3)在WEB-INF路径下新建两个文件夹classes(输出路径)和lib(存放依赖),此步骤在项目中可以不用,但这是web项目的基本步骤,养成良好的习惯

文件夹如下:

(4)打开Project Structure,配置输出路径

(5)找到Modules,在右边点击Path栏,将输出路径改为第三步创建的classes文件夹

(6)配置tomcat服务器

 

 

 
(7)新建com.servlet.CheckUserExistServlet类,别名为checkUserExist

(8)如果有红色代码出现,这样做导包

 
(9)在index.jsp文件中编辑代码


<%--
  Created by IntelliJ IDEA.
  User: 123456
  Date: 2020/8/26
  Time: 7:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>用户登录</title>
  </head>
  <script>
    var createXMLHttpRequest = function() {
      try {
        return new XMLHttpRequest()
      }catch (e){
        try {
          return ActiveXObject("Msxml2.XMLHttp")
        }catch (e){
          try {
            return ActiveXObject("Microsoft.XMLHttp")
          }catch (e){
            alert("浏览器不支持……")
            return e
          }
        }
      }
    }
    window.onload = function (){
      // 获取界面username元素
      var userNameEle = document.getElementById("usernameId");
      // 失焦执行
      userNameEle.onblur = function (){
        // 第一步:创建对象
        var xmlHttp = createXMLHttpRequest();
        // 第二步:打开连接
        xmlHttp.open("POST", "/checkuserexist/CheckUserExist", true)
        // 设置请求头
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
        // 第三步:发送信息
        xmlHttp.send("username=" + userNameEle.value)
        // 第四步:给xmlHttp的onreadystatechange事件注册监听
        xmlHttp.onreadystatechange = function (){
          if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
            var result = xmlHttp.responseText;
            var span = document.getElementById("errorSpanId");
            if(result == "1"){
              span.innerHTML = "用户名已被注册"
            }else if(result == "0"){
              span.innerHTML = ""
            }else {
              span.innerHTML = "可用"
            }
          }
        }
      }
    }
  </script>
  <body>
  <div align="center">
    <form action="" method="post">
      <h1>验证用户是否存在</h1>
      用户名:<input type="text" name="username" id="usernameId"/><span id="errorSpanId"></span><br>
      密码:<input type="password" name="password" id="passwordId"/><br>
      <button type="submit">登录</button>
    </form>
  </div>
  </body>
</html>

(10)在CheckUserExistServlet类中编辑代码


package com.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServlet;
import java.io.IOException;
@WebServlet("/CheckUserExist")
public class CheckUserExistServlet extends HttpServlet {
    protected 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);
        // 判断
        if("zhangsan".equals(username)){
            response.getWriter().print("1");
        }else if("".equals(username)){
            response.getWriter().print("0");
        }else {
            response.getWriter().print("-1");
        }
    }
    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
    }
}

(11)运行服务器
 

 
(12)执行结果:


 
 


代码编译器:IntelliJ IDEA 2020.01
 

您必须 登录 才能发表评论