SSH在线商城是否有ajax完成的用户名异步验证

小伙伴们在上网的时候需要下载或者看一些视频资料，或者在逛淘宝的时候，我们都需要注册一个用户。当我们填写各种信息并点击确定时，系统会提示用户名已经存在。边肖认为，为什么我们在填写用户名的时候，她会自动提示用户名已经存在，而我们在填写了这么多信息之后才提示，才需要浪费这么多情感呢？在边肖最近的项目中，我们遇到了这个问题。我们可以使用ajax来完成用户名的存在。今天的博客，边肖就简单总结一下如何使用ajax完成验证，并向各位朋友多请教一下`(* _ *)'！

首先，ajax完成了用户名的异步验证，那么我们应该怎么做呢？在这里，我们需要被一个事件触发，即当我们输入用户名时，鼠标移开。这个事件叫做on bulr，即失去焦点。相比之下，鼠标放在里面获得焦点，我们称之为onfocus。那么，如果我们失去了焦点，我们该怎么办呢？首先找到注册页面，在注册页面找到用户名部分的代码，然后添加on bulr=check username()验证用户名。然后我们将编写checkUsername方法，具体代码如下：

span style=' font-size :18 px；'检查username(){//获取文本框值： varusername=document . getelementbyid(' username ')。价值；//1.创建异步交互对象var xhr=createXmlHttp()；//2.设置侦听xhr . onreadystatechange=function(){ if(xhr . readystate==4){ if(xhr . status==200){ document . getelementbyid(' span 1 ')。innerhtml=xhr.responsetext}}} //3、打开连接xhr.open ('get '，' $ { page context . request . context path }/user _ findbyname . action？Time=' newdate()。gettime ()' username='，true)//4。send xhr . send(null)；}函数createXMlhttp(){ var XMlhttp；尝试{ XMlhttp=new XMlhttprequest()；} catch(e){ try { XMlhttp=new ActiveX object(' Msxml 2。XMLHTTP’)；} catch(e){ try { xmlHttp=new ActiveX object(' Microsoft。XMLHTTP’)；} catch (e) {} } }返回xmlHttp} /span接下来我们构建实体Vo，实现模型驱动，自动实现封装。具体代码如下：

span style=' font-size :18 px'包裹cn。它投了。购物。用户。VO；公共类用户{私有整数用户界面设计（User Interface Design的缩写）私有字符串用户名；私有字符串密码；私有字符串名称；私人字符串电子邮件；私人字符串电话；私有字符串地址；私有整数状态；私有字符串代码；public Integer getUid(){ return uid；} public void setUid(整数uid){这个。uid=uid}公共字符串getUsername(){ 0返回用户名；} public void setUsername(String username){ this。用户名=用户名；}公共字符串getPassword(){ 0返回密码；}公共void set密码(String密码){ this。密码=密码；} public String getName(){ return name；} public void setName(String name){ this。name=name} public String getEmail(){ return email；} public void setEmail(String email){ this。email=email} public String getPhone(){ return phone；}公共void set电话(String电话){ this。phone=电话；} public String GetAdr(){ return addr；} public void setAddr(String addr){ this。addr=addr} public Integer getState(){ return state；} public void setState(Integer state){ this。状态=状态；}公共字符串GetCode(){ 0返回代码；} public void setCode(String code){ this。code=code} }/span我们要接收参数，实现模型驱动，操作支持直接实现模型驱动即可，接着来编写我们的创建交互式、快速动态网页应用的网页开发技术代码，需要向行为中进行提交，我们来编写用户动作中的代码，具体代码如下所示：

span style=' font-size :18 px'包裹cn。它投了。购物。用户。行动；导入Java。io。ioexception导入javax。servlet。http。HttpServletResponse导入组织。阿帕奇。支柱2。servletactioncontext导入cn。它投了。购物。用户。服务。用户服务；导入cn。它投了。购物。用户。VO。用户；导入com。开放式交响乐。xwork 2。行动支持；导入com。开放式交响乐。xwork 2。模型驱动；/** * 用户模块行动的类* @作者花* */公共类用户动作扩展了ActionSupport实现了modeldrivernuser {//模型驱动使用的对象私有用户用户=新用户();公共用户getModel(){返回用户；} //注入用户服务私有用户服务用户服务；public void setuser service(用户服务用户服务){ this。用户服务=用户服务；} /** * 跳转到注册页面的执行方法*/public String regist page(){返回“regist page”；} /** * ajax进行异步校验用户名的执行方法* @抛出IOException */public String findByName()抛出IOException{ //调用服务进行查询用户存在用户=用户服务。findbyusername(用户。getusername())；//获得反应对象，向页面输出HttpServletResponse响应=servletactioncontext。getresponse()；回应。setcontenttype(' text/html；字符集=UTF-8 '；//判断if(existUser！=null){ //查询到该用户：用户名已经存在response.getWriter().println('font color='red ')用户名已经存在/font ')；}else{ //没查询到该用户：用户名可以使用response.getWriter().println('font color='green '用户名已经存在/font ')；}返回无} /** *用戶注册的方法：*/public String regist(){ return NONE；} } /span接着，我们需要做的就是把服务和大刀配置到应用程序上下文中，代码如下所示：

span style=' font-size :18 px'！-服务的配置============================-bean id=' user service ' class=' cn。它投了。购物。用户。服务。用户服务属性名称='userDao' ref='userDao'//bean！用户道的配置============================-bean id=' userdo ' class=' cn。很快。购物。用户。刀。用户多属性名称=“会话工厂”ref=“会话工厂”/属性/bean /span配置好了之后，我们需要在用户道里面完成查询，具体代码如下所示：

span style=' font-size :18 px'包裹cn。它投了。购物。用户。道；导入组织。弹簧框架。ORM。冬眠3。支持。hibernate Dao支持；导入Java。乌提尔。列表；导入cn。它投了。购物。用户。VO。用户；/** * 用户模块持久层代码* @作者花* */公共类用户道扩展了休眠支持{ //按名次查询是否有该用户公共用户查找用户名（字符串用户名){字符串hql='来自用户，其中用户名=?'；列表用户列表=this.getHibernateTemplate().find(hql，用户名);如果(列表！=空列表。size()0){返回列表。get(0)；}返回null} } /span接着，我们需要在服务里面完成对大刀的调用，具体代码如下所示：

span style=' font-size :18 px'包裹cn。它投了。购物。用户。服务；导入组织。弹簧框架。交易。注释。交易性的；进口cn。它投了。购物。用户。刀。用户Dao导入cn。它投了。购物。用户。VO。用户；/** * 用户模块业务层代码* @作者花* */@事务性公共类UserService { //注入用户道私有用户道用户道；public void setuserdo(user do userdo){ this。userdo=userdo} //按用户名查询用户的方法公共用户查找比用户名（字符串用户名){返回用户道。查找比用户名（用户名);} } /span接着我们需要在用户动作中进行调用，具体代码如下所示：

span style=' font-size :18 px'包裹cn。它投了。购物。用户。行动；导入Java。io。ioexception导入javax。servlet。http。HttpServletResponse导入组织。阿帕奇。支柱2。servletactioncontext导入cn。它投了。购物。用户。服务。用户服务；导入cn。它投了。购物。用户。VO。用户；导入com。开放式交响乐。xwork 2。行动支持；导入com。开放式交响乐。xwork 2。模型驱动；/** * 用户模块行动的类* @作者花* */公共类用户动作扩展了ActionSupport实现了modeldrivernuser {//模型驱动使用的对象私有用户用户=新用户();公共用户getModel(){返回用户；} //注入用户服务私有用户服务用户服务；public void setuser service(用户服务用户服务){ this。用户服务=用户服务；} /** * 跳转到注册页面的执行方法*/public String regist page(){返回“regist page”；} /** * ajax进行异步校验用户名的执行方法* @抛出IOException */public String findByName()抛出IOException{ //调用服务进行查询用户存在用户=用户服务。findbyusername(用户。getusername())；//获得反应对象，向页面输出HttpServletResponse响应=servletactioncontext。getresponse()；回应。setcontenttype(' text/html；字符集=UTF-8 '；//判断if(existUser！=null){ //查询到该用户：用户名已经存在response.getWriter().println('font color='red ')用户名已经存在/font ')；}else{ //没查询到该用户：用户名可以使用response.getWriter().println('font color='green '用户名已经存在/font ')；}返回无} /** *用戶注册的方法：*/public String regist(){ return NONE；} } /span最后，我们来编写映射文件里面的内容，具体代码如下所示：

span style=' font-size :18 px'？可扩展标记语言版本='1.0 '编码='UTF-8 '？DOCTYPE Hibernate-Mapping PUBLIC '-//Hibernate/Hibernate Mapping DTD 3.0//EN ' ' http://www .冬眠。org/DTD/Hibernate-Mapping-3.0。休眠映射类名=' cn。很快。购物。用户。VO。user ' table=' user ' id name=' uid ' generator class=' native '/id property name=' username '/property name=' password '/property name=' name '/property name=' email '/property name=' phone '/property name=' addr '不要忘记了，要把她陪到应用程序上下文里面，具体代码如下所示：

span style=' font-size :18 px'！-配置冬眠的其他的属性-属性名=' hibernate properties ' props prop key=' hibernate。质量组织。冬眠。质量。MySQL quality/prop key=' hibernate。show _ SQL ' true/prop key=' hibernate。format _ SQL ' true/prop key=' hibernate。连接。自动提交“false/prop key=”hibernate。hbm2ddl。自动'更新/道具/属性！-配置冬眠的映射文件-属性名='mappingResources '列表值cn/it cast/shop/user/VO/user。hbm。XML/值/列表/属性/跨度代码到此结束，下面给大家展示下效果图：

小编总结：

实现的思路是这样滴`(*_*),首先是由在布尔进行事件触发，第二，编写创建交互式、快速动态网页应用的网页开发技术的代码，向行为中提交，传递参数用户名，第三步，编写行动，接收用户名，实现模型驱动配置到春天中，第四步，编写DAO，集成休眠支持，在配置中注入会话工厂，最后编写服务，注入UserDao，还有事务管理，一个简单的演示，还请小伙伴多多指教，宋承宪网上商城，精彩未完待续~~~