register.jsp页面信息
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注册页面</title>
<script type="text/javascript">
function createXMLHttpRequest() { //创建XMLHttpRequest
try {
return new XMLHttpRequest(); //直接创建对象,不适用与IE5,IE6
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");//对于不适用的,创建合适的对象
} catch (e) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
function send() {
var xmlHttp = createXMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState === 4 && xmlHttp.status == 200) { //判断xmlHttp的状态是否完毕
if(xmlHttp.responseText == "true") {
//判断ajax从Servlet中返回的信息,即判断用户名是否存在。
document.getElementById("Username_Error_Massage").innerHTML=
"<font color='red'>用户名已被注册!</font>";
//弹出警告信息,告知不可适用该用户名
document.all("register").disabled=true; //将注册按钮关闭,无法点击
}else {
document.getElementById("Username_Error_Massage").innerHTML = "账号可用!";
document.all("register").disabled=false; //开启注册按钮
}
}
};
var method = "POST"; //定义传输方式
var url="/Taobei/registerServlet?" + new Date().getTime();
//定义对应的URL,为了避免浏览器的缓存造成干扰,加上时间戳
xmlHttp.open(method, url, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var username = document.getElementById("username").value;
if(username===undefined || username === null || username === ""){
//判断用户名是否为空
alert("账号不能为空!"); // 弹出警告信息
}
xmlHttp.send("username=" + username); //发送信息
}
function inspect_password() { //判断两次用户名是否一致,不一致时,注册按钮不可使用
if(document.getElementById("password01").value !=
document.getElementById("password02").value){
document.getElementById("div_password").innerHTML
= "<font color='red'>两次密码不一致</font>"
document.all("register").disabled=true;
}else {
document.getElementById("div_password").innerHTML
= "密码一致!"
document.all("register").disabled=false;
}
}
</script>
</head>
<body>
<h1>欢迎来到注册页面</h1>
<hr>
<form action="/registerServlet" method="post">
账号:<input type="text" name="username" id="username" onblur="send()"/>
<span id="Username_Error_Massage"></span>
<br/>
密码:<input type="password" name="password" id="password01"/>
<br/>
重复密码:<input type="password" name="password_repeat" id="password02" onblur="inspect_password()"/>
<span id="div_password"></span>
<br/>
邮箱:<input type="email" name="email"/><br/>
<input type="submit" value="提交" name="register"/>
</form>
</body>
</html>
registerServlet的代码如下:
package Servlet;
import javax.management.Query;
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;
/**
* Created by user on 17-7-20. * This Servlet suppport register page.
*/
@WebServlet(name = "registerServlet", value = "/registerServlet")
public class registerServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
if (username.equals("test")) { //单纯测试,不进行连接数据库,,相同返回true
response.getWriter().print(true);
} else {
//不同返回false;
response.getWriter().print(false);
}
}
}
// 最后结果如下: