javaweb阶段知识点（JavaWeb22-3Ajax-案例）
javaweb阶段知识点（JavaWeb22-3Ajax-案例）此时需要判断响应的数据是否是 "true" 字符串，如果是说明用户名已经占用给出错误提示；如果不是说明用户名未被占用清除错误提示。代码如下 xhttp.open("GET" "http://localhost:8080/ajax-demo/selectUserServlet?username=" username);3. 第三步：处理响应：是否显示提示信息当 this.readyState == 4 && this.status == 200 条件满足时，说明已经成功响应数据了。 // 1. 给用户输入框绑定 失去焦点事件 document.getElementById("username").onblur = function(){ }2. 第二步：发送ajax**请求，携带username参数**在 第一
#头条创作挑战赛#
12.3 案例需求：在完成用户注册时，当用户名输入框失去焦点时，校验用户名是否在数据库已存在
- 前端完成的逻辑
- 给用户名输入框绑定光标失去焦点事件 onblur
- 发送 ajax请求，携带username参数
- 处理响应：是否显示提示信息
- 后端完成的逻辑
- 接收用户名
- 调用service查询User。此案例是为了演示前后端异步交互，所以此处不做业务逻辑处理，直接将返回结果定为 true
- 返回标记
整体流程如下：
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';
}
综上所述，所有代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
<link href="css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
<div class="reg-content">
<h1>欢迎注册</h1>
<span>已有帐号？</span> <a href="login.html">登录</a>
</div>
<form id="reg-form" action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td class="inputs">
<input name="username" type="text" id="username">
<br>
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
</td>
</tr>
<tr>
<td>密码</td>
<td class="inputs">
<input name="password" type="password" id="password">
<br>
<span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
</td>
</tr>
<tr>
<td>验证码</td>
<td class="inputs">
<input name="checkCode" type="text" id="checkCode">
<img src="imgs/a.jpg">
<a href="#" id="changeImg">看不清？</a>
</td>
</tr>
</table>
<div class="buttons">
<input value="注 册" type="submit" id="reg_btn">
</div>
<br class="clear">
</form>
</div>
<script>
<!-- 1. 给用户名输入框绑定 失去焦点事件 -->
document.getElementById("username").onblur = function(){
// 2. 发送ajax请求
// 获取用户名的值
const username = this.value;
// 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){
// alert(this.responseText);
// 判断
if(this.responseText === "true"){
// 用户名存在，显示提示信息
document.getElementById("username_err").style.display = '';
}else{
// 用户名不存在，清除提示信息
document.getElementById("username_err").style.display = 'none';
}
}
}
}
</script>
</body>
</html>
效果如下：
