極客書

JSF - Ajax

AJAX代表異步JavaScript和Xml。

Ajax是一種使用JavaScript的HTTPXMLObject向伺服器發送數據並異步從伺服器接收數據的技術。因此，使用Ajax技術，javascript代碼與伺服器交換數據，更新web頁面的部分內容，而無需重新加載整個頁面。

JSF爲發出ajax調用提供了execellent支持。它提供了f:ajax標記來處理ajax調用。

JSF Tag

<f:ajax execute = "input-component-name" render = "output-component-name" />

Tag Attributes

S.No Attribute & Description
1

殘疾人

如果爲true，Ajax行爲將應用於任何父組件或子組件。如果爲false，則將禁用Ajax行爲。
2

事件

調用Ajax請求的事件，例如「click」、「change」、「blur」、「keypress」等。
3

執行

應包含在Ajax請求中的組件的id的空格分隔列表。
4

立即

如果在此行爲生成的「真」行爲事件在應用請求值階段廣播。否則，事件將在調用應用程式階段廣播。
5

聽者

在Ajax請求期間調用的後備be An中方法的EL表達式。
6

誤差

如果在Ajax請求期間出現錯誤，將調用的JavaScript回調函數的名稱。
7

一個事件

將被調用以處理UI事件的JavaScript回調函數的名稱。
8

渲染

將在Ajax請求後更新的組件的id的空格分隔列表。

Example Application

讓我們創建一個測試JSF應用程式來測試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 the rest of the files unchanged.
4 Compile and run the application to make sure the 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>

完成所有更改後，讓我們像在JSF-First應用程式一章中那樣編譯和運行應用程式。如果您的應用程式一切正常，這將產生以下結果。

JSF ajax result

輸入名稱並按「顯示消息」按鈕。在沒有頁面刷新/表單提交的情況下，您將看到以下結果。