Use F:ajax tags in JSF to change data without refreshing pages

Ajax is used in the front-end of an asynchronous request data operation, widely used in JS, the General JS framework, such as JQ has a encapsulated method for initiating an asynchronous request operation. Asynchronous operations can enhance the user experience and operations, and more and more programs are using AJAX. JSF's Facelets has a built-in AJAX tag that can be used for simple AJAX operations.

F:ajax has several common properties, namely: event, listener, render.

1, event:event corresponding to a JS event name, the event name omits the beginning of the "on" character, for example, click event is the onclick, then only need to fill in the click. Similar events include Obblur, onkeyup, onmouseover and so on.

2, Listener:lisetener to specify an AJAX event, the current event needs to execute what method in the bean. You actually invoke the method in the bean.

3. Fill in the Render:render with a component ID that needs to be rendered. The purpose of the asynchronous operation of Ajax is to not refresh the page display data, then when the data is returned, the data needs to be displayed in that area, give the region an ID, and the render association, where you can fill in multiple IDs, separated by a space.

The exemplary code is as follows:

A.xhtml:

1 <H:formPreparedid= "false">2 <DivID= "Show">#{bean.var}</Div>3 <H:commandbuttonvalue= "Tap"> 4     <F:ajaxEvent= "click"Render= "Show"Listener= "#{bean.do}"/>5 </H:commandbutton>6 </H:form>

Bean.java:

Private String var;  Public void SetVar (String var) {  this. var = var;          }   Public String GetVar () {  return  var;  }  Public void  Do () {  var= "Hello";      }

In the above code, when the button is clicked on the page, the Do method in the bean is triggered, and the value of Var is changed, and the area of refresh ID "show" is specified by the Render property of Ajax.

JSF Ajax can also be associated with a set of components to form an AJAX group, just put a set of components inside the AJAX tag, the exemplary code is as follows:

1 <F:ajaxEvent= "click"Listener= "#{bean.do}">2     <H:form>3         <H:commandbuttonvalue= "Click1"/>4         <H:commandbuttonvalue= "Click2"/>5         <H:commandbuttonvalue= "Click3">6              <F:ajaxEvent= "Blur"Lisrener= "#{bean.do2}"/>7         </H:commandbutton>8      <H:form>9  </F:ajax>        

The above code also uses an AJAX tag in the third button. Ajax components can be nested in this way, starting from the nearest place.

JSF's AJAX operations are widely used for field validation, passing data to beans through events, and general input type labels using the Validator property to specify a validation method with 3 parameters, namely Facescontext, UIComponent and an object type data, which is the value in the input box.

Ajax also has a OnEvent property, which can only be filled in with a single JS method. This JS method will be called 3 times, three states: "Begin, success, complete", that is, for the AJAX request of the three states: Before the request, render the response, a successful call. The JS method has a parameter with the Status property of the parameter for these states, which is an exemplary code as follows:

　　

1 functionFun (data) {2     if(Data.status = = "Begin"){3 4     }  5      if(Data.status = = "complete"){6 7     } 8     if(Data.status = = "Success"){9 Ten     }   One   A}

Summary: The current use is not many, some special use methods have not encountered, such as the introduction of JSF JS Library, can achieve more complex AJAX operations, passing AJAX parameters and so on. Later encountered more detailed understanding.

Use F:ajax tags in JSF to change data without refreshing pages