在Java后端和javascript前端之间传输数据

Question

我正在创建一个Java EE Web应用程序。 此应用程序使用Java作为服务器端编程语言，并使用Javascript作为客户端。 该Javascript位于HTML5文档中（出于特定原因需要）。 我的Javascript需要来自服务器的一些数据才能执行其任务。 我的问题是：我如何用Java服务器中的数据填充Javascript变量？

我一直在研究使用JSF，并将HTML5与Javascript集成到其中。 显然，首先呈现服务器端代码，然后将其发送给客户端。 在这种情况下，我可以执行以下操作：

var data = #{controller.getData};

如果这样做有效，则存在一个问题：数据是“静态”的。 而我需要能够通过从服务器接收新数据来频繁地更改此数据。 但是，如果已经渲染了服务器端代码，然后将其发送到客户端，则对#{controller.getData}每次调用都将返回相同的值。

因此，这使我开始研究AJAX。 JSF提供了一个AJAX Javascript库，但是，我似乎无法理解如何使用它来更改HTML5文档（在JSF页面中）的Javascript代码中的变量。 因此，再次如何用Java服务器中的数据填充Javascript变量？

Answer 1

如果使用不带任何组件库的JSF，则可以将脚本嵌入到panelGroup中，并通过ajax重新呈现此面板：

<h:inputText id="mInput" value="#{myBean.name}">

    </h:inputText>
    <h:commandButton value="Do it"  action="#{myBean.doit}">
        <f:ajax render="thePanel" />
    </h:commandButton>


    <h:panelGroup id="thePanel">
        <h:outputText value="#{myBean.name}" />

        <script>
            var myVar = '#{myBean.name}';
            alert(myVar);
        </script>
    </h:panelGroup>

但是，如果您具有Primefaces，则可以在控制器上调用javascript，一旦获得响应，它将由浏览器执行：

RequestContext.getCurrentInstance().execute("alert('test');");

Primefaces可用的另一个选项也是使用oncomplete属性：

<p:commandButton value="Do it" action="#{myBean.doIt}" oncomplete="alert('test');" />

Answer 2

我认为最简单的方法是定义一个隐藏变量：

<h:inputHidden id="hiddenData" value="#{controller.getData}" />

然后，使用Javascript，您可以轻松地做到：

var data = $('#hiddenData').val(); //using JQuery
var data = document.getElementByID("hiddenData").value();

请注意，您将必须在AJAX操作上重新渲染此隐藏值。 另外，您可以看一下Richfaces提供的Ajax Push库。 希望能帮助到你。

Answer 3

我相信我一直在寻找的是Web服务，例如SOAP和REST。 如果我想更新视图的那部分，使用嵌入在JSF组件中的AJAX会很有用。 但是，我仅出于特定原因需要来自服务器的数据。 因此，在这种情况下，似乎可以使用Web服务。 我可以在单例或无状态EJB中使用@path批注，以使其成为REST URI端点。 然后，在Javascript代码中，我可以通过AJAX调用访问该URI端点，这将允许我访问方法并从EJB接收响应。