如何以 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 ready 期间执行的以下脚本。

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

不过，不要在生产中将其用于此目的（客户端时钟）。它最多可以作为面试问题的答案（或作为某些展示页面中的示例）。在生产中，最好抓取"纯"JS，如有必要，结合以合理的更长间隔（例如 1 分钟）运行的轮询。或者，如果您的环境支持它，请使用通过 WS 或 SSE 推送。