[Java EE 7] JSF 中的 Ajax

JSF 支持页面的 Ajax 处理。可以支持局部页面处理和局部页面展示。

JSF 中的 Ajax 通过下面两个途径：

•     通过 JavaScript 编码实现
•     通过 f:ajax 以声明方式实现

先看看使用 JavaScript 如何实现。 jsf.js 是在 javax.faces 库中的预定义资源。这个 JS 包含了 JSF 页面支持 Ajax 的 API。在页面中引用需要用到 outputScript 标签：

<h:body>
<!-- . . . -->
<h:outputScript 
    name="jsf.js" 
    library="javax.faces" 
    target="body"/>
<!-- . . . -->
</h:body>

现在，可以向服务器发起一个异步请求了：

<h:form prependId="false">
  <h:inputText value="#{user.name}" id="name"/>
  <h:inputText value="#{user.password}" id="password"/>
  <h:commandButton value="Login" 
                   type="button"
                   actionListener="#{user.login}"
     onclick="jsf.ajax.request(this, event, {execute: 
'name password', render: 'status'}); return false;"/>
            
  <h:outputText value="#{user.status}" id="status"/>
</h:form>

在这段代码中：

    两个文本输入框用于输入用户名和密码。一个文本输出控件用于展示用户登录状态。
    form 中的 prependId 属性设置为 false，用于确保表单中的元素 id 以当前的形式保存。否则，会在元素 id 前面加上 form 的 id。
    按钮的 actionListener 属性用于设置点击按钮的时候，后台 bean 调用的方法。现在取代传统的刷新页面展示，jsf.ajax.request 发送了一个异步请求到服务器，这个请求在按钮的 onclick 事件中产生。execute 和 render 属性值是用空格分隔的组件 id。execute 中的组件是输入组件，将会将组件中的值绑定到后台 bean。render 中的组件是展示组件，用于设置收到异步响应后需要刷新的组件。

下表列出了 render 属性可以设置哪些值：

值	描述
@all	页面上的所有组件
@none	无组件，这是默认值
@this	触发请求的组件
@form	form 表单中的所有组件
ID 列表	组件 ID 的列表
EL 表达式	返回一组 String 列表的 EL 表达式

execute 属性的值和 render 属性的值类似，不过默认值换成了 @this。

编写一个 User bean，包含 set、get 方法和简单的业务逻辑：

@Named
@SessionScoped
public class User implements Serializable {
    private String name;
    private String password;
    private String status;
    public void login(ActionEvent evt) {
        if (name.equals(password))
            status = "Login successful";
        else
            status = "Login failed";
    }
}

注意 login 方法，它必须使用 javax.faces.event.ActionEvent 作为它的唯一参数。

声明是 Ajax 可以使用  f:ajax。这个标记可以作用于一个组件，也可以作用于多个组件。

上面的代码可以改写为：

<h:form prependId="false">
       <h:inputText value="#{user.name}" 
                    id="name"/>
       <h:inputText value="#{user.password}" 
                    id="password"/>
       <h:commandButton value="Login" 
                        type="button"
                        actionListener="#{user.login}">
           <f:ajax execute="name password" 
                      render="status"/>
    </h:commandButton>

    <h:outputText value="#{user.status}" 
                  id="status"/>
</h:form>

在这段代码中，使用了 f:ajax 中的 execute 属性指定输入参数，render 属性指定显示参数。默认情况下，如果 f:ajax 用在一个组件上，并且没有指定 event 事件，那么异步请求将会基于它的父组件的默认事件（在这个例子中，父组件是提交按钮）。

可以在 f:ajax 上设置 delay 属性，属性值是毫秒数，用于设置延迟提交的时间。如果在延迟时间到期前有多个请求，那么只会提交最近的那个请求，其它的请求将会被丢弃。

<f:ajax delay="200" ...>
  . . .
</f:ajax>

这段代码设置了延迟时间为 200 毫秒，默认是 300 毫秒，但是你可以设置值为 none 来关闭这个功能。

f:ajax 标签中可以包含多个组件：

<f:ajax listener="#{user.checkFormat}">
    <h:inputText value="#{user.name}" id="name"/>
    <h:inputText value="#{user.password}" id="password"/>
</f:ajax>

在这段代码中，f:ajax 有一个 listener 属性用于指定相关的方法：

public void checkFormat(AjaxBehaviorEvent evt) {
    //. . .
}

这个 listener 中的方法将会是所有子组件的默认方法（在这个例子中是 h:inputText 的 valueChange 事件的默认方法），如果你要改变子组件的默认方法，可以在子组件中使用 a:ajax 标签。

文章来源：http://www.aptusource.org/2014/04/java-ee-7-jsf-ajax/