在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的响应。