[Java EE 7] JSF 中的 Ajax
程序员文章站
2022-04-25 11:17:37
...
JSF 支持页面的 Ajax 处理。可以支持局部页面处理和局部页面展示。
JSF 中的 Ajax 通过下面两个途径:
先看看使用 JavaScript 如何实现。 jsf.js 是在 javax.faces 库中的预定义资源。这个 JS 包含了 JSF 页面支持 Ajax 的 API。在页面中引用需要用到 outputScript 标签:
现在,可以向服务器发起一个异步请求了:
在这段代码中:
两个文本输入框用于输入用户名和密码。一个文本输出控件用于展示用户登录状态。
form 中的 prependId 属性设置为 false,用于确保表单中的元素 id 以当前的形式保存。否则,会在元素 id 前面加上 form 的 id。
按钮的 actionListener 属性用于设置点击按钮的时候,后台 bean 调用的方法。现在取代传统的刷新页面展示,jsf.ajax.request 发送了一个异步请求到服务器,这个请求在按钮的 onclick 事件中产生。execute 和 render 属性值是用空格分隔的组件 id。execute 中的组件是输入组件,将会将组件中的值绑定到后台 bean。render 中的组件是展示组件,用于设置收到异步响应后需要刷新的组件。
下表列出了 render 属性可以设置哪些值:
execute 属性的值和 render 属性的值类似,不过默认值换成了 @this。
编写一个 User bean,包含 set、get 方法和简单的业务逻辑:
注意 login 方法,它必须使用 javax.faces.event.ActionEvent 作为它的唯一参数。
声明是 Ajax 可以使用 f:ajax。这个标记可以作用于一个组件,也可以作用于多个组件。
上面的代码可以改写为:
在这段代码中,使用了 f:ajax 中的 execute 属性指定输入参数,render 属性指定显示参数。默认情况下,如果 f:ajax 用在一个组件上,并且没有指定 event 事件,那么异步请求将会基于它的父组件的默认事件(在这个例子中,父组件是提交按钮)。
可以在 f:ajax 上设置 delay 属性,属性值是毫秒数,用于设置延迟提交的时间。如果在延迟时间到期前有多个请求,那么只会提交最近的那个请求,其它的请求将会被丢弃。
这段代码设置了延迟时间为 200 毫秒,默认是 300 毫秒,但是你可以设置值为 none 来关闭这个功能。
f:ajax 标签中可以包含多个组件:
<f:ajax listener="#{user.checkFormat}">
<h:inputText value="#{user.name}" id="name"/>
<h:inputText value="#{user.password}" id="password"/>
</f:ajax>
在这段代码中,f:ajax 有一个 listener 属性用于指定相关的方法:
这个 listener 中的方法将会是所有子组件的默认方法(在这个例子中是 h:inputText 的 valueChange 事件的默认方法),如果你要改变子组件的默认方法,可以在子组件中使用 a:ajax 标签。
文章来源:http://www.aptusource.org/2014/04/java-ee-7-jsf-ajax/
JSF 中的 Ajax 通过下面两个途径:
- 通过 JavaScript 编码实现
- 通过 f:ajax 以声明方式实现
先看看使用 JavaScript 如何实现。 jsf.js 是在 javax.faces 库中的预定义资源。这个 JS 包含了 JSF 页面支持 Ajax 的 API。在页面中引用需要用到 outputScript 标签:
<h:body> <!-- . . . --> <h:outputScript name="jsf.js" library="javax.faces" target="body"/> <!-- . . . --> </h:body>
现在,可以向服务器发起一个异步请求了:
<h:form prependId="false"> <h:inputText value="#{user.name}" id="name"/> <h:inputText value="#{user.password}" id="password"/> <h:commandButton value="Login" type="button" actionListener="#{user.login}" onclick="jsf.ajax.request(this, event, {execute: 'name password', render: 'status'}); return false;"/> <h:outputText value="#{user.status}" id="status"/> </h:form>
在这段代码中:
两个文本输入框用于输入用户名和密码。一个文本输出控件用于展示用户登录状态。
form 中的 prependId 属性设置为 false,用于确保表单中的元素 id 以当前的形式保存。否则,会在元素 id 前面加上 form 的 id。
按钮的 actionListener 属性用于设置点击按钮的时候,后台 bean 调用的方法。现在取代传统的刷新页面展示,jsf.ajax.request 发送了一个异步请求到服务器,这个请求在按钮的 onclick 事件中产生。execute 和 render 属性值是用空格分隔的组件 id。execute 中的组件是输入组件,将会将组件中的值绑定到后台 bean。render 中的组件是展示组件,用于设置收到异步响应后需要刷新的组件。
下表列出了 render 属性可以设置哪些值:
值 | 描述 |
@all | 页面上的所有组件 |
@none | 无组件,这是默认值 |
@this | 触发请求的组件 |
@form | form 表单中的所有组件 |
ID 列表 | 组件 ID 的列表 |
EL 表达式 | 返回一组 String 列表的 EL 表达式 |
execute 属性的值和 render 属性的值类似,不过默认值换成了 @this。
编写一个 User bean,包含 set、get 方法和简单的业务逻辑:
@Named @SessionScoped public class User implements Serializable { private String name; private String password; private String status; public void login(ActionEvent evt) { if (name.equals(password)) status = "Login successful"; else status = "Login failed"; } }
注意 login 方法,它必须使用 javax.faces.event.ActionEvent 作为它的唯一参数。
声明是 Ajax 可以使用 f:ajax。这个标记可以作用于一个组件,也可以作用于多个组件。
上面的代码可以改写为:
<h:form prependId="false"> <h:inputText value="#{user.name}" id="name"/> <h:inputText value="#{user.password}" id="password"/> <h:commandButton value="Login" type="button" actionListener="#{user.login}"> <f:ajax execute="name password" render="status"/> </h:commandButton> <h:outputText value="#{user.status}" id="status"/> </h:form>
在这段代码中,使用了 f:ajax 中的 execute 属性指定输入参数,render 属性指定显示参数。默认情况下,如果 f:ajax 用在一个组件上,并且没有指定 event 事件,那么异步请求将会基于它的父组件的默认事件(在这个例子中,父组件是提交按钮)。
可以在 f:ajax 上设置 delay 属性,属性值是毫秒数,用于设置延迟提交的时间。如果在延迟时间到期前有多个请求,那么只会提交最近的那个请求,其它的请求将会被丢弃。
<f:ajax delay="200" ...> . . . </f:ajax>
这段代码设置了延迟时间为 200 毫秒,默认是 300 毫秒,但是你可以设置值为 none 来关闭这个功能。
f:ajax 标签中可以包含多个组件:
<f:ajax listener="#{user.checkFormat}">
<h:inputText value="#{user.name}" id="name"/>
<h:inputText value="#{user.password}" id="password"/>
</f:ajax>
在这段代码中,f:ajax 有一个 listener 属性用于指定相关的方法:
public void checkFormat(AjaxBehaviorEvent evt) { //. . . }
这个 listener 中的方法将会是所有子组件的默认方法(在这个例子中是 h:inputText 的 valueChange 事件的默认方法),如果你要改变子组件的默认方法,可以在子组件中使用 a:ajax 标签。
文章来源:http://www.aptusource.org/2014/04/java-ee-7-jsf-ajax/
上一篇: CSS选择器(Html基础)6
下一篇: 边框+内外间距设置(Html基础)9
推荐阅读
-
Java日期时间API系列5-----Jdk7及以前的日期时间类TimeUnit在并发编程中的应用
-
第88节:Java中的Ajax和ASP.NET和TCP/IP 教程和JSON
-
IIS7中Ajax.AjaxMethod无效的原因及解决方法
-
使用ajax请求提交数据时,日期类型无法转换为JAVA中的日期类型
-
[转]Java7中的ForkJoin并发框架初探(上)——需求背景和设计原理
-
[转]Java7中的ForkJoin并发框架初探(下)—— ForkJoin的应用
-
[转]Java7中的ForkJoin并发框架初探(中)——JDK中实现简要分析
-
java8中的getTimeZone表现与java7中不同
-
java8中的getTimeZone表现与java7中不同
-
Java7和Java8中的ConcurrentHashMap原理解析