害怕别人乱输数据吗?提高你的数据校验功能-AJAX输入校验(8)

7.4 AJAX输入校验

Struts 2框架在使用客户端校验的时候，由于需要转换为JavaScript脚本，所以并不是所有服务器端的校验规则均能转换为客户端校验，而AJAX校验则可以使用所有的服务器端校验规则。
AJAX是一种新兴的技术，主要特点是可以异步处理用户请求，例如，用户在填写一个表单的时候，当填写完一个文本框后，该文本框失去焦点的同时，会异步地完成同服务器的交互，提示校验信息，而不是所有表单填写完后单击“提交”按钮时显示校验信息。
在这里笔者简单演示一个示例，让读者体验AJAX的特点，关于AJAX的详细内容，读者可以参考本书后面的介绍。

7.4.1 配置AJAX环境

下面笔者按照建立顺序，引导读者配置AJAX环境。

1．安装dwr-1.1-beta-3.jar文件

Struts 2框架要整合AJAX，需要一个JAR文件，读者可以在Struts 2的struts2-showcase-2.0.11应用示例中找到，在该示例中lib目录下有一个dwr-1.1-beta-3.jar文件，将该文件复制到当前Web应用的WEB-INF/lib目录下。
★ 注意 ★
struts2-showcase-2.0.11为一个war压缩文件，读者可以解压该文件来获得dwr-1.1- beta-3.jar。

2．dwr.xml文件

建立一个dwr.xml配置文件，该文件保存在同web.xml相同的目录下，在该文件中加入如下内容：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE 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">
<param name="class" value="org.apache.struts2.validators.DWRValidator"/>
</create>
<convert converter="bean" match="com.opensymphony.xwork2.ValidationAware Support"/>
</allow>
<signatures>
<![CDATA[
import java.util.Map;
import org.apache.struts2.validators.DWRValidator;
DWRValidator.doPost(String, String, Map<String, String>);
]]>
</signatures>
</dwr>
★ 说明 ★
该文件内容为固定格式。

3．web.xml文件

在web.xml文件中加入相关配置内容，修改后的内容如代码7.20所示。

代码7.20 加入AJAX配置的web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="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/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <display-name>Struts Blank</display-name>
<!--配置Struts 2的核心filter-->
<filter>
<filter-name>struts2</filter-name>
<!--配置Struts 2的核心实现类-->
<filter-class>
org.apache.struts2.dispatcher.FilterDispatcher
</filter-class>
</filter>
<filter-mapping>
<!--拦截所有的URL请求-->
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!--配置欢迎界面-->
<!-- 配置Struts2的核心Servlet -->
<servlet>
<servlet-name>dwr</servlet-name>
<!-- 指定Servlet的实现类 -->
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<!-- 指定处于开发阶段 -->
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<!-- 指定DWR的核心Servlet拦截的URL -->
<servlet-mapping>
<servlet-name>dwr</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
至此，一个简单的AJAX环境便搭建完成了。

7.4.2 建立业务控制器

建立一个简单的业务控制器实现类，如代码7.21所示。

代码7.21 AJAX校验示例的业务控制器

package ch7;
import java.util.Date;
import com.opensymphony.xwork2.ActionSupport;
public class Reg_ajax_Action extends ActionSupport {
private String name;
private int age;
private Date birthday;
//属性的getter和setter方法
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
}
该Action非常简单，只是定义了3个相应的属性。在配置文件中加入如下内容：
<action name="Reg_ajax_Action" class="ch7.Reg_ajax_Action">
<result name="input">/ch7/reg-ajax.jsp</result>
</action>

7.4.3 建立校验规则文件

建立一个Reg_ajax_Action-validation.xml校验规则文件，如代码7.22所示。

代码7.22 AJAX校验示例的校验规则文件

<!DOCTYPE validators PUBLIC "-//OpenSymphony Group//XWork Validator 1.0.2//EN" "http://www.opensymphony.com/xwork/xwork-validator-1.0.2.dtd">
<!--
Add the following DOCTYPE declaration as first line of your XXX-validation.xml file:
<!DOCTYPE validators PUBLIC "-//OpenSymphony Group//XWork Validator 1.0.2//EN"
"http://www.opensymphony.com/xwork/xwork-validator-1.0.2.dtd">
-->
<validators>
<field name="name">
<field-validator type="requiredstring">
<message>用户名不能为空！</message>
</field-validator>
</field>
<field name="age">
<field-validator type="int">
<param name="min">13</param>
<param name="max">19</param>
<message>年龄必须在13至19岁之间</message>
</field-validator>
</field>
<field name="birthday">
<!--定义类型为date-->
<field-validator type="date">
<!--校验生日有效时间段-->
<param name="min">1990-01-01</param>
<param name="max">2006-01-01</param>
<message>生日必须在${min}至${max}之间</message>
</field-validator>
</field>
</validators>
★ 说明 ★
该校验规则文件也是一个标准的校验规则文件。

7.4.4 建立JSP视图

建立一个reg-ajax.jsp视图文件，如代码7.23所示。

代码7.23 AJAX校验示例的JSP视图

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!-- START SNIPPET: ajaxValidation -->
<html>
<head>
<title>Validation - Basic</title>
<s:head theme="ajax"/>
</head>
<body>
<s:form method="post" validate="true" theme="ajax">
<s:textfield label="用户名" name="name"/>
<s:textfield label="年龄" name="age"/>
<s:textfield label="生日" name="birthday"/>
<s:submit/>
</s:form>
</body>
</html>
<!-- END SNIPPET: ajaxValidation -->
该文件同以往JSP视图文件不同的是，在<s:form/>标签中加入了theme="ajax"属性定义。

7.4.5 运行AJAX校验示例

在浏览器中输入http://localhost:8080/bookcode/ch7/Reg_ajax_Action!input.action，在运行界面年龄一栏中输入“0”，当光标焦点离开该文本框时，会立刻显示校验异常信息，而不需要单击“submit”按钮后才显示校验异常信息。可见，AJAX使用了异步的方式同服务器端进行交互，并在某个元素失去焦点时触发。其运行界面如图7.11所示。
AJAX技术给用户带来了更加友好的体验，请读者参考本书中后面详细的介绍。
★ 注意 ★
运行本示例时，需要在地址栏输入http://localhost:8080/bookcode/ch7/Reg_ajax_ Action!input.action，而不是http://localhost:8080/bookcode/ch7/test.jsp。



图7.11 AJAX校验界面