jsf 1.2 中的 ajax 行为

Question

我有一个选择列表框，并且我想在每次选择框选择进行/更改时重新加载一个面板网格。我尝试只使用 jsf 1.2。

我知道使用 a4j 或 faces 2 可以轻松完成，但如果有人知道在 jsf 1.2 中实现这一点的任何好方法，我将不胜感激。

一个简单的例子也会有很大帮助。

谢谢

Answer 1

我认为更好的选择是迁移到 JSF 2。如果您想使用 JSF 1.2 进行此操作，请使用一些 JS 库，如 JQuery 或原型，并在事件上调用您的 JS 函数，并使用模板页面的 URL 调用 AJAX 更新程序带有面板网格和逻辑（例如：/mypanaelGrid.jsf）。

Answer 2

您基本上需要创建一个自定义 Ajax 感知 ViewHandler 和一个自定义 XML ResponseWriter 和 custom tags，它们会生成所需的 JavaScript 代码来执行 XMLHttpRequest 工作和 HTML DOM 操作。这也是大多数第 3 方 JSF 1.x 组件库所做的。它们都是开源的，所以你可以看看它的源代码，通过例子来学习他们是如何做到的。毕竟这是一个初学者，但不是一项简单的工作，因为它需要深入了解 HTTP、HTML DOM、JavaScript 和 XMLHttpRequest 的工作原理。一个小错误很快就会犯，初学者需要很长时间才能找到并真正理解它。

您最好的选择实际上是为 JSF 1.2 采用支持 ajax 的组件库（例如，RichFaces 3.x，其中包括 Ajax4jsf），或者只是 migrating to JSF 2.0（JSF 1.2 已经超过 6 年了，而 JSF 2.0 推出将近 3 年早在以前；JSF 1.x 基本上是历史）。

然而，这个特殊的功能需求也可以在没有 ajax 的情况下完成，尽管有点笨拙，当然如果表单验证起作用的话。这是一个基本的启动示例，只需指示 JavaScript 在下拉列表更改时提交父表单：

<h:form>
    <h:selectOneMenu value="#{bean.selected}" onchange="this.form.submit()">
        <f:selectItem itemValue="one" />
        <f:selectItem itemValue="two" />
        <f:selectItem itemValue="three" />
    </h:selectOneMenu>
    <h:panelGroup rendered="#{bean.selected == 'one'}">
        One was selected.
    </h:panelGroup>
    <h:panelGroup rendered="#{bean.selected == 'two'}">
        Two was selected.
    </h:panelGroup>
    <h:panelGroup rendered="#{bean.selected == 'three'}">
        Trree was selected.
    </h:panelGroup>
</h:form>

这将在下拉列表更改时同步提交整个表单，就像您按下提交按钮一样。但是，如前所述，如果您在同一表单的其他地方执行验证，则必须使用 immediate="true" 和 valueChangeListener 引入相当多的技巧，以防止验证所有其他表单元素。有关详细示例，另请参阅 Populate child menus。

一个完全不同的替代方案是仅将 一切 渲染到 HTML 响应并使用 CSS display:none 隐藏它，然后在 @ 中引用的某些 JS 函数中使用 JavaScript element.style.display 切换显示987654335@属性。