一,需求
在注册页面,当用户在输入框中输入zhangSan时,在输入框后面提示用户:用户名已注册.
二,流程
1,编写页面:
- register.jsp
- 给出注册表单页面
- 给用户名文本框添加onblur事件的监听
- 获取文本框的内容,通过Ajax的四个步骤发送给服务器,得到响应结果
- 如果为1:在文本框后显示”用户名已被注册”
- 如果为0:什么都不做
2,编写Servlet
- ValidateUserNameServlet
- 获取客户端传递的用户名参数
- 判断是否为zhangSan
- 是:返回1
- 否:返回0
三,代码
@WebServlet(name = "ValidateUserServlet",urlPatterns = "/vus")
public class ValidateUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String user = request.getParameter("user");
System.out.println(user);
/**
* 判断参数user是否为zhangSan
* 如果是:响应1
* 如果否:响应0
*/
if("zhangSan".equals(user)){
response.getWriter().print("1");
}else {
response.getWriter().print("0");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户注册</title>
<script type="text/javascript">
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveXObject("Msxml2.HTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.HTTP");
} catch (e) {
throw e;
}
}
}
}
;
window.onload = function () {
var user = document.getElementById("user");
//给文本框的失去焦点事件注册监听
user.onblur = function () {
//1,获得XMLHttpRequest对象
var xmlHttp = createXMLHttpRequest();
//2,打开连接
xmlHttp.open("POST", "/rd/vus", true);
//3,设置请求头
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4,发出请求时,给出请求体
xmlHttp.send("user=" + this.value);
//5,给xmlHttp对象的onreadystatechange事件注册监听
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
/**
* 获取服务器的响应,判断是否为1
* 若为1,则获取userError标签,设置内容:用户名已被注册
*/
var text = xmlHttp.responseText;
if (text == "1") {
var userError = document.getElementById("userError");
userError.innerHTML = "用户名已注册";
}else {
var userError = document.getElementById("userError");
userError.innerHTML = "";
}
}
};
}
};
</script>
</head>
<body>
<h1 style="text-align: center">Welcome to join us!</h1>
<form method="post" >
用户名:<input id="user" name="user" type="text"><span id="userError" style="color: red;margin-left: 10px"></span>
<br/>
密码:<input >
<br/>
<button type="submit">注册</button>
</form>
</body>
</html>
四,效果