Как сделать из jsf Json?

Скачиваете jquery (условно jquery.js). Помещаете например в /WEB-INF/resources/js/ (Обязательно часть /WEB-INF/resources/)

...
<h:head>
    ...
    <h:outputScript name="js/jquery.js"/>
    <h:outputScript>
        function jsonSuccess(data) {
            // здесь можете передать data в свой скрипт
        }
    </h:outputScript>
</h:head>
<h:body>
    ...
    <h:button onclick="$.getJSON('#{jsonUrl}', { param1: 'value1', param2: '#{value2}' }, jsonSuccess); return false;"/>
    ...
</h:body>
...

Примерно так. Для начала сойдёт.
В jquery для запроса json есть функция $.getJSON (упрощённая версия $.ajax). Вызываем её в обработчике нажатия на кнопку.
jsonUrl - это url, который выдаёт json. Можете и строкой написать (example.com) если не надо вычислять из el-выражения.

Надеюсь ясно как из java передать переменные в скрипт на jsf-странице. Точно так же как в компоненты JSF с помощью EL #{}.

При получении json-а вызывается функция jsonSuccess, в которой делайте с ним что хотите. Но вы можете вместо jsonSuccess передать сразу функцию своего скрипта, если она принимает нужные параметры.

Чтобы при нажатии на кнопку в завершении не срабатывала функция jsf, надо чтобы обработчик вернул false (ну как обычно принято было раньше в обработчиках событий). Поэтому return false после вызова $.getJSON.