《Java EE 7精粹》—— 3.5 Ajax-阿里云开发者社区

开发者社区> 开发与运维> 正文

《Java EE 7精粹》—— 3.5 Ajax

简介: JSF原生支持添加Ajax功能到网页。JSF允许局部视图的处理,其中只有视图中的一些组件用于处理该响应。JSF可以摘选页面上的某些组件,渲染局部页面,而不是整个页面。

本节书摘来异步社区《Java EE 7精粹》一书中的第3章,第3.5节,作者:【美】Arun Gupta,更多章节内容可以访问云栖社区“异步社区”公众号查看。

3.5 Ajax

JSF原生支持添加Ajax功能到网页。JSF允许局部视图的处理,其中只有视图中的一些组件用于处理该响应。JSF可以摘选页面上的某些组件,渲染局部页面,而不是整个页面。

有以下两种方法可以启用这种支持。

  • 以编程方式使用JavaScript资源。
  • 以声明的方式使用f:ajax组件。

编程方式的Ajax集成是通过资源处理机制启用的。jsf.js是在javax.faces库中预定义的资源。该资源包含用于Ajax和JSF页面交互的JavaScript API。可以在页面中使用outputScript标签来启用:

316b96325b700b8a8f1129c4cac8141a6a755fd5

也可以向服务器发起异步请求:

a9baea6634570c79f03c2ff97dc0d69b93561f41

在这段代码中:

  • 前两个输入文本字段接受用户名和密码,第三个输出字段显示状态(用户是否已登录)。
  • 表单的prependId属性设置为false,以确保表单内的每个元素定义的id命名会被保留下来。否则,JSF会将表单的id加到其子元素id的前面。
  • 命令按钮组件的actionListener属性用于指定backing bean中的方法,该方法在按钮被点击时调用。通常的响应会渲染和展示另外一个页面,而异步请求在同一个页面完成。jsf.ajax.request发送异步请求到服务器,这个请求由命令按钮的onclick事件产生。请求参数execute和render提供了使用空格分隔的组件标识符。execute定义的是输入组件列表,其对应Bean的setter方法被调用,render定义的是在异步响应被接收后需要渲染的组件列表。

只处理视图的一部分组件(本例中是指name和password组件)的能力被称为局部视图处理。类似地,只渲染输出页面中一部分组件(本例中是status组件)被称为局部输出渲染。

表3-3列出了渲染(render)属性的取值。

af8811456ae6459c0752a261e173253ff6afda6e

执行(execute)属性采用了类似的取值,但该属性的默认值是@this。

User bean包含字段、setter/ getter方法和一个简单的业务方法:

175b13196946b5dde117027d757ab97678b2144c

注意login方法的签名。它必须返回void,并使用javax.faces.event.ActionEvent作为唯一的参数。

通过启用f:ajax来声明Ajax集成。该标签可以嵌套在一个组件内(为单个组件启用Ajax),或者使用该组件“包装”多个组件(为多个组件启用Ajax)。

上面的代码可以被更新为如下风格的Ajax:

1640b0fa20fa2d9dfccb18e073707ab14cc8e2df

在这段代码中,我们使用f:ajax的execute属性来指定输入组件的列表,使用render属性指定被渲染的输出组件。默认情况下,如果f:ajax嵌套在一个组件内,并且没有指定事件,异步请求的触发将基于父组件的默认事件(本例中,是指命令按钮的单击事件)。

可以在f:ajax中指定延迟(delay)属性。该属性值以毫秒为单位。如果在延迟时间内有多个请求发出,那么只有最近的请求被发送,其他的请求被丢弃。

52dcf007b61d6ca0c232c22d05e47df0509a2e1c

这段代码设置的延迟为200毫秒。默认值是300毫秒,但你也可以指定属性值为none来禁用此机制。

f:ajax标签可以包装多个组件:

5be826c65f6057497815882752fb64980d5f76a2

在这段代码中,f:ajax的listener属性对应的Java方法如下:

c0b238bf2eb01868bdc5199291bd4344eab95c98

这个listener方法被子组件的默认事件调用(本例中,是指h:inputText组件的值改变事件)。可以在子组件的内嵌f:ajax中指定额外的Ajax功能。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章