Put Some Ajax4JSF Magic into Data Validation

he Asynchronous JavaScript and XML (AJAX) technology is notorious for making the user experience in web browsers more efficient, dynamic, and enjoyable and can minimize bandwidth usage. AJAX is based on JavaScript, the Document Object Model (DOM), and XMLHttpRequest, and it is used as a web technique for transferring XML between a browser and a server dynamically without posting a web page to the server.

The "asynchronous" in AJAX implies that the processing of the web page continues while XMLHttpRequest is processed on the server and a response is returned to the browser client. AJAX has a lot of applications such as an autocompletion feature that updates a form with corresponding, existing information when an entry is made in one field; dynamic form validation; and periodic refreshing of page sections or areas, which doesn't require reloading the entire web page.

The JavaServer Faces (JSF) technology provides a set of components for developing user interfaces (UIs) that are the front ends for Java 2 Platform, Enterprise Edition (J2EE) applications. There is an open source framework, Ajax4JSF, that is available for adding AJAX functionality to JSF applications without requiring any JavaScript.

Ajax4JSF provides a component library that you can use to give a JSF page AJAX functionality across the entire page. It supports action and value change listeners and server-side validation and conversion facilities of the JSF framework. Ajax4JSF also supports managing static and dynamic resources, such as images and cascading style sheets (CSSs) and the Facelets framework. To use Ajax4JSF, you need to have these tools installed:

• JDK 1.4–1.6
• JSF 1.1 or 1.2
• A J2EE application server, such as WebSphere 5.1–6, WebLogic 8.1–9.0, or Oracle OC4J 10.1.3
• A browser that supports XMLHttpRequest, such as Internet Explorer 6 or later or Netscape Navigator 6 or later.

An event on the page invokes an AJAX request, and specified regions of the page are updated with the AJAX response.

Now take a closer look at the Ajax4JSF framework. The Ajax filter is registered in the web.xml file and distinguishes between a JSF request and an AJAX request. In a JSF request the complete JSF page is synchronized with the JSF component tree, while in an AJAX request only the AJAX region, specified by <a4j:region> is updated with the AJAX response.

AJAX action components—AjaxCommandButton, AjaxCommandLink, and AjaxSupport—are used to send an AJAX request from the browser to the server.

An Ajax container is an area on a JSF page that is to be decoded during an AJAX request and updated with the AJAX response. The JavaScript engine runs on the client side and updates the different regions of a JSF page with the AJAX response.

Ajax4JSF provides a component library to implement AJAX functionality in JSF. Some of the commonly used components are listed in Table 1.

Table 1. Ajax4JSF Components

Component	Description	Attributes
<aj4:region>	This component specifies an area that is decoded in an AJAX request; however, components out of the region may be updated. The region defined by f:view is the default region.	renderRegionOnly – If set to TRUE—the default value—the region only is updated with the response. rendered – If set to FALSE the component is not rendered. binding – Component binding. ajaxListener – Method binding that represents a public method that returns void and accepts an AjaxEvent.
<a4j:support>	This component adds AJAX support to a JSF component and generates an AJAX request on a specified event.	actionListener – Specifies method binding for a public method that returns void and accepts an ActionEvent. action – Specifies a method binding for a backing bean method that is invoked after the specified event and before components are re-rendered with the AJAX response. oncomplete – JavaScript code to invoke after an AJAX request is completed. reRender – Specifies a comma-separated list of component IDs that are updated with the AJAX response. requestDelay – Specifies the delay in number of milliseconds (ms) before sending an AJAX request. event – A JavaScript event that initiates an AJAX request. binding – Component binding.
<a4j:poll>	This component sends periodical AJAX requests at a specified frequency (ms) and updates the page with the response.	interval – Specifies the interval in milliseconds (ms) after which an AJAX request is sent—the default value is 1000 ms (1 second). actionListener, action, oncomplete, reRender, binding – Same as for <a4j:support>.
<a4j:commandLink>	This component provides a link that submits a form with AJAX.	reRender – Specifies component IDs that are updated with an AJAX response. actionListener, oncomplete, action, requestDelay, binding – Same as for <a4j:support>.
<a4j:commandButton>	This component provides a command button for using AJAX to submit a form.	reRender, actionListener, oncomplete, action, requestDelay, binding – Same as for <a4j:commandLink>.
<a4j:outputPanel>	This component provides component grouping in the output area that is updated with an AJAX response. The page area specified by this component may be updated in addition to the components specified in the reRender attribute of a component that initiates an AJAX request.	layout – Specifies HTML layout for generated markup; a value of block generates a <div> element and a value of inline generates a <span> element. style – Specifies a CSS. ajaxRendered – Specifies if the component is to be updated in addition to the components updated with reRender.
<a4j:mediaOutput>	This component generates multimedia output.	mimeType – The mime-type of the generated content—for example, image/jpeg.
<a4j:form>	This component provides a form that submits with AJAX.	reRender, oncomplete, requestDelay, binding
<a4j:log>	Generates a pop-up for client-side debug information when an AJAX request is sent.	level-Log level – Values may be FATAL, ERROR, WARN, INFO, DEBUG, or ALL. width – Specifies the width of the pop-up. height – Specifies the height of the pop-up.

Next Page