为什么 ajax 和 jsf 可以很好地协同工作？ Ajax 生命周期如何插入正常的 JSF 生命周期？

Question

我使用过 JSF 1.2 但对 JSF 2.0 是新的。似乎 JSF 2.0 通过<f:ajax> 无缝支持 ajax 功能，但我还不清楚如何？我想了解是什么让这两种强大的技术如此完美地协同工作？两个生命周期如何交互？

P.S：我熟悉 ajax 和 javascript。所以你可以基于这个前提来回答。

Answer 1

这个问题非常广泛，我建议搜索适当的标签以了解其在实际情况中的用法。 BalusC 在 stackoverflow 上做出了很多贡献，并且还编写了 Xtreme Biker 参考的优秀教程。

由于缺少答案，我将提供关于 ajax 如何在 JSF 中工作的基本观点。 JSF 中有一个特殊的 Javascript 库，可以使用jsf.ajax.request(...) 对服务器执行 ajax 调用。为了简化开发，您可以将 ajax 行为附加到某些组件。通常你会在你选择的组件上使用<f:ajax>标签，比如<h:commandButton>，来给它添加ajax功能。

在过去，我们会通过 get 或 post 向服务器发送异步 XMLHttpRequest 并等待服务器向我们发送回发数据，这些数据通常以 JSON 或 XML 格式获取，用于客户端处理并更新视图通过document.getElementById(...) 或现代 Javascript 库引入的更方便的方法。我认为最终这就是 JSF 在幕后所做的。

在 JSF 2.0 中引入了<f:ajax> 标签，它有助于部分提交数据、在服务器上处理数据并部分更新您的视图。为此，ajax 标记具有以下最重要的特性/属性：<f:ajax execute="..." render="..." event="..." listener="..." onevent="..." />。让我们仔细看看它们。

1. execute 属性通过指定元素 ID 列表告诉 JSF 在此请求期间应在服务器上更新/处理哪些元素；
2. render 属性告诉 JSF 在 ajax 调用完成后应该替换哪些组件 - 在服务器上呈现的新元素将在部分页面更新后替换具有指定 id 的旧元素；
3. event 属性定义了将发生 ajax 调用的事件，例如，在命令按钮的情况下，事件可能是单击事件，在输入文本字段的情况下，事件可能是按键或模糊事件；
4. listener 属性定义了与 public void processAjaxRequest (AjaxBehaviorEvent event) { } 类型的托管 bean 方法的绑定，该方法将在 ajax 请求上触发并在部分页面更新完成之前在服务器上执行；
5. onevent 属性定义了在 ajax 请求的不同阶段调用的 javascript 函数。

您可以参考Marty Hall 写的关于ajax here 的另一个优秀教程。

我不打算对 JSF 2.0 中的 ajax 功能进行概述，而是做一个简短的介绍，以便对 ajax 功能有一个基本的了解。