JSF - Ajax
AJAX 代表异步 JavaScript 和 Xml。
Ajax 是一种使用 JavaScript 的 HTTPXMLObject 向服务器发送数据并从服务器异步接收数据的技术。因此,使用 Ajax 技术,javascript 代码可以与服务器交换数据,更新网页的部分内容而无需重新加载整个页面。
JSF 为进行 ajax 调用提供了出色的支持。它提供了 f:ajax 标记来处理 ajax 调用。
JSF 标签
<f:ajax execute = "input-component-name" render = "output-component-name" />
标签属性
S.No | 属性与描述 |
---|---|
1 | disabled 如果为真,则 Ajax 行为将应用于任何父组件或子组件。如果为 false,Ajax 行为将被禁用。 |
2 | Event 将调用 Ajax 请求的事件,例如"点击"、"更改"、"模糊"、"按键"等。 |
3 | Execute 应包含在 Ajax 请求中的组件 ID 的空格分隔列表。 |
4 | Immediate 如果为"true",则生成行为事件此行为在"应用请求值"阶段进行广播。否则,事件将在调用应用程序阶段广播。 |
5 | Listener 在 Ajax 请求期间调用的支持 bean 中的方法的 EL 表达式。 |
6 | Onerror 如果在 Ajax 请求期间出现错误,将调用的 JavaScript 回调函数的名称。 |
7 | Onevent 如果在 Ajax 请求期间出现错误,将调用的 JavaScript 回调函数的名称调用来处理 UI 事件。 |
8 | Render 在 Ajax 请求后将更新的组件 ID 的空格分隔列表。 |
示例应用程序
让我们创建一个测试 JSF 应用程序来测试 JSF 中的自定义组件。
步骤 | 描述 |
---|---|
1 | 在 com.tutorialspoint.test 包下创建一个名为 helloworld 的项目,如 JSF - 第一个应用程序 一章中所述。 |
2 | 按照说明修改 UserData.java 文件以下。 |
3 | 按照以下说明修改 home.xhtml。保持其余文件不变。 |
4 | 编译并运行应用程序以确保业务逻辑按要求运行。 |
5 | 最后,以 war 文件的形式构建应用程序并将其部署在 Apache Tomcat Web 服务器中。 |
6 | 按照最后一步中的说明,使用适当的 URL 启动您的 Web 应用程序。 |
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 - 第一个应用程序章节中一样编译并运行应用程序。如果您的应用程序一切正常,这将产生以下结果。
![JSF ajax 结果](/jsf/images/jsf_ajax_result.jpg)
输入姓名并按"显示消息"按钮。您将看到以下结果,无需刷新页面/提交表单。
![JSF ajax 结果1](/jsf/images/jsf_ajax_result1.jpg)