jsf中的ajax技术

最新推荐文章于 2025-06-14 20:28:45 发布

原创最新推荐文章于 2025-06-14 20:28:45 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jsf

前端专栏收录该内容

57 篇文章

订阅专栏

在“jsf2入门demo”基础上使用ajax
index.xhtml

<!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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich">
<h:head>
        <title>Welcome</title>
</h:head>
<h:body>
    <h:form>
        <h3>please enter your name and password</h3>
        <table>
            <tr>
                <td>Name:</td>
                <td><h:inputText value="#{user.name}" id="name"></h:inputText></td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><h:inputSecret value="#{user.password}" id="password"></h:inputSecret></td>
            </tr>
        </table>
        <p>
            <h:commandButton value="Login">
                <f:ajax execute="name password" render="out"></f:ajax>
            </h:commandButton>
        </p>
        <h3><h:outputText id="out" value="#{user.greeting}"></h:outputText></h3>
    </h:form>
</h:body>
</html>

user Bean中增加

  public String getGreeting() {
        if(name.length()==0)
            return " ";
        return "welcome to jsf2 + ajax " + name;
    }

这里写图片描述

当用户单击login时，表单并未提交，一个ajax请求发送到服务器
execute和render指定了组件id的列表。如同表单已经被提交一样处理execute组件。他们的值被发送到服务器，并更新相应的bean属性

ajax请求将输入组件添加到execute列表中，将输出组件添加到render列表中。对execute列表中的组件来说，会执行除“呈现响应”外的所有阶段，在“更新模型值”阶段，会更新模型bean，于此相反，对于render列表中的组件来说，仅执行生命周期的“呈现响应”阶段，结果被发回到ajax请求。
关于 jsf生命周期，参考博客中jsf分类下的“jsf架构”