发送 Ajax 请求

17 Mar 2025 | 阅读 2 分钟

RichFaces 提供了可以从 JavaServer Faces 页面发送 Ajax 请求的标签库。以下是 Web 应用程序中使用的重要标签。

<a4j:commandButton> 和 <a4j:commandLink> 标签用于在单击 JavaScript 事件时发送 Ajax 请求。
<a4j:poll> 标签用于使用计时器定期发送 Ajax 请求。
<a4j:ajax> 标签允许将 Ajax 功能添加到标准 JSF 组件，并在选定的 JavaScript 事件（例如 keyup 或 mouseover）上发送 Ajax 请求。
r 标签库中的大多数组件都内置了 Ajax 支持。

<a4j:commandButton> 标签

要实现此标签，我们需要创建以下文件。

// index.xhtml

<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:form id="form">
<h:outputText value="User Name " />
<h:inputText value="#{user.name}" />
<a4j:commandButton value="Enter Your Name" render="out" execute="@form" />
</h:form>
<br/>
<a4j:outputPanel>
<h:outputText value="Hello #{user.name} !" rendered="#{not empty user.name}" />
</a4j:outputPanel>

</ui:composition>

// User.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class User {
String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}

// web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>


<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
</web-app>

运行 index.xhtml 文件后，它会生成以下输出。

CommandLink 标签

// commandLink.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head></h:head>
<h:form id="form">
<h:outputText value="Name: " />
<h:inputText value="#{user.name}" />
<a4j:commandLink value="Click here" render="out" execute="@form" />
</h:form>
<br />
<a4j:outputPanel id="out">
<h:outputText value="Hello #{user.name} !" />
</a4j:outputPanel>
</ui:composition>

// User.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class User {
String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}

// web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>

<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
</web-app>

输出

<a4j:ajax> 标签

//ajax-event.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:a4j="http://richfaces.org/a4j">
<h:head>
<title>a4j:ajax Tag</title>
</h:head>
<h:body>
<h:form>
<h:outputText value="Enter Text "></h:outputText>
<h:inputText value="#{user.name}">
<a4j:ajax event="keyup" render="user-name"></a4j:ajax>
</h:inputText>
<br/>
<br/>
<h:outputText id="user-name" value=" #{user.name}"></h:outputText>
</h:form>
</h:body>
</html>

// web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>

<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
</web-app>

// User.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class User {
String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}

输出

下一主题RichFaces 部分树处理

发送 Ajax 请求

<a4j:commandButton> 标签

CommandLink 标签

<a4j:ajax> 标签

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

RichFaces 教程

Ajax 组件

皮肤和主题

UI 组件

面试题

发送 Ajax 请求

<a4j:commandButton> 标签

CommandLink 标签

<a4j:ajax> 标签

相关帖子

RichFaces 特性

部分树处理

RichFaces 简介

RichFaces 教程

RichFaces 配置

部分视图更新

RichFaces 应用

组件概览

RichFaces 架构

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器