Hello, in this tutorial I would like to describe how to send AJAX request to the server, receive the response and update the page accordingly and will demonstrate the following:
- Ajax enabled input form
- Sending & receiving data to & from a managed bean
- Output page to display the result
This example will show the implementation of ajax in jsf.
1. Introduction
AJAX is an acronym for Asynchronous JavaScript and XML. It is a technique to use HTTPXMLObject of JavaScript to send data to the server and receive data from the server asynchronously (i.e. without reloading the whole page). Thus, making the application interactive and faster.
The good thing about AJAX in JSF is that all the work related to generating a request, sending a request, receiving a response and processing it, is hidden behind well-defined abstractions.
In the below tutorial, we will have the following components:
- ajax.xhtml – A jsf page having the Ajax component to accept user input and display the output
- HelloBean.java – A managed bean class which holds a message to be displayed on the page
- web.xml – Web application configuration file
This sample application will support the ajax call with <f:ajax /> tag in jsf.
1.1 How it can be achieved?
Programmers need to implement the <f:ajax> tag in a jsf application to handle the ajax calls. Let’s take a look at the tag and understand how it is done:
JSF Ajax Tag
1 | <f:ajax execute = "input-component-name" render = "output-component-name" /> |
The element <f:ajax> informs JSF engine that once the event will occur, the component specified in execute attribute will be executed on the server and the component specified in render attribute will be rendered on the webpage once the ajax response is received.
1.2 Tag Attributes
There are multiple attributes that can be used with the ajax tag, for e.g.:
| # | Attribute | Description |
|---|---|---|
| 1. | disabled | If true, the Ajax behavior will be applied to any parent or child components. If false, the Ajax behavior will be disabled. |
| 2. | event | The event that will invoke Ajax requests, for example, click, change, blur, keypress etc. |
| 3. | execute | Attribute execute contains a space-separated list of HTML identifiers of the elements that will be executed on the server. In our example, the element with identifier nameId will be executed which means that its value will be set in the bean. The attribute execute may also contain four special values: @this, @form, @all and @none. If execute attribute is not specified, the default value of @this will be used. |
| 4. | immediate | If true, behavior events generated are broadcast during Apply Request Values phase. Otherwise, the events will be broadcast during Invoke Applications phase. |
| 5. | listener | An EL expression for a method in a backing bean called during the Ajax request. |
| 6. | onerror | The name of a JavaScript callback function in case of an error during the Ajax request. |
| 7. | onevent | The name of a JavaScript callback function to handle UI events. |
| 8. | render | Attribute render contains a space-separated list of HTML identifiers of the elements that will be updated on the web page once the AJAX response is received. It also supports four special values as execute attribute but the default value is @none. |
Now, open up the Eclipse IDE and let’s start building the application!
2. JSF Ajax Render Example
2.1 Tools Used
We are using Eclipse Kepler SR2, JDK 8 (1.8.0_131), Tomcat7 application server and MySQL database. Having said that, we have tested the code against JDK 1.7 and it works well.
2.2 Project Structure
Firstly, let’s review the final project structure, in case you are confused about where you should create the corresponding files or folder later!
