Struts 2与AJAX（第三部分）

http://www.35java.com/zhibo/forum.php?mod=viewthread&tid=371&extra=page%3D3

什么是DWRDWR（DirectWebRemoting）是在JavaEE中较流行的AJAX框架，它的最大优势就是可以像使用本地的Javascript函数一样，调用服务器上的Java方法。如下图所示：

图1DWR工作原理

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

Struts2与DWR在Struts2.0.x中使用DWR实现AJAX表单校验。在大家掌握了DWR的原理后，下面我想详细介绍一下实现的步骤。

首先，到以下站点https://dwr.dev.java.net/files/documents/2427/47455/dwr.jar下载DWR的1.1.4版本的JAR包。需要注意的是，DWR虽然已经发布2.0版本，但它与1.1.4有很大的区别，所以请大家不要使用2.0版本，否则会出现异常的；

接着，新建WEB工程，将下图所示的JAR包加入到工程的“BuildPath”中；

图2依赖的JAR包

接下来，配置web.xml文件，内容如下：

<?xmlversion="1.0"encoding="UTF-8"?>

<web-appid="WebApp_9"version="2.4"

xmlns="http://java.sun.com/xml/ns/j2ee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/j2eehttp://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<display-name>Struts2AJAXPart3</display-name>

<filter>

<filter-name>struts-cleanup</filter-name>

<filter-class>

org.apache.struts2.dispatcher.ActionContextCleanUp

</filter-class>

</filter>

<filter-mapping>

<filter-name>struts-cleanup</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

<filter>

<filter-name>struts2</filter-name>

<filter-class>

org.apache.struts2.dispatcher.FilterDispatcher

</filter-class>

</filter>

<filter-mapping>

<filter-name>struts2</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

<!--开始DWR配置-->

<servlet>

<servlet-name>dwr</servlet-name>

<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>

<init-param>

<param-name>debug</param-name>

<param-value>true</param-value>

</init-param>

</servlet>

<servlet-mapping>

<servlet-name>dwr</servlet-name>

<url-pattern>/dwr/*</url-pattern>

</servlet-mapping>

<!--结束DWR配置-->

<welcome-file-list>

<welcome-file>index.html</welcome-file>

</welcome-file-list>

</web-app>

清单1WebContent/WEB-INF/web.xml然后是DWR的配置文件：

<?xmlversion="1.0"encoding="UTF-8"?>

<!--STARTSNIPPET:dwr-->

<!DOCTYPEdwrPUBLIC

"-//GetAheadLimited//DTDDirectWebRemoting1.0//EN"

"http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>

<allow>

<createcreator="new"javascript="validator">

<paramname="class"value="org.apache.struts2.validators.DWRValidator"/>

</create>

<convertconverter="bean"match="com.opensymphony.xwork2.ValidationAwareSupport"/>

</allow>

<signatures>

<![CDATA[

importjava.util.Map;

importorg.apache.struts2.validators.DWRValidator;

DWRValidator.doPost(String,String,Map<String,String>);

]]>

</signatures>

</dwr>

<!--ENDSNIPPET:dwr-->

清单2WebContent/WEB-INF/dwr.xml通过以上配置，我们可以将DWRValidator中的方法暴露为Javascript可以调用的远程接口。

在正确完成以上步骤之后，我们发布运行一下应用程序，在浏览器地址栏中输入http://localhost:8080/Struts2_Ajax3/dwr/，应该会出现如下页面：

图3DWRServlet默认输出页面

接下来，我们要开始编写Action类了，代码如下：

packagetutorial;

importcom.opensymphony.xwork2.ActionSupport;

public

classAjaxValidationextendsActionSupport{

private

static

final

longserialVersionUID=

-7901311649275887920L;

privateStringname;

privateStringpassword;

private

intage;

public

intgetAge(){

returnage;

}

public

voidsetAge(intage){

this.age=age;

}

publicStringgetName(){

returnname;

}

public

voidsetName(Stringname){

this.name=name;

}

publicStringgetPassword(){

returnpassword;

}

public

voidsetPassword(Stringpassword){

this.password=password;

}

@Override

publicStringexecute(){

returnSUCCESS;

}

}

清单3src/tutorial/AjaxValidation.java上述代码一目了然，相信大家已经很熟悉了。下面，我们再来看看表单校验的配置代码：

<!DOCTYPEvalidatorsPUBLIC"-//OpenSymphonyGroup//XWorkValidator1.0.2//EN""http://www.opensymphony.com/xwork/xwork-validator-1.0.2.dtd">

<validators>

<validatortype="regex">

<paramname="fieldName">password</param>

<paramname="expression">

<![CDATA[(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{8,10})$]]>

</param>

<message>Passwordmustbebetween8and10characters,containatleastonedigitandonealphabeticcharacter,andmustnotcontainspecialcharacters</message>

</validator>

<fieldname="name">

<field-validatortype="requiredstring">

<message>Youmustenteraname</message>

</field-validator>

</field>

<fieldname="age">

<field-validatortype="int">

<paramname="min">18</param>

<paramname="max">127</param>

<message>Agemustbebetween18and127</message>

</field-validator>

</field>

</validators>

清单4src/tutorial/AjaxValidation-validation.xml对于AjaxValidation类的name、password和age三个字段，我分别用了非空、正规表达式和范围验证。正规表达式(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{8,10})$的作用是保证密码由至少包括一个数字和一个字母，且不能含有符号的长度为8到10的字符串组成。它也是所谓强密码（StrongPassword）的普通实现。

接下来的是JSP的代码，内容如下：

<%@pagelanguage="java"contentType="text/html;charset=utf-8"

pageEncoding="utf-8"%>

<%@taglibprefix="s"uri="/struts-tags"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Struts2AJAX-Validation</title>

<s:headtheme="ajax"

/>

</head>

<body>

<h2>

AJAXValidationUsingDWR

</h2>

<s:formmethod="post"validate="true"theme="ajax">

<s:textfieldlabel="Name"name="name"

/>

<s:passwordlabel="Password"name="password"

/>

<s:textfieldlabel="Age"name="age"

/>

<s:submit/>

</s:form>

</body>

</html>

清单5WebContent/AjaxValidation.jsp以上代码也不复杂，不过需要的是注意的是除了要加入<s:headtheme="ajax"/>外，<s:form/>也必须加入validate="true"theme="ajax"的属性。

最后是Struts2的配置文件，内容如下所示：

<?xmlversion="1.0"encoding="UTF-8"?>

<!DOCTYPEstrutsPUBLIC

"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.0//EN"

"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<packagename="Struts2_AJAX_DEMO"extends="struts-default">

<actionname="AjaxValidation"class="tutorial.AjaxValidation">

<resultname="input">AjaxValidation.jsp</result>

<result>AjaxValidation.jsp</result>

</action>

</package>

</struts>

清单6src/struts.xml最后发布运应用程序，在浏览器地址栏中输入http://localhost:8080/Struts2_Ajax3/AjaxValidation!input.action出现如下图所示页面：

图4AjaxValidation页面输出

在文本框中输入错误的值使页面出现错误提示信息，如下图所示：

图5AjaxValidation页面错误提示

可能有朋友会问怎么知道这是通过AJAX进行校验的呢？在这里我向大家推荐一个AJAX开发必备的工具——Firebug。Firebug是Firefox的一个功能强大的插件，它可以准确地输出和定位Javascript的错误、通过直观的方式查看HTML文档的DOM及其样式、所见即所得的编辑方式，更值得一赞的是它可以方便地对Javascript进行跟踪和调试，如果你希望这进一步了解这个工具，请安装Firefox2.0以上版本，并使用它浏览以下网址http://www.getfirebug.com。

在安装完成Firebug之后，在Firefox中打开http://localhost:8080/Struts2_Ajax3/AjaxValidation!input.action，按“F12”键找开Firebug窗口，如果你第一次使用Firebug，请点击其窗口中的链接“EnableFirebug”激活插件。之后，点击“Net”，并在出现的菜单中点击选中“XHR”。然后将光标移入文本框，再将光标移出使文本框失去焦点，你可以看到Firebug窗口会多出一项记录，如下图所示：

图6Firebug中查看XHR请求

这就证明你在文本框失去焦出时，Struts2会发送XHR请求到服务器以对该文本框值进行校验。有兴趣的朋友可以通过Firebug，研究XHR的请求与响应，这样可以加深对DWR工作原理的理解。

何时使用AJAX表单校验虽然在Struts2实现AJAX表单校验是一件非常简单的事，但我建议大家不要在所有的场合都使用这个功能，原因可以分为以下几个方面：