前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#userName{border:1px solid lightgray;height: 25px;}
#userName:focus{border:1px solid blue;}
</style>
<script type="text/javascript">
function validate(obj) {
//得到当前输入框的内容
var userName = obj.value;
//创建对象【绝大多数浏览器都支持XMLHttpRequest方式创建】
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(e){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//初始化【GET和POST忽略大小写】这里地址后面可以传递请求参数 不论GET还是POST，如果是GET请求只能在这里传递参数
xhr.open("POST", "/ojbk/valid.do?userName="+userName, true);
//经过测试 火狐浏览器这句话可加可不加
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//绑定事件 回调函数【onreadystatechange是全小写的】
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
//接收后台响应过来的数据
var res = xhr.responseText;
if(res == "1"){
//将接收到的数据展示到页面中
document.getElementById("userName").style.border = "1px solid red";
document.getElementById("msg").innerHTML = "<img src='imgs/xx.bmp'/>此用户名太受欢迎，请更换一下";
}else if(res == "2"){
//将接收到的数据展示到页面中
document.getElementById("userName").style.border = "1px solid green";
document.getElementById("msg").innerHTML = "<span style='color:green;'>可以注册</span>";
}
}
}
//发送请求【send方法的参数其实是发送POST请求的参数】
xhr.send();
}
</script>
</head>
<body>
用户名<input type="text" id="userName" name="userName" onblur="validate(this);">
<span id="msg"></span>
</body>
</html>
后端接受请求
package zz.practice.servlet;
import java.io.IOException;
import java.io.PrintWriter;
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 zz.practice.dao.IUserDao;
import zz.practice.dao.impl.UserDaoImpl;
import zz.practice.domain.User;
@WebServlet("/valid.do")
public class _05_ValidateServlet extends HttpServlet {
private IUserDao userDao = new UserDaoImpl();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//处理响应数据中文乱码
resp.setContentType("text/html;charset=utf-8");
resp.setCharacterEncoding("utf-8");
//接收请求参数
String userName = req.getParameter("userName");
//查询数据库
User user = userDao.loadUserByName(userName);
String res = "";
if(null != user){
//user不为空，表示此用户名已被占用，不能注册
res = "1";
}else{
//可以注册
res = "2";
}
PrintWriter pw = resp.getWriter();
pw.write(res);
pw.flush();
pw.close();
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/75233.html
