JSF教程 - JSF Ajax Hello World示例

2018-01-09 19:01 更新

JSF教程 - JSF Ajax Hello World示例


AJAX代表Asynchronous JavaScript And Xml。這是一種使用JavaScript的HTTPXMLObject發(fā)送數(shù)據(jù)的技術(shù)到服務(wù)器并從服務(wù)器異步接收數(shù)據(jù)。

在Ajax中，Javascript代碼與服務(wù)器交換數(shù)據(jù)，更新網(wǎng)頁(yè)的部分而不重新加載整個(gè)頁(yè)面。

JSF支持使用f:ajax標(biāo)簽的Ajax調(diào)用。

下面顯示了一個(gè)簡(jiǎn)單的JSF標(biāo)記。

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

標(biāo)記屬性

屬性 描述
disabled 如果為true，則Ajax行為將應(yīng)用于任何父組件或子組件。如果為false，將禁用Ajax行為。
event 將調(diào)用Ajax請(qǐng)求的事件，例如“點(diǎn)擊"，“改變"，“模糊"，“按鍵"等。
execute 組件的ID的空格分隔列表應(yīng)包含在Ajax請(qǐng)求中。
immediate 如果在應(yīng)用請(qǐng)求值階段廣播生成的“true"行為事件。否則，將在“調(diào)用應(yīng)用程序"階段期間廣播事件。
listener 背景中方法的EL表達(dá)式bean在Ajax請(qǐng)求期間調(diào)用。
onerror 在Ajax請(qǐng)求期間發(fā)生錯(cuò)誤時(shí)，JavaScript回調(diào)函數(shù)的名稱。
onevent 用于處理UI事件的JavaScript回調(diào)函數(shù)的名稱。
render 組件的ID的空格分隔列表將在Ajax請(qǐng)求后更新。


例子

以下代碼顯示了如何創(chuàng)建 h:outputText 標(biāo)記Ajax應(yīng)用程序來(lái)顯示用戶輸入。

下面的代碼來(lái)自UserBean.java。

package cn.w3cschool.common;


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

import java.io.Serializable;

@ManagedBean
@SessionScoped
public class UserBean 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 getSayWelcome(){
    if("".equals(name) || name ==null){
      return "Null Message";
    }else{
      return "Ajax message : Welcome " + name;
    }
  }
  
}

以下代碼來(lái)自demo.xhtml。

h:inputText 創(chuàng)建一個(gè)輸入字段框。它使用 h:commandButton 來(lái)調(diào)用 f:ajax 。

<?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:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html">
  
    <h:body>
      <h:form>
      
        <h:inputText id="name" value="#{userBean.name}"></h:inputText>
        <h:commandButton value="Welcome Me">
           <f:ajax execute="name" render="output" />
        </h:commandButton>
        
        <h2><h:outputText id="output" value="#{userBean.sayWelcome}" /></h2>
        
      </h:form>

  </h:body>
</html>

Download Ajax_HelloWorld.zip


跑步

將生成的WAR文件從目標(biāo)文件夾復(fù)制到Tomcat部署文件夾并運(yùn)行Tomcat-Install-folder / bin / startup.bat。

Tomcat完成啟動(dòng)后，在瀏覽器地址欄中鍵入以下URL。

http://localhost:8080/simple-webapp/demo.xhtml
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)