IT人生
专注于java相关技术.
posts - 53,comments - 87,trackbacks - 0
使用struts2+prototype.js创建无刷新注册检测（转载）

最近有一个项目要上，决定struts2+hibernate+spring开发，可现在AJAX如火如荼，而且功能上也大大方便了程序员开发和WEB页面，如果不用，太对不起Jesse James Garrett（AJAX的创始人）。可我以前一直是做后台的开发，对前台的JS知识是凤毛麟角，直接尝试用AJAX，时间、精力浪费不起。后来，在与一同事聊天时，提到了prototype.js，说学会了这个，AJAX将成囊中之物，姑且对他的话持保留态度。但在看了这个JS的源码后，真是的柳暗花明又一村。

prototype.js是什么?

让我来告诉你，prototype.js是由Sam Stephenson写的一个javascript类库。这个构思奇妙，而且兼容标准的类库，能帮助你轻松建立有高度互动的web2.0特性的富客户端页面。

如果你最近尝试使用它，你大概了解到文档并不是作者的一个强项。和在我以前使用这个类库的不少开发者一样，一开始，我不得不一头扎进阅读prototype.js的源代码和实验它的功能中。因此，如果你是偷懒者，可以在GOOGLE里搜索关于它的东西。

开始创建项目

项目介绍：项目中使用了struts2,spring IOC,主要完成了一个无刷新检测用户名是否已经在数据库中注册的简单功能。

本文重点介绍prototype.js，因此关于struts2的东西，将不重点讲解。

首先看一下，struts2的配置文件：  

  1. <action name="register" method="register" class="userAction">  
  2.    <result>/register_success.jspresult>  
  3.    <result name="input">/register.jspresult>  
  4. action>  
  5. <action name="check" method="check" class="userAction">            
  6. action>  

可以看到这里有两个Action，“register”是用户提交注册的，“check”是为用户名检测预留的。两个Action的方法都是在userAction中，而这个类交给了spring来管理，看以下代码： 

  1. <bean id="userAction" class="com.caitong.pingou.action.UserAction"         
  2.         autowire="byName">  
  3. bean>  

然后，我们再看一下userAction的东西吧。

java 代码
  1. public class UserAction extends ActionSupport {   
  2.   
  3.  private User user;//User类是一个很简单的JAVA BEAN,主要包括用户名，密码，年龄，性别等属性   
  4.  public User getUser() {   
  5.   return user;   
  6.  }   
  7.   
  8.  public void setUser(User user) {   
  9.   this.user = user;   
  10.  }   
  11.   
  12.  public String execute(){   
  13.   return null;   
  14.  }   
  15.     
  16.  /**  
  17.   * 客户端检测用户名是否已经注册过  
  18.   *  
  19.   */  
  20.  public void check(){   
  21.   HttpServletResponse response = ServletActionContext.getResponse(); //取response对象   
  22.   HttpServletRequest request = ServletActionContext.getRequest();//取request对象   
  23. //服务器响应   
  24.   response.setContentType("text/xml;charset=utf-8");   
  25.   response.setHeader("Cache-Control","no-cache");   
  26.   
  27.   String name = request.getParameter("user.username");   
  28.   
  29.   String msgStr="";   
  30.   boolean flag = name.equals("abc");//从数据库中检测该用户名是否已经存在     
  31.   if(flag){      
  32.       msgStr ="对不起,此用户名已经存在,请更换用户名";   
  33.   }      
  34.   else{   
  35.    msgStr ="用户未被注册,可以使用!";      
  36.   }   
  37.      
  38.   try{//response写信息   
  39.    response.getWriter().print(msgStr);   
  40.    response.getWriter().close();   
  41.   }catch(IOException e){   
  42.    e.printStackTrace();   
  43.   }    
  44.  }   
  45.   
  46. /**  
  47.   * 提交注册  
  48.   * @return  
  49.   */  
  50.  public String register(){   
  51.   if(!abc".equals(user.getUsername()){//如果数据库中没有用户   
  52.       save(User);//伪代码，保存用户   
  53.   else  
  54.       return INPUT;   
  55.    reutrn SUCCESS;   
  56. }   

基本上在类里已经注释过了，自己的工程是通过服务层来判断用户是否已经注册过，其中服务层又是调用DAO层，所有的CLASS都交给SPRING来管理，其中标识伪代码的部份，有兴趣的人，可以自己试着写一下，从数据库取数据，然后判断。

最后一起看一下WEB层的register.jsp，prototype将粉墨登场

 

js 代码
  1. <%@ page contentType="text/html; charset=utf-8" %>   
  2. <%@ taglib  prefix="s" uri="/struts-tags"%>   
  3.   
  4. <html>   
  5. <head>   
  6. <title>注册</title>   
  7. <script language="JavaScript" type="text/javascript"    
  8.         src="js/prototype.js"></script>   
  9. <script language="JavaScript">     
  10.     function showResponse(originalRequest){               
  11.         Element.hide($('load'));//用设定它的 style.display 为 'none'来隐藏每个传入的元素。   
  12.         alert(originalRequest.responseText); //弹出服务器端的msgStr字符串   
  13.         Form.reset($('register'));//重置表单。和调用表单对象的 reset() 方法一样。   
  14.         Field.focus($('user.username')); //移动焦点到给定的表单项目。   
  15.                  
  16.     }   
  17.     function showDiv(){        
  18.         Element.show($('load'));//用设定它的 style.display 为 ''来显示每个传入的元素。   
  19.     }   
  20.     //身份验证    
  21.     function check(){          
  22.         var pars=Form.Element.serialize($('user.username'));   
  23.         var url='check.action'; //返回元素的 名称=值 对, 如 'elementName=elementValue'           
  24.            
  25.         if($F('user.username')==""){   
  26.             alert("请输入姓名!");   
  27.             return false;   
  28.         }   
  29.         else{   
  30.             var myAjax = new Ajax.Request(   
  31.                     url,{method:'get',   
  32.                     parameters:pars,   
  33.                     onLoading:showDiv,   
  34.                     onComplete:showResponse,   
  35.                     onFailure:reportError});//构造函数，见讲解   
  36.        }   
  37.     }   
  38.     function reportError(){   
  39.         alert('严重故障，请重试！');   
  40.     }   
  41.       
  42.         
  43. </script>   
  44.   
  45. <s:head/>   
  46. </head>   
  47.     

 

  1. <body>  
  2.         <center>  
  3.         <br/><br/><br/><br/><br/><br/><br/><br/>  
  4.         <p><div id="load" style="display:none">正在验证用户名,请稍后……</div></p>  
  5.                
  6.         <s:form action="regiseter" method="post">  
  7.             <s:textfield name="user.username" label="UserName"></s:textfield>  
  8.             <input type="button" value="检测!" onClick="check()"/>  
  9.             <s:textfield name="user.password" label="PassWord"></s:textfield>  
  10.             <s:textfield name="user.age" label="Age"></s:textfield>  
  11.             <s:textfield name="user.sex" label="Sex"></s:textfield>  
  12.             <s:submit></s:submit>  
  13.         </s:form>  
  14.         </center>  
  15.        
  16.   </body>  
  17. </html>  

减肥瘦身品总汇     值得信赖*脉脉美妆*正品现货谢绝讲价     〓深港商盟〓名品欧衣坊（美国休闲品牌AF系列）     QQ三国游戏币及道具专卖店     小脸红红的瘦身旗舰店
posted on 2009-03-07 21:21 龙华城 阅读(606) 评论(0)  编辑  收藏 所属分类: Struts2

只有注册用户登录后才能发表评论。
网站导航:
 
Copyright ©2024 龙华城 Powered By博客园 模板提供：沪江博客