心有猛虎，细嗅蔷薇: NetBeans_010：开发JavaEE 6 应用之十：使用AJAX实现页面局部刷新

2012年2月2日星期四

NetBeans_010：开发JavaEE 6 应用之十：使用AJAX实现页面局部刷新

JSF2支持AJAX，我们将使用AJAX从数据库获取数据，并实现页面局部刷新。

1. 新建一个页面，继承模板。
list.xhtml内容如下：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <body>

        <ui:composition template="./WEB-INF/template.xhtml">
            <ui:define name="content">
                <h:form>
                    <h:inputText value="#{customerName.value}">
                        <f:ajax event="keyup" render="custTable"
                                listener="#{customerSessionBean.matchCustomers}"/>
                    </h:inputText>
                    <h:dataTable var="c" value="#{customerSessionBean.cust}" id="custTable">
                        <h:column>#{c}</h:column>
                    </h:dataTable>
                </h:form>
            </ui:define>
        </ui:composition>

    </body>
</html>

这里使用了f:ajax，其中
（1）event：触发事件，这里使用了onkeyup。
（2）render：指向要局部刷新的组件，这里指向id=custTable的组件。
（3）listener：触发事件触发的方法，该方法只有一个参数，类型为AjaxBehaviorEvent，没有返回值。

2. 新建一个Managed Bean：CustomerName。

@Model
public class CustomerName {

    private String value;

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }
}

说明：@Model标注是CDI规范中的，它相当于加了两个标注：@Named和@RequestScoped。
现在，CustomerName可以在Express Language中引用。

3. 在CustomerSessionBean中增加一个方法matchCustomers。

 public void matchCustomers(AjaxBehaviorEvent evt) {
        CriteriaBuilder builder = em.getCriteriaBuilder();
        CriteriaQuery criteria = builder.createQuery(Customer.class);
        // FROM clause
        Root root = criteria.from(Customer.class);
        // SELECT clause
        criteria.select(root);
        // WHERE clause
        Predicate condition = builder.like(root.get(Customer_.name), "%" + name.getValue() + "%");
        criteria.where(condition);
        // FIRE query
        TypedQuery query = em.createQuery(criteria);
        // PRINT result
        cust = query.getResultList();
        return;
    }

4. 运行list.xhtml。
输入查询条件，比如a，当按键抬起时，触发AJAX，调用Listener方法，查询结果如下：