transferring data between java backend and javascript frontend

Question

I'm creating a Java EE web application. This application uses Java as the server side programming language and uses Javascript for the client side. The Javascript is in an HTML5 document (needs to be for a specific reason). My Javascript needs some data from the server in order to perform its task. Which leaves me with my problem: how can I fill a Javascript variable with data from the Java server?

I was looking into using JSF and incorporating the HTML5 with the Javascript into it. Apparently, the server side code is rendered first and then sent to the client. In that case, I can do something like this:

var data = #{controller.getData};

If this does work, there is one problem: the data is "static". Whereas, I need to be able to change this data frequently by receiving new data from the server. But, if the server side code is already rendered and then sent to the client, each call to #{controller.getData} will return the same value.

So, this lead me to look into AJAX. JSF provides an AJAX Javascript library, however, I can't seem to understand how to use it to change a variable within my Javascript code in the HTML5 document (within the JSF page). So, again, how can I fill a Javascript variable with data from the Java server?

Answer 1

If you'r using JSF without any component library, you can embed your script into a panelGroup and rerender this panel by 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>

But if you have Primefaces on you can call a javascript on your controller, and it will be executed by the browser once it gets the response:

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

An other option available with Primefaces also is to use oncomplete attribute:

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

Answer 2

I think the easiest way for you to do this is to define a hidden variable:

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

Then in Javascript you can easily do:

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

Note that you will have to re-render this hidden value on you AJAX action. Also, you can take a look at Ajax Push library available with Richfaces. Hope it helps.

Answer 3

What I believe I was looking for was a Web Service, such as, SOAP and REST. It would be useful to use AJAX embedded in a JSF component if I wanted to update that portion of the view. However, I merely need data from the server for a specific reason. So, it seems I can use a Web Service for this case. I can use the @path annotation in a singleton or stateless EJB to make it a REST URI endpoint. Then, in the Javascript code, I can access that URI endpoint through an AJAX call which will allow me to access a method and receive a response from the EJB.