数据校验功能-AJAX输入校验(9)

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校验界面