Inside JSF 2.0's Ajax and HTTP GET Support
Support for Ajax
Previous releases of JSF had no or limited support for Ajax integration. The new release provides good support for integration of Ajax in JSF.
The default implementation provides a single JavaScript resource that has the resource identifier jsf.js
. This resource is required for Ajax, and it must be available under the javax.faces
library. The annotation @ResourceDependency
is used to specify the Ajax resource for the components, the JavaScript function jsf.ajax.request
is used to send information to the server in an asynchronous way, and the JavaScript function jsf.ajax.response
is used for sending the information back from the server to the client.
On the client side, the API jsf.ajax.request
is used to issue an Ajax request. When the response has to be rendered back to the client, the callback previously provided by jsf.ajax.request
is invoked. This automatically updates the client-side DOM to reflect the newly rendered markup.
The two ways to send an Ajax request by registering an event callback function are:
- Use the JavaScript function
jsf.ajax.request
- Use the
<f:ajax>
tag
JavaScript Function jsf.ajax.request
The function jsf.ajax.request(source, event, options)
is used to send an asynchronous Ajax request to the server. The code snippet below shows how you can use this function:
<commandButton id="newButton" value="submit"
onclick="jsf.ajax.request(this,event,
{execute:'newButton',render:'status',onevent: handleEvent,onerror: handleError});return false;"/>
</commandButton/>
The first argument in the function represents the DOM element that made an Ajax call, while the second argument (which is optional) corresponds to the DOM event that triggered this request. The third argument is composed of a set of parameters, which is sent mainly to control the client/server processing. The available options are execute
, render
, onevent
, onerror
, and params
.
<f:ajax> Tag
JSF 2.0 enables page authoring with <f:ajax>
, which is a declarative approach for making Ajax requests. You can use this tag instead of manually coding the JavaScript for Ajax request calls. This tag serves two roles, depending on the placement. You can nest it within any HTML component or custom component. If you nest it with a single component, it will associate an Ajax action with that component.
The <f:ajax>
tag has four important attributes:
render
ID or a space-delimited list of component identifiers that will be updated as a result of the Ajax callexecute
ID or a space-delimited list of component identifiers that should be executed on the serverevent
The type of event the Ajax action will apply to (refers to a JavaScript event without theon
prefix)onevent
The JavaScript function to handle the event
Consider the following code from the login page of the online quiz application. The code validates the input of the email field by sending an Ajax call for every keystroke (see Figure 1). The validation is done by a managed bean method that acts as a value change listener.
<h:inputText label="eMail ID" id="emailId" value="#{userBean.email}" size="20"
required="true" valueChangeListener="#{userBean.validateEmail}">
<f:ajax event="keyup" render="emailResult"/>
</h:inputText>
...
<h:outputText id=" emailResult" value="#{userBean.emailPrompt}" />
Figure 1. Using Ajax to Validate the Input: The online quiz application validates email field input by sending an Ajax call for every keystroke.
Here, <f:ajax>
is nested within the emailId
inputText component. For every keyup
event that is generated, an Ajax call is sent to the server, which invokes the valueChangeListener
. By default, the component in which the tag is nested is executed on the server. So, the execute
attribute is not specified. Also, for an input component, the default event is valueChange
, so the event
attribute is also not used. The render
attribute indicates that the outputText component emailResult
should be updated after the Ajax call.
events
attribute.<f:ajax event="mouseover">
<h:inputText id="input1" .../>
<h:commandLink id="link1" .../>
</f:ajax>
In this example, input1
and link1
will exhibit Ajax behavior on a mouseover
event.
<f:ajax event="mouseover">
<h:inputText id="input1" ...>
<f:ajax event="keyup"/>
</h:inputText>
<h:commandLink id="link1" .../>
</f:ajax>
In this example, input1
and link1
exhibit Ajax behavior on keyup
and mouseover
events, respectively.
Using the Ajax tag enhances the markup of the associated component to include a script that triggers the Ajax request. This the page author to issue Ajax requests without having to write any JavaScript code.
Conclusion In this article, we discussed the new Ajax and HTTPGET
support in JSF 2.0. These new features enable developers to build truly dynamic web pages simply and easily.
Acknowledgements
The authors would like to sincerely thank Mr. Subrahmanya (SV, VP, ECOM Research Group, E&R) for his ideas, guidance, support and constant encouragement and Ms. Yuvarani Meiyappan (Lead, E&R) for kindly reviewing this article and for her valuable comments.About the Authors
Sangeetha S. works as a Senior Technical Architect at the E-Commerce Research Labs at Infosys Technologies. She has over 10 years of experience in design and development of Java and Java EE applications. She has co-authored a book on 'J2EE Architecture' and also has written articles for online Java publications.
Nitin KL works at the E-Commerce Research Labs at Infosys Technologies. He is involved in design and development of Java EE applications using Hibernate, iBATIS, and JPA.
Ananya S. works at the E-Commerce Research Labs at Infosys Technologies. She is involved in design and development of Java EE applications using Hibernate, iBATIS, and JPA.
Page 2 of 2
This article was originally published on March 15, 2010