Ajax+Servlet无刷新验证用户名

页面端(login.jsp):

<% ... @ page language="java" import="java.util.*" pageEncoding="gb2312" %>     
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >     
< html >     
  < head >     
  < TITLE > Ajax验证用户名是否存在例子 </ TITLE >     
  < script > ...     
     
 //设一个变量    
     
 var XMLHttpReq=false;    
  //创建一个XMLHttpRequest对象    
  function createXMLHttpRequest()...{    
    if(window.XMLHttpRequest)...{ //Mozilla     
     XMLHttpReq=new XMLHttpRequest();    
     }    
     else if(window.ActiveXObject)...{    
      try...{    
       XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");    
       }catch(e)...{    
        try...{    
         XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");    
         }catch(e)...{}    
         }    
        }    
       }    
  //发送请求函数    
  function send(url)...{    
   createXMLHttpRequest();    
   XMLHttpReq.open("get",url,true);    
   XMLHttpReq.onreadystatechange=proce;   //指定响应的函数    
   XMLHttpReq.send(null);  //发送请求    
   }    
  function proce()...{    
   if(XMLHttpReq.readyState==4)...{ //对象状态    
    if(XMLHttpReq.status==200)...{//信息已成功返回，开始处理信息        
                <!--测试读取xml开始-->    
    var root=XMLHttpReq.responseXML;    
    var res=root.getElementsByTagName("content")[0].firstChild.data;    
    window.alert(res);     
     <!--测试读取xml结束-->       
    //var xmlReturn = XMLHttpReq.responseText;    
    //window.alert(xmlReturn);    
    }else...{    
     window.alert("所请求的页面有异常");    
     }    
     }    
     }    
  //身份验证     
  function check()...{    
   var name=document.getElementById("name").value;    
        
    if(name=="")...{    
     alert("请输入姓名!");    
     return false;    
     }    
     else...{    
      //send('login?name='+name);      
      document.getElementById("load").style.display='';        
      send('login.do?name='+name);     
      document.getElementById("load").style.display='none';              
      }    
     }    
         
   </ script >     
  </ head >     
     
  < body >     
  < form  action ="login"  method ="post" >     
   < table >     
       < tr >< td > 姓名: &nbsp; < input  id ="name"  type ="text"  name ="name" />< p >     
        < div  id =load  style ="display:none; position:absolute;right:0px;top:0px;background:#FF5B5B;border:1px solid" > 正在验证用户名,请稍后…… </ div >< p >     
          < input  type ="button"  value ="检测!"  onClick ="check()" />     
       </ td >     
      </ tr >     
      </ table >     
      </ form >     
  </ body >     
</ html >     

js 代码

AjaxServlet.java

java 代码

import  java.io.IOException;    
import  java.io.PrintWriter;    
import  javax.servlet.ServletException;    
import  javax.servlet.http.HttpServlet;    
import  javax.servlet.http.HttpServletRequest;    
import  javax.servlet.http.HttpServletResponse;    
   
   
public   class  AjaxServlet  extends  HttpServlet  ... {    
Logger log = Logger.getLogger(this.getClass());    
public void doGet(HttpServletRequest request, HttpServletResponse response)    
    throws ServletException,IOException ...{    
   response.setContentType("text/xml; charset=GBK");    
   PrintWriter out = response.getWriter();    
     out.print(2);    
    }    
}     
// Process the HTTP Post request    
public   void  doPost(HttpServletRequest request, HttpServletResponse response)    
     throws  ServletException, IOException  ... {    
   doGet(request, response);    
}     
   
// Process the HTTP Put request    
public   void  doPut(HttpServletRequest request, HttpServletResponse response)    
     throws  ServletException, IOException  ... {    
}     
   
// Process the HTTP Delete request    
public   void  doDelete(HttpServletRequest request,    
    HttpServletResponse response)  throws  ServletException, IOException  ... {    
}     
   
// Clean up resources    
public   void  destroy()  ... {    
}     
}