ajax 实现无刷新验证用户名是否存在

<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" onblur="validate()"> //onblur失去焦点是调用一个函数
<span id="usermsg"></span>
</tr>
<input name="regsubmit" value="提 &nbsp; 交" 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>");
%>
//////////////////////////////////////////////////////