JavaWeb22案例

　　#头条创作挑战赛#12.3 案例
　　需求：在完成用户注册时，当用户名输入框失去焦点时，校验用户名是否在数据库已存在
　　12.3.1 分析前端完成的逻辑 给用户名输入框绑定光标失去焦点事件 onblur 发送 ajax请求，携带username参数 处理响应：是否显示提示信息 后端完成的逻辑 接收用户名 调用service查询User。此案例是为了演示前后端异步交互，所以此处不做业务逻辑处理，直接将返回结果定为 true 返回标记
　　整体流程如下：
　　12.3.2 后端实现 package web.servlet;  /**   * @Author 晨默   * @Date 2022/9/12 22:51   */    import javax.servlet.*;  import javax.servlet.http.*;  import javax.servlet.annotation.*;  import java.io.IOException;    @WebServlet(name = ＂SelectUserServlet＂, value = ＂/SelectUserServlet＂)  public class SelectUserServlet extends HttpServlet {      @Override      protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {          // 1. 接受用户名          String username = request.getParameter(＂username＂);          // 2. 调用service查询user对象，直接给flag赋值为true，表明用户名占用          boolean flag = true;          // 3. 响应标记          response.getWriter().write(＂＂+flag);      }        @Override      protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {          this.doGet(request, response);      }  }12.3.3 前端实现
　　在 register.html 页面的 body 结束标签前编写 script 标签，在该标签中实现如下逻辑 1. 第一步：给用户名输入框绑定光标失去焦点事件onblur // 1. 给用户输入框绑定 失去焦点事件  document.getElementById(＂username＂).onblur = function(){        }2. 第二步：发送ajax**请求，携带username参数**
　　在 第一步 绑定的匿名函数中书写发送 ajax 请求的代码          // 2.1 创建核心对象          let xhttp;          if(window.XMLHttpRequest){              xhttp = new XMLHttpRequest();          }else{              xhttp = new ActiveXObject(＂Microsoft.XMLHTTP＂);          }            // 2.2 发送请求          xhttp.open(＂GET＂,＂http://localhost:5050/AjaxDemo_war/SelectUserServlet?username=＂+username);          xhttp.send();            // 2.3 获取响应          xhttp.onreadystatechange = function(){              if(this.readyState === 4 && this.status === 200){                                }          }
　　由于发送的是 GET 请求，所以需要在 URL 后拼接从输入框获取的用户名数据。而在 第一步 绑定的匿名函数中通过以下代码可以获取用户名数据  // 获取用户名的值  var username = this.value; // this:给谁绑定的事件，this就代表谁
　　而携带数据需要将 URL 修改为：  xhttp.open(＂GET＂, ＂http://localhost:8080/ajax-demo/selectUserServlet?username=＂+username);3. 第三步：处理响应：是否显示提示信息
　　当 this.readyState == 4 && this.status == 200 条件满足时，说明已经成功响应数据了。
　　此时需要判断响应的数据是否是 ＂true＂ 字符串，如果是说明用户名已经占用给出错误提示；如果不是说明用户名未被占用清除错误提示。代码如下  // 判断                  if(this.responseText === ＂true＂){                      // 用户名存在，显示提示信息                      document.getElementById(＂username_err＂).style.display = ＂＂;                  }else{                      // 用户名不存在，清除提示信息                      document.getElementById(＂username_err＂).style.display = ＂none＂;                  }
　　综上所述，所有代码为：                                                
欢迎注册
          已有帐号？ 登录                      
　　效果如下：