JSP源码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>账号注册</title>
<script type="text/javascript">
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return new ActiveXObject(Msxm12.XMLHTTP);
}catch(e){
try{
return new ActiveXObject(Microsoft.XMLHTTP);
}catch(e){
throw e;
}
}
}
}
window.onload = function(){
var uname = document.getElementById("uname");
uname.onblur = function(){
//1、得到异步对象
var xmlhttp = createXMLHttpRequest();
//2、打开连接<c:url value='/register'/>
var user = uname.value;
xmlhttp.open("POST","register?username="+user,true)
//3、设置请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
//4、发送请求
xmlhttp.send(null);
//5、给cmlhttp的onreadystatechange事件注册监听
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var text = xmlhttp.responseText;
var span = document.getElementById("span");
if(text == "1"){
span.innerHTML = "该账号已经被占用了";
}else{
span.innerHTML = "";
}
}
};
};
};
</script>
</head>
<body>
<form action="" method="post">
<h1>演示账号是否被注册</h1>
账号:<input type="text" name="username" id="uname"/><span id="span"></span><br/>
密码:<input type="password" name="password" id="pass"/><br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>
Servlet源码:
package register;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/register")
public class register extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
if (username.equalsIgnoreCase("wjj")) {
response.getWriter().print("1");
}else {
response.getWriter().print("0");
}
}
}
常见问题:
1、编码问题:在访问jsp中可能出现中文乱码问题
应该在Servlet文件中设置如下属性:
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
2、在鼠标离开账号输入框后并没有出现想象的结果----提示用户名是否已被注册
var user = uname.value;
xmlhttp.open(“POST”,“register?username=”+user,true); //打开连接 因为用户名是动态变量,所有要把获取都是用户名放在双引号外面
xmlhttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”) //使用post提交表单的方式要加上这段请求头
xmlhttp.send(null); //若不填入null 有