CODEWITHSUNDEEP
ajaxjsf-2
Geek
Geek

Reputation: 27183

Why does ajax and jsf work nicely together? How do Ajax lifecycle plug in with normal JSF lifecycle?

I have used JSF 1.2 but new to JSF 2.0 . It seems like JSF 2.0 seamlessly supports ajax functionality via <f:ajax> but I am not clear yet how ? I would like to understand what makes these two powerful technologies to work so nicely together ? How does the two lifecycles interact ?

P.S: I am familiar with ajax and javascript. So you can base your answer on that premise.

Upvotes: 0

Views: 1580

Answers (1)

skuntsel
skuntsel

Reputation: 11742

The question is really broad and I would suggest to search for the appropriate tags to understand its usage in real situations. BalusC has contributed much here on stackoverflow and has also written excellent tutorials that Xtreme Biker made a reference to.

Due to abscence of answers I would offer a basic vision of how ajax works within JSF. There is a special Javascript library in JSF which makes it possible to perform ajax calls to the server with jsf.ajax.request(...). To ease development, there are components that you may attach ajax behaviour to. Typically you will use <f:ajax> tag on the component of your choice, like <h:commandButton>, to add ajax functionality to it.

In the old times we would send an asynchronous XMLHttpRequest via get or post to the server and wait until server sends us postback data which we will get most typically in JSON or XML format for client'side processing and update the view via document.getElementById(...) or by more convenient methods introduced by modern Javascript libraries. I think that in the end this is what JSF does behind the scenes.

In JSF 2.0 <f:ajax> tag was introduced which helps partially submit data, process it on server and partially update your view. For this the ajax tag has the following most important features/attributes: <f:ajax execute="..." render="..." event="..." listener="..." onevent="..." />. Let's take a closer look on all of them.

  1. execute attribute tells JSF about what elements should be updated/processed on the server during this request by specifying a list of element ids;
  2. render attribute tells JSF which components shall be replaced after ajax call is finished - the new elements that were rendered on the server shall replace the old ones with specified ids after partial page update;
  3. event attribute defines events on which an ajax call shall take place, for instance, in case of a command button the event may be a click event, in case of an input text field the event may be a keyup, or blur event;
  4. listener attribute defines a binding to a managed bean method of type public void processAjaxRequest (AjaxBehaviorEvent event) { } that will be triggered on ajax request and executed on server, before partial page update is done;
  5. onevent attribute defines a javascript function to call during different phases of ajax request.

You may consult another excellent tutorial written by Marty Hall on ajax here.

I didn't intend to make an overview of ajax features in JSF 2.0, but rather to make a short introduction to get a basic grasp of ajax functionality.

Upvotes: 1

Related Questions