`
xianglg
  • 浏览: 67163 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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

    博客分类：
  • ajax
prototypeAjaxSpringJavaScript应用服务器 
阅读更多

最近有一个项目要上，决定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功能，个人觉得绰绰有余。

     
    分享到：
    评论
    11 楼 sybell 2014-06-28  
    写得好啊，刚入门的web前端开发者，很好的食材的。
    10 楼 apple0668 2007-11-10  
    感觉你受到struts1.X的影响。
    9 楼 apple0668 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里面的方法替代？
    8 楼 sgwood 2007-09-18  
    写的不错!支持一下.
    7 楼 yutao_mj 2007-08-01  
    正需要,感谢楼主!
    6 楼 fraser5 2007-07-01  
    如果是编辑或者删除的那种无刷新效果应该怎么弄呢？
    5 楼 netfishx 2007-06-11  
    ajax应用跟mvc框架可以认为完全无关
    4 楼 javachs 2007-06-11  
    关键是写写struts如何整合prototype.js实现ajax应用.
    3 楼 xianglg 2007-06-08  
    javachs 写道
    老兄写个struts1+prototype.js的版本吧

    大同小异吧，struts在里面只是起到控制的角色，唯一不同的是配置文件！
    2 楼 javachs 2007-06-08  
    老兄写个struts1+prototype.js的版本吧
    1 楼 xianglg 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>
    发表评论

    您还没有登录,请您登录后再发表评论

    相关推荐

      网上图书订购系统struts2+hibernate+prototype

      在图书订购系统中，Prototype用于实现页面的无刷新更新，例如，当用户搜索图书时，后台处理请求并返回结果，Prototype通过Ajax调用获取数据，并动态更新页面显示，提高了用户体验。此外，Prototype还提供了事件处理...

      SSI中使用Ajax进行操作的例子（prototype.js）

      总结来说，本示例通过整合SSI、Ajax（Prototype.js）以及后端的Struts2、Spring和Ibatis框架，展示了一个完整的前后端交互流程，实现了无需刷新页面即可进行数据操作的功能。这样的设计提高了用户体验，也降低了...

      struts2+ajax详解pdf清晰

      结合Struts2和Ajax，可以创建动态的Web应用，例如表单的无刷新提交、实时数据更新等。在《struts2+ajax详解》这本书中，你将深入学习这两种技术的结合使用，包括配置、Action编写、Ajax请求的处理以及如何在Struts2...

      文本框动态下拉单，支持键盘选择struts2+ajax

      "文本框动态下拉单，支持键盘选择struts2+ajax" 是一个典型的Web应用功能，它结合了Struts2框架、Ajax技术以及一些JavaScript库来实现高效的数据检索和用户输入交互。 1. **Struts2框架**：Struts2是一个基于MVC...

      基于Struts2＋Ajax＋JDBC的企业级JavaWeb架构.zip

      jQuery、Prototype等库简化了Ajax的使用，使得开发者可以方便地实现局部刷新、表单验证等功能。在Struts2框架下，可以利用Struts2的Ajax插件，如Struts2-Conventions或Struts2-JQuery Plugin，轻松集成Ajax功能。 *...

      prototype.js简单实现ajax功能示例

      Prototype.js 是一个 JavaScript 框架，它提供了一系列强大的工具，简化了JavaScript的开发，包括对Ajax功能的支持。在Web应用程序中，Ajax（Asynchronous JavaScript and XML）技术允许页面在不刷新整个页面的情况...

      struts-2.3.15.3.jar

      10. **Ajax支持**：Struts 2可以与jQuery、Prototype等JavaScript库结合，实现部分页面刷新，提高用户体验。 综上所述，`struts-2.3.15.3.jar`是Struts 2框架的重要组成部分，包含了执行Struts 2应用程序所需的核心...

      ajax实现无刷新删除

      "redirectAction"&gt;ajaxno&lt;/result&gt; &lt;/action&gt; &lt;/package&gt; &lt;/struts&gt; 四、创建 JSP 页面：AjaxNoFresh1.jsp 在页面中引入 prototype.js 和 application.js，并编写 JavaScript 代码来处理 AJAX 请求。 ```html &lt;!...

      Struts与Ajax.rar

      通过使用此插件，开发者可以创建响应式表单和无刷新操作。 2. **Json结果类型**：Struts2支持JSON（JavaScript Object Notation）作为结果类型，这是一种轻量级的数据交换格式，适合于Ajax通信。JSON结果类型允许...

      深入浅出Struts2 包含了源码

      8. **Ajax支持**：Struts2与dojo、prototype等JavaScript库结合，可以创建部分刷新的交互式Web应用。 在《深入浅出Struts2》一书中，作者可能详细讲解了以下内容： - **基础篇**：介绍Struts2的基本概念、安装和...

      Struts 2与AJAX

      1. **无刷新表格**：通过AJAX请求获取服务器数据，Struts 2处理请求并返回JSON数据，然后更新页面上的表格，无需整个页面刷新。 2. **表单验证**：使用Struts 2的拦截器进行服务器端验证，同时通过AJAX实时反馈...

      struts+ajax学习

      Ajax通过JavaScript库（如jQuery、Prototype等）来实现与服务器端的通信，通常使用XMLHttpRequest对象发送异步请求。开发者可以通过Ajax实现无刷新的用户体验，提高网页的交互性和响应速度。例如，当用户在页面上...

      Spring+Struts+Hibernate比较详细的整合配置方案

      开发者可以使用jQuery、Prototype等库简化AJAX调用，或者利用Struts2、Spring MVC提供的插件或AjaxTag库，方便地集成AJAX功能。 总结来说，Spring+Struts+Hibernate的整合提供了强大的企业级应用开发能力，Spring...

      struts2的详细资料

      开发者可以使用Struts2的Ajax插件，如JQuery插件，或者直接利用JavaScript库（如jQuery或 Prototype）来发送AJAX请求。在Action类中，可以定义一个特殊的方法处理AJAX请求，并返回JSON对象，然后前端JavaScript代码...

      Ajax+struts用户验证

      在Web开发中，Ajax（Asynchronous JavaScript and XML）技术与Struts框架的结合可以创建出交互性更强、用户体验更佳的动态网页应用。本主题主要探讨如何利用Ajax和Struts进行用户验证，特别是针对用户注册时的用户名...

      基于Struts＋Ajax的学位论文管理与服务系统的设计和实现

      - **Struts框架的使用**：利用Struts框架，系统实现了MVC模式下的分层结构。Action类用于处理用户的请求，并调用相应的业务逻辑层方法；ActionForm类则用于封装表单数据，便于验证和传递；ActionServlet作为控制器...

      Struts 2.1-AJAX-JSON实例

      在Struts 2中，AJAX（Asynchronous JavaScript and XML）技术和JSON（JavaScript Object Notation）的结合使用，允许开发人员实现页面的局部更新，提升用户体验，而无需每次请求都刷新整个页面。 **AJAX** 是一种在...

      struts2深入

      在Struts2中，我们可以创建一个能处理Ajax请求的Action，这个Action的方法返回值通常为“json”或“xml”，以便于在客户端解析。使用Struts2的JsonResult或XmlResult，框架会自动将Java对象转换成JSON或XML格式的...

      JSON实例(ajax+struts)

      在前端，使用了JavaScript库`prototype.js`，它提供了一个封装的Ajax对象，简化了与服务器的异步通信。在这个例子中，`Ajax.Request()`方法用于发送POST请求到服务器，参数包括请求URL、请求方式、参数和回调函数。...

      教质系统(struts+ajax)

      "TeachQualitySystem"可能是教质系统的源码包或者部署文件，包含了系统的所有组件和配置，包括Struts框架的配置文件（struts-config.xml）、Ajax的JavaScript库（如jQuery、 Prototype等）、以及具体的Java类和JSP...

    Magicbox
    Global site tag (gtag.js) - Google Analytics