1、HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<style>
.change{
border:3px solid lawngreen;
}
input{
outline: none;
}
</style>
</head>
<body>
<form action="/web13/checkname" method="post">
用户名:<input type="text" id="username" name="username" oninput="check()" autocomplete="false">
<span id="message" style="color: red"></span><br>
密码:<input type="text" name="password" id="password">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
<script>
function check(){
//创建Ajax的xmlhttprequest对象
var xhttprequest;
if (window.XMLHttpRequest){
xhttprequest=new XMLHttpRequest();
}else {
xhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
}
var user=document.getElementById("username");
xhttprequest.open("POST","http://localhost:8080/web13/checkname?username="+user.value);//利用对象的value属性获取输入框的值
xhttprequest.send();
//请求对象状态改变的监听事件onreadystatechange
xhttprequest.onreadystatechange=function (){
if (xhttprequest.readyState==4 && xhttprequest.status==200){
var message = xhttprequest.responseText;
if (message=="true"){
document.getElementById("message").innerText="用户名已存在,请重新输入";
user.style.cssText="border:1px solid black;";
}else if (message=="false"){
//user.style.borderColor="lawngreen";
document.getElementById("message").innerText="用户名可用";
user.style.cssText="border:3px solid lawngreen;";
}
}
}
}
</script>
</html>
2、servelet
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @Author ZRX
* @Date 2023/7/19 20:35
* @Description
* @Version
*/
@WebServlet("/checkname")
public class AjaxCheckUserName extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("uTF-8");
resp.setContentType("text/html;charset=utf-8");
String name = req.getParameter("username");
if (name.equals("zbh")){
resp.getWriter().write("true");
}else {
resp.getWriter().write("false");
}
}
}