Ajax4jsf User Guide 中文翻譯 — 在JSF中使用AJAX

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

Ajax4jsf User Guide 中文翻譯
翻譯專貼: http://bbs.hexiao.cn/read.php?fid=3&tid=13&fpage=1

序言

Ajax4JSF是一個很容易使用的架構, 在其User Guide中詳細介紹了如何使用其功能,找時間學習一下,並翻譯出來以加深理解和方便更多的Java愛好者使用Ajax4jsf 架構.

翻譯進度和問題可以在論壇討論. http://bbs.hexiao.cn/

第二章是一個簡單的入門程式,看完這一章你就可以建立基本的Ajax程式了.
Chapter 2. Getting Started with Ajax4jsf

環境要求
要使用Ajax4JSF 架構你僅僅需要JDK1.4或者更高,任何JSF實現,和你最喜歡的Servlet容器.在下一章我們將給你提供詳細的環境資訊.
Ajax4jsf 被設計為一個容易使用的架構.僅僅有一點簡單的設定步驟就可以在你的JSF程式中使用Ajax功能了.

下載 Ajax4jsf
最新的Ajax4jsf 發布版在這裡

https://ajax4jsf.dev.java.net/nonav/ajax/ajax-jsf/download.html

下載.
安裝
解壓 ajax4jsf.zip 檔案.
複製 ajax4jsf.jar and oscache-2.2.jar 到程式的 WEB-INF/lib 檔案夾下.
把下面的內容添加到你的程式的 WEB-INF/web.xml 檔案中:

 <filter>          <display-name>Ajax4jsf Filter</display-name>          <filter-name>ajax4jsf</filter-name>          <filter-class>org.ajax4jsf.Filter</filter-class>          </filter>          <filter-mapping>          <filter-name>ajax4jsf</filter-name>          <servlet-name>Faces Servlet</servlet-name>          <dispatcher>REQUEST</dispatcher>          <dispatcher>FORWARD</dispatcher>          <dispatcher>INCLUDE</dispatcher>          </filter-mapping>

注意. 你可以複製和粘貼上面的內容在 README.txt 檔案中.

添加下面的內容:

  <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>

到你每個使用Ajax功能的JSP頁面中.

簡單的 AJAX Echo 項目

讓我們來看一個簡單的JSF項目. 我們僅僅需要一個JSP頁面,裡麵包含一個Form和一些JSF標籤: <h:inputText> 和 <h:outputText>.

我們這個簡單的程式應該可以讓我們輸入一些文字到<h:inputText>中, 然後發送資料到Server,並在 <h:outputText>中顯示Server的響應(給我們一個Echo資訊).

JSP 頁面

下面是一個我們需要的頁面代碼 (echo.jsp) :

    <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>    <html>      <head>        <title>repeater </title>       </head>      <body>        <f:view>          <h:form>            <h:inputText size="50" value="#{bean.text}" >               <a4j:support event="onkeyup" reRender="rep"/>            </h:inputText>            <h:outputText value="#{bean.text}" id="rep"/>          </h:form>        </f:view>      </body>    </html>

就如你看到的,唯一一行於常給JSF頁面代碼不同的就是下面的一行

    <a4j:support event="onkeyup" reRender="rep"/>

在這裡我們在父標籤(<h:inputText>)中添加了一個AJAX 支援. 該支援綁定了JavaScript事件“onkeyup” .因此, 每一次該事件發布給父標籤時,我們的程式將發送一個AJAX請求到Server.這意味著我們的受管理的bean將包含該“text” 域中我們輸入的最新資料.

<a4j:support> 標籤的“reRender” 屬性(attribute)定義我們的頁面的哪一部分被更新. 在這裡,該頁面唯一被更新的部位是 <h:outputText> 標籤,因為他的ID值和“reRender” 的屬性值向匹配. 在一個頁面中更新多個元素(elements)也是很簡單的:僅僅把他們的IDs放在 “reRender” 屬性中就可以了.

資料 Bean

當然了,為了運行這個程式我們還需要一個受管理的bean

        package demo;        public class Bean {        private String text;                public Bean() {        }                public String getText() {        return text;        }                public void setText(String text) {        this.text = text;        }        }

faces-config.xml

下一步, 我們需要在faces-config.xml 中註冊上面的bean:

    <?xml version="1.0" encoding="UTF-8"?>    <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"    "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">    <faces-config>      <managed-bean>        <managed-bean-name>bean</managed-bean-name>        <managed-bean-class>demo.Bean</managed-bean-class>        <managed-bean-scope>request</managed-bean-scope>        <managed-property>          <property-name>text</property-name>          <value/>        </managed-property>      </managed-bean>    </faces-config>

注意:這裡沒有任何東西直接和Ajax4jsf 有關聯.

Web.xml

最後,不要忘了添加jar檔案和更改 web.xml 檔案:

    <?xml version="1.0"?>    <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"      xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">            <display-name>a4jEchoText</display-name>      <context-param>        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>        <param-value>server</param-value>      </context-param>      <filter>        <display-name>Ajax4jsf Filter</display-name>        <filter-name>ajax4jsf</filter-name>        <filter-class>org.ajax4jsf.Filter</filter-class>      </filter>      <filter-mapping>        <filter-name>ajax4jsf</filter-name>        <servlet-name>Faces Servlet</servlet-name>        <dispatcher>REQUEST</dispatcher>        <dispatcher>FORWARD</dispatcher>        <dispatcher>INCLUDE</dispatcher>      </filter-mapping>      <listener>        <listener-class>          com.sun.faces.config.ConfigureListener        </listener-class>      </listener>            <!-- Faces Servlet -->      <servlet>        <servlet-name>Faces Servlet</servlet-name>        <servlet-class>          javax.faces.webapp.FacesServlet        </servlet-class>        <load-on-startup>1</load-on-startup>      </servlet>            <!-- Faces Servlet Mapping -->      <servlet-mapping>        <servlet-name>Faces Servlet</servlet-name>        <url-pattern>*.jsf</url-pattern>      </servlet-mapping>      <login-config>        <auth-method>BASIC</auth-method>      </login-config>    </web-app>

就這樣了, 現在你的程式應該可以工作了.

部署

最終,你可以在Servlet容器中部署你的程式了. 在你喜歡的容器中部署,然後在你的瀏覽器中輸入: http://localhost:8080/a4jEchoText/echo.jsf

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More