1.jsp文件
<%@ page pageEncoding="utf-8"
contentType="text/html;charset=utf-8"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>regist</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
xhr= new ActiveXObject('Microsoft.XMLHTTP');
}
return xhr;
}
var xhr = getXhr();
function check_userName(){
var nameNode = document.getElementsByName('name')[0];
var msgNode = document.getElementById('error_msg');
var uri = 'check_userName.do?name='+nameNode.value;
xhr.open('get',encodeURI(uri),true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var txt = xhr.responseText;
msgNode.innerHTML=txt;
}else{
msgNode.innerHTML='验证用户名错误';
}
};
msgNode.innerHTML='正在检查.....';
xhr.send(null);
}
</script>
</head>
<body>
<div id="wrap">
<div id="top_content">
<div id="header">
<div id="rightheader">
<p>
2014/07/16
<br />
</p>
</div>
<div id="topheader">
<h1 id="title">
<a href="#">main</a>
</h1>
</div>
<div id="navigation">
</div>
</div>
<div id="content">
<p id="whereami">
</p>
<h1>
注册
</h1>
<form action="regist.do" method="post">
<table cellpadding="0" cellspacing="0" border="0"
class="form_table">
<tr>
<td valign="middle" align="right">
用户名:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="name" onblur="check_userName();"/><span id='error_msg'></span>
</td>
</tr>
<tr>
<td valign="middle" align="right">
真实姓名:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="realname" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
密码:
</td>
<td valign="middle" align="left">
<input type="password" class="inputgri" name="password" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
性别:
</td>
<td valign="middle" align="left">
男
<input type="radio" class="inputgri" name="sex" value="m" checked="checked"/>
女
<input type="radio" class="inputgri" name="sex" value="f"/>
</td>
</tr>
<tr>
<td valign="middle" align="right">
验证码:
<img id="num" src="validate" />
<a href="javascript:;" onclick="document.getElementById('num').src = 'validate?'+(new Date()).getTime()">换一张</a>
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="validate" />
</td>
</tr>
</table>
<p>
<input type="submit" class="button" value="Submit »" />
已经有帐号？<input type="button" class="button" value="Login»" onclick="javascript:location='login.jsp'" />
</p>
</form>
</div>
</div>
<div id="footer">
<div id="footer_bg">
ABC@126.com
</div>
</div>
</div>
</body>
</html>
2.服务器端对XMLHttpRequest的处理逻辑
else if(action.equals("check_userName.do")){
//System.out.println("发送过来XMLhttp");
String name = req.getParameter("name");
//System.out.println(name);
try {
//System.out.println(userDao.findUserByName(name));
if(!userDao.findUserByName(name)){
out.println("用户名可用");
}else{
out.println("用户名已存在");
}
} catch (SQLException e) {
e.printStackTrace();
}
3.截图