MaxStruts2系列文章之十四：Struts 2与AJAX(第三部分)

1、MaxStruts2系列文章之十四：Struts 2与AJAX（第三部分）2014年11月2日12:09  很久没有更新BLOG了，前一段时间公司的项目比较忙，另外我还和一位出版社的朋友谈写书的事情，所以一直没有时间，完成Struts 2与AJAX。后来写书的事情吹了，趁今天有点空闲就把它完成。在大家看这部分文章之前，我想对于写书的事情说两句，或者应该叫发牢骚才对。通过这次写书失败的经历，我明白为什么国内的IT书籍多数是滥于充数、粗制滥 造、缺乏经典。其实说白了就是一个“钱”字作怪。为了市场，很多编辑可能会“建议”你去“抄考”一些国内相对畅销的同类书籍，例如写Struts就一定要 按

2、所谓的MVC进行目录分类，美其名曰“容易入门”。我认为“MVC”的概念虽然重要，但对初学者而言，需要对编程有一定的了解才容易明白此概念。另外， 为了“实用”，不惜使用相同的技术重复编写不同的范例。可能是我不太了解读者的心理吧。言归正传，在上两部分的Struts 2与AJAX中我介绍了Struts 2与DOJO结合实现AJAX的知识，本文将介绍在Struts 2中使用DWR实现AJAX表单校验。什么是DWRDWR（Direct Web Remoting）是在Java EE中较流行的AJAX框架，它的最大优势就是可以像使用本地的Javascript函数一样，调用服务器上的Java方法。如下图所示：

3、图1 DWR工作原理 其实DWR原理也不复杂，它先在web.xml中配置一个Servlet，映射到特定的路径（通常是%CONTEXT_PATH%/dwr/*）。这个 Servlet的作用就是初始化要暴露给Javascript调用的Java类（通过dwr.xml进行配置），并生成相应的代理的Javascript 类代码。在XHR请求到来的时候，Servlet负责将请求的参数变成对应的Java对象，并以其为参数调用目标Java方法，并将返回值转化为 Javascript代码。详情请参考：http:/getahead.ltd.uk/dwr/Struts 2与DWR在Struts 2.0.x中使用DW

4、R实现AJAX表单校验。在大家掌握了DWR的原理后，下面我想详细介绍一下实现的步骤。首先，到以下站点接着，新建WEB工程，将下图所示的JAR包加入到工程的“Build Path”中；图2 依赖的JAR包 接下来，配置web.xml文件，内容如下：<?xml version="1.0" encoding="UTF-8"?><web-app id="WebApp_9" version="2.4"    xmlns="    xmlns:xsi=&quo

5、t;/2001/XMLSchema-instance"    xsi:schemaLocation="      <display-name>Struts 2 AJAX Part 3</display-name>     <filter>        <filter-name>struts-cleanup</filter-name>    &#

6、160;   <filter-class>            org.apache.struts2.dispatcher.ActionContextCleanUp        </filter-class>    </filter>     <filter-mapping>        <filter-name>struts-cl

7、eanup</filter-name>        <url-pattern>/*</url-pattern>    </filter-mapping>     <filter>        <filter-name>struts2</filter-name>        <filter-class>   

8、         org.apache.struts2.dispatcher.FilterDispatcher        </filter-class>    </filter>     <filter-mapping>        <filter-name>struts2</filter-name>        <

9、;url-pattern>/*</url-pattern>    </filter-mapping>    <!- 开始DWR配置 ->    <servlet>        <servlet-name>dwr</servlet-name>        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servle

10、t-class>        <init-param>            <param-name>debug</param-name>            <param-value>true</param-value>        </init-param>    </servlet&

11、gt;     <servlet-mapping>        <servlet-name>dwr</servlet-name>        <url-pattern>/dwr/*</url-pattern>    </servlet-mapping>    <!- 结束DWR配置 ->    <welcome-file-list&g

12、t;        <welcome-file>index.html</welcome-file>    </welcome-file-list> </web-app>清单1 WebContent/WEB-INF/web.xml 然后是DWR的配置文件：<?xml version="1.0" encoding="UTF-8"?> <!- START SNIPPET: dwr -><!DOCTYPE

13、dwr PUBLIC     "-/GetAhead Limited/DTD Direct Web Remoting 1.0/EN"     "http:/www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr>    <allow>        <create creator="new" javascript="validator&

14、quot;>            <param name="class" value="org.apache.struts2.validators.DWRValidator"/>        </create>        <convert converter="bean" match="com.opensymphony.xwork2.Valid

15、ationAwareSupport"/>    </allow>     <signatures>        <!CDATA        import java.util.Map;        import org.apache.struts2.validators.DWRValidator;         DWRVali

16、dator.doPost(String, String, Map<String, String>);        >    </signatures></dwr><!- END SNIPPET: dwr ->清单2 WebContent/WEB-INF/dwr.xml 通过以上配置，我们可以将DWRValidator中的方法暴露为Javascript可以调用的远程接口。在正确完成以上步骤之后，我们发布运行一下应用程序，在浏览器地址栏中输入http:/localhost:8080/

17、Struts2_Ajax3/dwr/，应该会出现如下页面：图3 DWR Servlet默认输出页面  接下来，我们要开始编写Action类了，代码如下：package tutorial; import com.opensymphony.xwork2.ActionSupport; public class AjaxValidation extends ActionSupport    private static final long serialVersionUID = -7901311649275887920L;   &#

18、160;private String name;   private String password;   private int age;      public int getAge()        return age;         public void setAge(int age)        this.age = age;   

19、0;     public String getName()        return name;         public void setName(String name)         = name;         public String getPassword()        retur

20、n password;         public void setPassword(String password)        this.password = password;         Override   public String execute()               return SUCCESS;

21、0;  清单3 src/tutorial/AjaxValidation.java 上述代码一目了然，相信大家已经很熟悉了。下面，我们再来看看表单校验的配置代码：<!DOCTYPE validators PUBLIC "-/OpenSymphony Group/XWork Validator 1.0.2/EN" "<validators>    <validator type="regex">        <param name="

22、;fieldName">password</param>        <param name="expression">            <!CDATA(?!0-9*$)(?!a-zA-Z*$)(a-zA-Z0-98,10)$>        </param>        <message>Password mu

23、st be between 8 and 10 characters, contain at least one digit and one alphabetic character, and must not contain special characters</message>    </validator>        <field name="name">        <field-validator type="

24、;requiredstring">            <message>You must enter a name</message>        </field-validator>    </field>    <field name="age">        <field-validator type=

25、"int">            <param name="min">18</param>            <param name="max">127</param>            <message>Age must be between 18 and 127</mess

26、age>        </field-validator>    </field></validators>清单4 src/tutorial/AjaxValidation-validation.xml 对于AjaxValidation类的name、password和age三个字段，我分别用了非空、正规表达式和范围验证。正规表达式(?!0-9*$)(?!a-zA-Z*$)(a-zA-Z0-98,10)$的作用是保证密码由至少包括一个数字和一个字母，且不能含有符号的长度为8到10的字符串组成。它

27、也是所谓强密码（Strong Password）的普通实现。接下来的是JSP的代码，内容如下：<% page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><% taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML

28、 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml">    <head>        <title>Struts 2 AJAX - Validation</title>        <s:head

29、 theme="ajax" />    </head>    <body>        <h2>            AJAX Validation Using DWR        </h2>        <s:form method="post" validate=&q

30、uot;true" theme="ajax">            <s:textfield label="Name" name="name" />            <s:password label="Password" name="password" />          &

31、#160; <s:textfield label="Age" name="age" />            <s:submit />        </s:form>    </body></html>清单5 WebContent/AjaxValidation.jsp 以上代码也不复杂，不过需要的是注意的是除了要加入<s:head theme="ajax&q

32、uot; />外，<s:form />也必须加入validate="true" theme="ajax"的属性。最后是Struts 2的配置文件，内容如下所示：<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC    "-/Apache Software Foundation/DTD Struts Configuration 2.0/EN"  &#

33、160; "/dtds/struts-2.0.dtd"> <struts>    <package name="Struts2_AJAX_DEMO" extends="struts-default">        <action name="AjaxValidation" class="tutorial.AjaxValidation">&

34、#160;           <result name="input">AjaxValidation.jsp</result>            <result>AjaxValidation.jsp</result>        </action>    </package></struts>清单6 src/stru

35、ts.xml 最后发布运应用程序，在浏览器地址栏中输入http:/localhost:8080/Struts2_Ajax3/AjaxValidation!input.action出现如下图所示页面：图4 AjaxValidation页面输出 在文本框中输入错误的值使页面出现错误提示信息，如下图所示：图5 AjaxValidation页面错误提示 可能有朋友会问怎么知道这是通过AJAX进行校验的呢？在这里我向大家推荐一个AJAX开发必备的工具Firebug。Firebug是 Firefox的一个功能强大的插件，它可以准确地输出和定位Javascript的错误、通过直观的方式查看HTML文档的DO

36、M及其样式、所见即所得 的编辑方式，更值得一赞的是它可以方便地对Javascript进行跟踪和调试，如果你希望这进一步了解这个工具，请安装Firefox 2.0以上版本，并使用它浏览以下网址。在安装完成Firebug之后，在Firefox中打开http:/localhost:8080/Struts2_Ajax3/AjaxValidation!input.action，按“F12”键找开Firebug窗口，如果你第一次使用Firebug，请点击其窗口中的链接“Enable Firebug”激活插件。之后，点击“Net”，并在出现的菜单中点击选中“XHR”。然后将光标移入文本框，再将光标移出使文本

37、框失去焦点，你可以看到Firebug窗口会多出一项记录，如下图所示：图6 Firebug中查看XHR请求 这就证明你在文本框失去焦出时，Struts 2会发送XHR请求到服务器以对该文本框值进行校验。有兴趣的朋友可以通过Firebug，研究XHR的请求与响应，这样可以加深对DWR工作原理的理解。何时使用AJAX表单校验虽然在Struts 2实现AJAX表单校验是一件非常简单的事，但我建议大家不要在所有的场合都使用这个功能，原因可以分为以下几个方面：1. AJAX校验在服务器上进行数据校验，可能会比较耗时；2. AJAX校验可能会过于频繁，加重服务器的负载；3. 一些普通的校验，只需要使用纯Ja

38、vascript便可以实现。读到这里，有的朋友可能会问：“那么什么时候才应该使用AJAX表单校验呢？”答案其实很简单，当我们的校验在页面加载时还不能够确定的情况下，就应该使用这个功能。例如，注册用户时，校验用户名是否已经存在；或者校验涉及过多的页务逻辑等。现在让我们来改造一下上述例子，对于name我们可以使用AJAX校验，但对于其它的字段应该使用纯Javascript的校验。在tutorial.AjaxValidation类加入如下方法：   Override   public void validate()       &

39、#160;Set<String> users = new HashSet<String>();       users.add("max");       users.add("scott");       if(users.contains(name)            addFieldError("name", "T

40、he user name has been used!");          清单7 src/tutorial/AjaxValidation.java代码片段 用于模拟用户注册的场境，当然在真实情况应该在数据库中检查用户是否存在。接下来再修改JSP文件，将<s:form />里面的内容改为如下所示代码：        <s:form method="post" validate="true" theme="ajax_

41、xhtml">            <s:textfield label="Name" name="name" theme="ajax" />            <s:password label="Password" name="password" theme="xhtml" />    &

42、#160;       <s:textfield label="Age" name="age" theme="xhtml" />            <s:submit theme="xhtml" />        </s:form>清单8 WebContent/AjaxValidation.jsp代码片段 对比早前的JSP代码，大家可以看出我将<s:form />的theme改成了“ajax_xhtml”，这个theme不是Struts 2自带，需要自定义。另外，除了Name使用了ajax的theme之外，其它的表单标签的theme都为xhtml，如此一来便可以实现只有当Name 文本框失去焦点时才发生AJAX表单校验。接下来，应该是我们的自定义ajax_xhtml的theme了。在源代码文件夹下新建包“template.ajax_xhtml”，然后在其中加入form.ftl和form-close.ftl文件，内容分别如下：<#if parameters.val