JSF之AJAX学习

Ajax: A Brief Introduction
AJAX stands for Asynchronous JavaScript And Xml.

Ajax is a technique to use HTTPXMLObject of JavaScript to send data to server and receive data from server asynchronously.

So using Ajax technique,javascript code exchanges data with server,updates parts of web page without reloading the whole page.

JSF provides execellent support for making ajax call. It provides f:ajax tag to handle ajax calls.

<f:ajax execute="input-component-name" render="output-component-name" />
Tag Attributes
S.N. 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
A space-separated List of IDs for components that should be included in the Ajax request.
4 immediate
If "true" behavior events generated from this behavior 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 to be called during the Ajax request.
6 onerror
The name of a JavaScript callback function that will be invoked if there is an error during the Ajax request
7 onevent
The name of a JavaScript callback function that will be invoked to handle UI events.
8 render
A space-separated list of IDs for components that will be updated after an Ajax request.
Example Application
Let us create a test JSF application to test the custom component in JSF.

Step Description
1 Create a project with a name helloworld under a package com.tutorialspoint.test as explained in the JSF - First Application chapter.
2 Modify UserData.java file as explained below.
3 Modify home.xhtml as explained below. Keep rest of the files unchanged.
4 Compile and run the application to make sure business logic is working as per the requirements.
5 Finally,build the application in the form of war file and deploy it in Apache Tomcat Webserver.
6 Launch your web application using appropriate URL as explained below in the last step.
UserData.java

package com.tutorialspoint.test;


import java.io.Serializable;


import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;


@ManagedBean(name = "userData",eager = true)
@SessionScoped
public class UserData implements Serializable {


   private static final long serialVersionUID = 1L;


   private String name;
   public String getName() {
      return name;
   }
   public void setName(String name) {
      this.name = name;
   }


   public String getWelcomeMessage(){
      return "Hello " + name;
   }
}

home.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:tp="http://java.sun.com/jsf/composite/tutorialspoint">
   <h:head>
      <title>JSF tutorial</title>
   </h:head>
   <h:body>
      <h2>Ajax Example</h2>
      <h:form>
      <h:inputText id="inputName" value="#{userData.name}"></h:inputText>
       <h:commandButton value="Show Message">
         <f:ajax execute="inputName" render="outputMessage" />
      </h:commandButton>
      <h2><h:outputText id="outputMessage"
         value="#{userData.welcomeMessage !=null ?
            userData.welcomeMessage : ''}"
         /></h2>
      </h:form>
   </h:body>
</html>

Once you are ready with all the changes done,let us compile and run the application as we did in JSF - First Application chapter. If everything is fine with your application,this will produce following result:

JSF ajax result
Enter name and press Show Message button. You will see the following result without page refresh/form submit.

JSF ajax result1

使用难点指南：

1、后台接收的时候backing bean 接收的输入为空NULL？Tips：请确保AJAX内填入了execute参数，若需要一个inputtext，那么填入相应的ID，如果要提交很多控件的内容，请把他们放在同一个Form内然后，execute="@form";注意：form之间不可以嵌套。

2、render页面上需要刷新的元素的id，如果有多个可以用空格隔开;

3、event指ajax事件触发的条件;

4、onevent指ajax事件相应完成后执行的js函数，即回调函数;

怎样？讲解到这里大家应该都清楚怎么使用这个控件了吧？

Stackoverflow.com的案例分析可参考：http://stackoverflow.com/questions/18931218/ajax-call-get-null-value-in-backing-bean-in-jsf

续：

一、AJAX要刷新的组件内部请不要放置需要刷新组件的AJAX方法，错误范例如下：

 <tr>
 <td class="leftLabel"><cms:cmsResourceOutput key="cms.placeHolder_attr_ticket" /></td>
 <td colspan="3" id="ticketTd">
 <h:inputText name="ticketVerifyId" id="ticketVerifyId" value="#{TicketPlaceHolderbackingBean.ticketVerifyId}"></h:inputText>
 <cms:cmsCommandButton id="verifyTicket" valueKey="placeHolder_ticket_verify" >
 <f:ajax execute="@form"  render="billReserveRelatePanel warnPanel" event="click" listener="#{TicketPlaceHolderController.verifyTicket}" onevent="callback"></f:ajax>
 </cms:cmsCommandButton>
 <h:panelGroup id="warnPanel" ><h:message for="ticketVerifyId" errorClass="errorMessage" /></h:panelGroup>
 <h:inputHidden id="billReserveRelatedId" value="#{TicketPlaceHolderbackingBean.billReserveRelatedId}" />
 </td>
 </tr>
 <tr >
 <td colspan="4">
 <h:panelGroup id="billReserveRelatePanel" >
 <h:dataTable value="#{TicketPlaceHolderbackingBean.billReserveRelatedList}"
															var="billReserveRelatedInf" varStatus="myVarStatus"
															rowClasses="businessRow1,businessRow2" styleClass="businessTable" headerClass="businessColumn"
															columnClasses="businessColumn0,businessColumn0,businessColumn0">
 <h:column>
 <!-- 票券优先级-->
 <f:facet name="header">
 <cms:cmsResourceOutput key="cms.placeHolder_attr_prio" />
 </f:facet>
 <h:panelGroup>
 <h:outputText value="#{billReserveRelatedInf.reservePrio}"></h:outputText>
 </h:panelGroup>
 </h:column>
 <h:column>
 <!-- 票券ID -->
 <f:facet name="header">
 <cms:cmsResourceOutput key="cms.placeHolder_attr_id" />
 </f:facet>
 <h:panelGroup>
 <h:outputText value="#{billReserveRelatedInf.ticket.billId}"></h:outputText>
 </h:panelGroup>
 </h:column>
 <h:column>
 <!-- 票券名称 -->
 <f:facet name="header">
 <cms:cmsResourceOutput key="cms.placeHolder_attr_name" />
 </f:facet>
 <h:panelGroup>
 <h:outputText value="#{billReserveRelatedInf.ticket.billNm}"></h:outputText>
 </h:panelGroup>
 </h:column>
 <h:column>
 <!-- 操作 -->
 <f:facet name="header">
 <cms:cmsResourceOutput key="cms.common_operate" />
 </f:facet>
 <h:panelGroup>
 <cms:cmsCommandLink valueKey="cms.placeHolder_up"  onclick="changHiddenInputValue(['billReserveRelatedId'],'#{billReserveRelatedInf.id}');"
																		action="#{TicketPlaceHolderController.upBillReserveRelatedInf}" styleClass="a_update_0">

<f:ajax execute="@form"  render="billReserveRelatePanel warnPanel" event="click" listener="#{TicketPlaceHolderController.verifyTicket}" onevent="callback"></f:ajax>

相关推荐