论坛首页 → Web前端技术论坛 →

使用struts2+prototype.js创建无刷新注册检测

浏览 12370 次
锁定老帖子 主题：使用struts2+prototype.js创建无刷新注册检测
精华帖 (1) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • xianglg
  • 等级: 初级会员
  • 性别:
  • 文章: 26
  • 积分: 30
  • 来自: 杭州
   发表时间：2007-06-06  

最近有一个项目要上，决定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>  

  • 讲解：

    • 应该说Form的元素比较简单，如果会struts2的话，肯定是a piece of cake!。看上面的JS代码，首先引用prototype.js到本页面中。后面大家可能注意到了一些特殊符号如$。

    $() 方法是在DOM中使用过于频繁的 document.getElementById() 方法的一个便利的简写，就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。比起DOM中的方法，这个更胜一筹。你可以传入多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。

    $F()方法是另一个非常受欢迎的简写。它可以返回任何输入表单控件的值，如文本框或下拉框。 这个方法可以传入元素的id或者元素自己。

    Ajax.Request类：如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建XMLHttpRequest对象并且异步的跟踪它的进程， 然后解析出响应 然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。

    你看到传入 Ajax.Request构造方法的第二个对象了吗？ 参数{method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为 method 值为 'get'的属性，另一个属性名为 parameters 包含HTTP请求的查询字符串，和一个onComplete 属性/方法包含函数showResponse。

    还有一些其它的属性可以在这个对象里面定义和设置，如 asynchronous，可以为true 或 false 来决定AJAX对服务器的调用是否是异步的（默认值是 true）。

    这个参数定义AJAX调用的选项。在我们的例子中，在第一个参数通过HTTP GET命令请求那个url，传入了变量 pars包含的查询字符串， Ajax.Request 对象在它完成接收响应的时候将调用showResponse 方法。

    也许你知道， XMLHttpRequest在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 对象在任何阶段调用自定义方法 ，Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为 onXXXXX 属性/方法中提供自定义的方法对象。 就像我们例子中的 onComplete 。你传入的方法将会被用一个参数调用，这个参数是 XMLHttpRequest 对象自己。你将会用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP结果代码的 status 属性。

    还有另外两个有用的选项用来处理结果。我们可以在onSuccess 选项处传入一个方法，当AJAX无误的执行完后调用， 相反的，也可以在onFailure选项处传入一个方法，当服务器端出现错误时调用。正如onXXXXX 选项传入的方法一样，这两个在被调用的时候也传入一个带有AJAX请求的XMLHttpRequest对象。

    我们的例子没有用任何有趣的方式处理这个 XML响应， 我们只是把这段XML放进了一个文本域里面。对这个响应的一个典型的应用很可能就是找到其中的想要的信息，然后更新页面中的某些元素， 或者甚至可能做某些XSLT转换而在页面中产生一些HTML。更完全的解释，请参照 Ajax.Request 参考 和 Ajax选项参考。

    小结：

    有兴趣的人建议参考prototype.js的源码，一共2000多行，例子中也只是用了一点，虽没有AJAX的系统，但用于普通的WEB功能，个人觉得绰绰有余。

     
    返回顶楼
             
    • xianglg
    • 等级: 初级会员
    • 性别:
    • 文章: 26
    • 积分: 30
    • 来自: 杭州
       发表时间：2007-06-06   
    <action name="register" method="register" class="userAction">
			<result>/register_success.jsp</result>
			<result name="input">/register.jsp</result>
		</action>
		<action name="check" method="check" class="userAction">			
		</action>
    返回顶楼
              回帖地址
    0 请登录后投票
    • javachs
    • 等级: 初级会员
    • 性别:
    • 文章: 551
    • 积分: 30
    • 来自: 上海
       发表时间：2007-06-08  
    老兄写个struts1+prototype.js的版本吧
    返回顶楼
              回帖地址
    0 请登录后投票
    • xianglg
    • 等级: 初级会员
    • 性别:
    • 文章: 26
    • 积分: 30
    • 来自: 杭州
       发表时间：2007-06-08  
    javachs 写道
    老兄写个struts1+prototype.js的版本吧

    大同小异吧，struts在里面只是起到控制的角色，唯一不同的是配置文件！
    返回顶楼
              回帖地址
    0 请登录后投票
    • javachs
    • 等级: 初级会员
    • 性别:
    • 文章: 551
    • 积分: 30
    • 来自: 上海
       发表时间：2007-06-11  
    关键是写写struts如何整合prototype.js实现ajax应用.
    返回顶楼
              回帖地址
    0 请登录后投票
    • netfishx
    • 等级: 五星会员
    • 性别:
    • 文章: 1052
    • 积分: 599
    • 来自: 北京
       发表时间：2007-06-11  
    ajax应用跟mvc框架可以认为完全无关
    返回顶楼
              回帖地址
    0 请登录后投票
    • fraser5
    • 等级: 初级会员
    • 性别:
    • 文章: 6
    • 积分: 40
    • 来自: 北京
       发表时间：2007-07-01  
    如果是编辑或者删除的那种无刷新效果应该怎么弄呢？
    返回顶楼
              回帖地址
    0 请登录后投票
    • apple0668
    • 等级: 初级会员
    • 性别:
    • 文章: 118
    • 积分: 30
    • 来自: 深圳
       发表时间：2007-11-10  
    /**  
      * 客户端检测用户名是否已经注册过  
      *  
      */  
    public void check(){   
      HttpServletResponse response = ServletActionContext.getResponse(); //取response对象   
      HttpServletRequest request = ServletActionContext.getRequest();//取request对象   
    //服务器响应   
      response.setContentType("text/xml;charset=utf-8");   
      response.setHeader("Cache-Control","no-cache");   
      
      String name = request.getParameter("user.username");   

    check()方法用到servlet跟strts2耦合啦，struts2就是不跟servlet耦合才显出它的优势，可以用其struts2里面的方法替代？
    返回顶楼
              回帖地址
    0 请登录后投票
    • apple0668
    • 等级: 初级会员
    • 性别:
    • 文章: 118
    • 积分: 30
    • 来自: 深圳
       发表时间：2007-11-10  
    感觉你受到struts1.X的影响。
    返回顶楼
              回帖地址
    0 请登录后投票
    论坛首页 → Web前端技术版

    跳转论坛:
    Global site tag (gtag.js) - Google Analytics