Important notice: Richfaces framework reached End of Life in 2016. Therefore, you cannot expect fixes or enhancements unless you fork the project and upgrade yourself the framework. We recommend reading these guidelines, if you want to modernize your Richfaces application: How to migrate Richfaces Web applications to another Web UI
If you have already approached Ajax technology using simple Javascript code you probably agree that Ajax can be rather cumbersome to implement thus reducing the benefits of adopting it.
Richfaces ships with a complete set of components and capabilities which use Ajax technology without the burden of writing Javascript code. Let’s see how to achieve this, starting with simple examples:
How to send an AJAX request
Use <a4j:support>
Using this tag, you enable a JSF component to send an Ajax request based on the event supported by the component. In practice, you turn a simple JSF component into an Ajax component.
For example, in this code snippet you are recalling the method reverseIt each time there’s an event onkeyup on the inputText:
<h:outputText value="Enter String to Reverse: " /> <h:inputText value="#{UserBean.text}"> <a4j:support event="onkeyup" action="#{UserBean.reverseIt}" reRender="reversed"></a4j:support> </h:inputText> <h:outputText id="reversed" value="Text reversed: #{UserBean.textReversed}" />

Use <a4j:commandButton> or <a4j:commandLink>
These components issue natively an Ajax request and specify which component need to be updated once the action is completed. Both components work the same, just the commandButton is rendered as an HTML button while the commandLink is an HyperLink.
Let’s see the a4j:commandButton:
<h:outputText value="Enter String: " /> <h:inputText value="#{UserBean.text}" /> <a4j:commandButton value="Submit" action="#{UserBean.textAction}" reRender="one,two"></a4j:commandButton> <h:outputText id="one" value="#{UserBean.toUpper}" /> <h:outputText id="two" value="#{UserBean.toLower}" />
Here, the reRender attribute specifies that the outputText “one” and “two” need to be updated, after that the textAction has been invoked.
Limiting the amount of data to send
So far we’ve seen how Ajax can be useful because only a partial rendering of the Web page is performed, instead of the whole page. However we’re still sending to the server all fields contained in the form. This can lead to a decrease of performance if we are not using all of them.
In order to limit the amount of fields sent to the server, you can use the <a4j:region> tag. See the following example:
<a4j:commandButton id="one" value="Submit one" /> <h:inputText id="input1" value="#{UserBean.text1}" /> <a4j:region> <a4j:commandButton id="two" value="Submit two" /> <h:inputText id="input2" value="#{UserBean.text2}" /> </a4j:region>

In this example, when you click on the commandButton “two”, since it’s contained in a a4j:region, only the content of the a4j:region will be process- that is only the input2 field.
<a4j:commandButton id="one" value="Submit one" /> <h:inputText id="input1" value="#{UserBean.text1}" /> <a4j:commandButton id="two" value="Submit two" /> <h:inputText id="input2" value="#{UserBean.text2}" ajaxSingle="true" />
<h:form> <a4j:poll id="poll" interval="500" reRender="counter" /> </h:form> <h:form> <h:panelGrid columns="2"> <h:panelGrid columns="2"> <a4j:commandButton value="Start Counter" action="#{UserBean.startCounter}" reRender="poll" /> <a4j:commandButton value="Stop Counter" action="#{clockBean.stopCounter}" reRender="poll" /> </h:panelGrid> <h:outputText id="counter" value="#{UserBean.counter}" /> </h:panelGrid> </h:form>