<script type="text/javascript">
var req;
function validate() {
var idField = document.getElementById("userid");
var url = "Validate.jsp?id=" + escape(idField.value);//发送的地址,escape转中文的编码
//根据不同的浏览器new不同的对象
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//为IE浏览器
req = new ActiveXObject("Microsoft.XMLHTTP");
}
//req可以背后发请求
req.open("GET", url, true);//true表示以异步方式提交
//当req的状态修改的时候,调用callback函数
req.onreadystatechange = callback;
req.send(null);
}
function callback() {
if(req.readyState == 4) {//=4表示请求回到客户端
if(req.status == 200) {//反馈完全正常
//responseXML把反馈当做XML处理
//getElementsByTagName("msg")[0]拿到第一个msg标签
var msg = req.responseXML.getElementsByTagName("msg")[0];
//msg标签中的第一个子节点的值
setMsg(msg.childNodes[0].nodeValue);
}
}
}
function setMsg(msg) {
//alert(msg);
mdiv = document.getElementById("usermsg");
if(msg == "invalid") {
mdiv.innerHTML = "<font color='red'>username exists</font>";
} else {
mdiv.innerHTML = "<font color='green'>congratulations! you can use this username!</font>";
}
}
</script>
<form method="post" name="register" action="Register.jsp" onSubmit="this.regsubmit.disabled=true;">
<table class="tableborder" align="center" cellpadding="4" cellspacing="1" width="97%">
<tr>
<td class="altbg1" width="21%">用户名:</td>
<td class="altbg2"><input id="userid" name="username" size="25" maxlength="25" type="text" οnblur="validate()"> //onblur失去焦点是调用一个函数
<span id="usermsg"></span>
</tr>
<input name="regsubmit" value="提 交" type="submit"></center>
</form>
//下面是Validate.jsp代码
//
<%
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-store"); //HTTP1.1 。阻止浏览器缓存
response.setHeader("Pragma", "no-cache"); //HTTP1.0 。阻止浏览器缓存
response.setDateHeader("Expires", 0); //prevents catching at proxy server 。阻止代理服务器缓存
System.out.println(request.getParameter("id"));
//check the database,在这里检查用户名是否存在,用if,else返回不同的“<msg>返回的信息内容<mag>”
response.getWriter().write("<msg>valid</msg>");
%>
//