一、实验简介
目的：检验输入登录名在数据库中是否存在，如果存在，当鼠标移出登录名框后，会提示用户名已存在，并且鼠标指针自动回到登录名框内。
操作步骤：
1、获取登录名的值
2、根据获取的登录名，组织查询条件，查询用户信息。
*如果值存在，不能保存
*如果值不存在，可以保存
二、实验操作
jsp部分:
<s:textfield name="logonName" id="logonName" size="20" maxlength="25" onblur="checkLogonName()" />
ajax部分：
1 //创建Ajax引擎 2 function createXmlHttpRequest(){ 3 var xmlHttp; 4 try{ 5 //Firefox,Opera,safari 6 xmlHttp=new XMLHttpRequest(); 7 }catch(e){ 8 try{ 9 //internet Explorer 10 xmlHttp=new ActiveXObject("Mxxml2.XMLHTTP"); 11 }catch(e){ 12 try{ 13 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 14 }catch(e){} 15 } 16 } 17 return xmlHttp; 18 }
1 function checkLogonName(){ 2 var logonName=document.getElementById("logonName").value; 3 //第一步:创建一个ajax引擎 4 xmlHttp=createXmlHttpRequest(); 5 6 //第二步:事件处理函数，实质上相当于一个监听，监听服务器与客户端的连接状态 7 xmlHttp.onreadystatechange=function(){ 8 //存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 9 if(xmlHttp.readyState==4){ 10 /** 11 readyState：存有 XMLHttpRequest 的状态。从0到4发生变化。 12 0: 请求未初始化 13 1: 服务器连接已建立 14 2: 请求已接收 15 3: 请求处理中 16 4: 请求已完成，且响应已就绪 17 **/ 18 if(xmlHttp.status==200){ 19 /** 20 status： 21 400: 未找到页面 22 200："OK" 23 **/ 24 var data=xmlHttp.responseText; 25 /** 26 responseText 获得字符串形式的响应数据。 27 responseXML 获得 XML 形式的响应数据。 28 **/ 29 if(data==1){ 30 //说明已经存在 31 alert("当前输入的登录名["+logonName+"]已经存在"); 32 document.getElementById("logonName").value=""; 33 document.getElementById("logonName").focus(); 34 } 35 } 36 } 37 } 38 39 //第三步:与后台服务器创建一个连接 40 xmlHttp.open("POST","../../CheckLogonName",true); 41 /** 42 open(method,url,async) 43 规定请求的类型、URL 以及是否异步处理请求。 44 method：请求的类型；GET 或 POST 45 url：文件在服务器上的位置 46 async：true(异步)或 false(同步) 47 **/ 48 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求头 49 //第四步:发送请求的参数 50 xmlHttp.send("logonName="+logonName); 51 /** 52 send(string) 53 将请求发送到服务器。 54 string：仅用于 POST 请求 55 **/ 56 /** 57 GET 还是 POST？ 58 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。 59 然而，在以下情况中，请使用 POST 请求： 60 1: 无法使用缓存文件（更新服务器上的文件或数据库） 61 2: 向服务器发送大量数据（POST 没有数据量限制） 62 3: 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠 63 **/ 64 }
路径设置：
在web.xml配置文件中，新建一个Servlet-mapping和Servlet
<servlet> <servlet-name>CheckLogonName</servlet-name> <servlet-class>cn.itcast.elec.servlet.CheckLogonName</servlet-class> </servlet> <servlet-mapping> <servlet-name>CheckLogonName</servlet-name> <url-pattern>/checkLogonName</url-pattern> </servlet-mapping>
新建一个Servlet文件
1 IElecUserService elecUserService=(IElecUserService)ServiceProvider.getService(IElecUserService.SERVICE_NAME); 2 public void doPost(HttpServletRequest request, HttpServletResponse response) 3 throws ServletException, IOException { 4 5 response.setCharacterEncoding("UTF-8"); 6 response.setContentType("text/html;charset=utf-8"); 7 PrintWriter out = response.getWriter(); 8 String logonName=request.getParameter("logonName"); 9 /** 10 * checkflag:判断当前登录名是否在数据库中存在 11 * 如果查询结果有值，checkflag=1;则，数据库中有重复值 12 * checkflag=2，数据库中没有重复值 13 */ 14 String checkflag=elecUserService.checkLogonName(logonName); 15 out.print(checkflag); 16 out.flush(); 17 out.close(); 18 }
1 public String checkLogonName(String logonName) { 2 // TODO Auto-generated method stub 3 String hqlWhere=" and o.logonName = ? "; 4 Object [] params={logonName}; 5 List<ElecUser> list=elecUserDao.findCollectionByConditionNoPage(hqlWhere, params, null); 6 String checkflag=""; 7 if(list!=null&&list.size()>0){ 8 checkflag="1"; 9 }else{ 10 checkflag="2"; 11 } 12 return checkflag; 13 }