3.5 Ajax
JSF原生支持添加Ajax功能到网页。JSF允许局部视图的处理,其中只有视图中的一些组件用于处理该响应。JSF可以摘选页面上的某些组件,渲染局部页面,而不是整个页面。
有以下两种方法可以启用这种支持。
- 以编程方式使用JavaScript资源。
- 以声明的方式使用f:ajax组件。
编程方式的Ajax集成是通过资源处理机制启用的。jsf.js是在javax.faces库中预定义的资源。该资源包含用于Ajax和JSF页面交互的JavaScript API。可以在页面中使用outputScript标签来启用:
也可以向服务器发起异步请求:
在这段代码中:
- 前两个输入文本字段接受用户名和密码,第三个输出字段显示状态(用户是否已登录)。
- 表单的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)属性的取值。
执行(execute)属性采用了类似的取值,但该属性的默认值是@this。
User bean包含字段、setter/ getter方法和一个简单的业务方法:
注意login方法的签名。它必须返回void,并使用javax.faces.event.ActionEvent作为唯一的参数。
通过启用f:ajax来声明Ajax集成。该标签可以嵌套在一个组件内(为单个组件启用Ajax),或者使用该组件“包装”多个组件(为多个组件启用Ajax)。
上面的代码可以被更新为如下风格的Ajax:
在这段代码中,我们使用f:ajax的execute属性来指定输入组件的列表,使用render属性指定被渲染的输出组件。默认情况下,如果f:ajax嵌套在一个组件内,并且没有指定事件,异步请求的触发将基于父组件的默认事件(本例中,是指命令按钮的单击事件)。
可以在f:ajax中指定延迟(delay)属性。该属性值以毫秒为单位。如果在延迟时间内有多个请求发出,那么只有最近的请求被发送,其他的请求被丢弃。
这段代码设置的延迟为200毫秒。默认值是300毫秒,但你也可以指定属性值为none来禁用此机制。
f:ajax标签可以包装多个组件:
在这段代码中,f:ajax的listener属性对应的Java方法如下:
这个listener方法被子组件的默认事件调用(本例中,是指h:inputText组件的值改变事件)。可以在子组件的内嵌f:ajax中指定额外的Ajax功能。