jsf - 如何以 1 秒的间隔对组件进行 ajax 更新？

Question

我在戴尔的一次采访中被问到这个问题。
new Date()给你一个 Date用当前日期/时间初始化的对象。

假设我的屏幕右上角显示当前时间，并且有人这样做了。

<h:outputText value="#{bean.presentDateTime}" />

这将如何修改以始终显示当前日期和时间？

Answer 1

基本上，您希望访问服务器并按时间间隔更新结果。这称为“轮询”。标准 JSF 没有为此内置工具，因此您仍然需要自己编写一些 JS 代码(或者，理论上，获取一个 JSF 组件，它可以为您透明地呈现所需的 JS 代码)。在 JavaScript 中，您可以使用 setInterval() 每隔一段时间执行一个函数。

所以，一旦你给时间戳组件一个固定的 ID，

<h:outputText id="presentDateTime" value="#{bean.presentDateTime}" />

并且您提供以下隐藏表单，其命令按钮 ajax 更新它，

<h:form id="hiddenForm" style="display:none">
    <h:commandButton id="updatePresentDateTime">
        <f:ajax render=":presentDateTime" />
    </h:commandButton>
</h:form>

然后你可以让它在 DOM/window/body 准备好期间使用下面的脚本运行。

<script>
    setInterval(function() {
        document.getElementById("hiddenForm:updatePresentDateTime").click();
    }, 1000);
</script>

但是不要在生产中将它用于这个目的(客户端时钟)。最多可以作为面试问题的答案(或作为 some showcase page 中的示例)。在生产中，更好地获取“纯”JS，如有必要，结合以合理的更长间隔运行的轮询，例如1分钟。或者，如果您的环境支持它，请通过 WS 或 SSE 使用推送。