JSF中的Ajax
来源:互联网 发布:csi网络犯罪调查第二季 编辑:程序博客网 时间:2024/05/16 17:49
Ajax是提高用户体验的最有效方法之一,同时也是提高系统性能的方法之一。提供页面局部刷新所以可以满足上面的两个要求。在JSF当中可以通过两种方式加入Ajax特性。一种是手动写js代码,另一种是用JSF自带的功能(其中封装了Ajax特性而已)。后者是本文要介绍的重点。在一些类似与buttons,text当中可以使用Ajax来实现自己想要的功能,说的再多不如代码来的实在一些。
<h:body> <h:form> <h:inputText id="name" value="#{helloBean.name}"></h:inputText> <h:inputText id="name2" value="#{helloBean.name2}"></h:inputText> <h:commandButton value="Welcome Me"> <f:ajax execute="name" render="output"/> </h:commandButton> <h2>The first input value: <h:outputText id="output" value="#{helloBean.name}"/></h2> <h2>The second input value: <h:outputText id="output2" value="#{helloBean.name2}"/></h2> </h:form> </h:body>在上面的代码当中ajax标签被包含在commandButton当中,这就表明在Button中去触发Ajax对应的事件。比较引人注意的两个属性一个是execute另一个是render。官方文档中对于execute的解释如下
A Collection that identifies a list of components to be executed on the server.If a literal is specified, it must be a space-delimited String of componentidentifiers and/or one of the keywords. If a ValueExpression is specified, itmust refer to a property that returns a Collection of String objects. If notspecified, the default value is @this.
很明显在上面的代码中利用ajax提交的是第一个input,用官方的话说就是部分的代码(文档中说是传递了一个包含多个组件id的字符串)在服务端执行了(这里所谓的执行就是执行set方法,把数据传到后台)相信读者对属性get、set方法的认识会在后面有关JSF生命周期中有更深刻的理解。
官方文档中对于render的解释如下
A Collection that identifies a list of components to be rendered on the client.If a literal is specified, it must be a space-delimited String of componentidentifiers and/or one of the keywords. If a ValueExpression is specified, itmust refer to a property that returns a Collection of String objects. If notspecified, the default value is @none.
既然是基于Ajax的那么肯定需要指定在界面上需要重新渲染(render)或者说重新刷新某个(些)组件,(和execute传递的机制是一样的,都是通过一个由空格隔开的一个字符串进行传递的),这里指定的是第一个output元素。
看了上面的例子以及分析相信读者已经对JSF的Ajax是实现有了初步的了解。笔者的感觉是使用JSF来实现Ajax简直是太容易了,只需要在组件中使用Ajax标签然后指定需要提交(需要在服务器执行)的组件,以及需要重新渲染(刷新)的组件就万事大吉了。相对于之前用手动写的Ajax,开发效率(有兴趣的读者可以看这里)不知道提高了多少。相信这也是未来编程发展的一个趋势,抽象,封装,模块化让开发人员将更多的精力集中在业务逻辑上。只有这样的框架,这样的技术才能被更多的开发人员所接受。所以笔者看好JSF,看好组件化的开发框架;相信爱,相信为人民服务的力量。
示例:
<h:commandButton action="#{testAjax.validateUser}"> <f:ajax render="id1 id2" execute="id3 id4" event="blur" onevent="showFire" /></h:commandButton>
属性名称
属性说明
render
页面上需要刷新的元素的id,如果有多个可以用空格隔开,示例中就是有id1 id2,中间使用空格隔开,前提是我们的元素必须要有一个id属性,比如一个输入框<input type="text" id="id1" value=""/>
execute
需要提交给服务器端的参数的id,如果有多个用空格隔开,比如说更新id1时,需要传入一个输入框id为id3的元素,那么可以用execute="id3",其实还可以使用@符号来操作,有@this表示当前元素;@form表示此元素所在表单(form)下的所有的元素;@none表示不提交任何元素;@all表示提交页面所有JSF的可提交的元素。
event
指ajax事件触发的条件,比如我们上一例子就是使用了event="blur",表示当blur事件发生时触发ajax事件(blur只是举例,可以使用的有action, blur, change, click, dblclick, focus, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, mouseup, select),如果没有指定则使用默认的事件触发,默认的事件是action,action其实不是js中有的事件,是指任何方式触发调用,如点击也能触发action事件。
onevent
指ajax事件相应完成后执行的js函数,比如说我们上面示例代码有onevent="showFire",这个函数带可以带至多一个参数,这个参数是ajax时间触发后返回的结果DOM对象(并不是我们调用java代码中的方法返回的参数),在ajax事件响应完成后即调用showFire这个函数,示例如下代码
<script type="text/javascript">
function showFire() {
alert("回调函数事件已经触发");
}
</script>
<h:form>
<h:outputText id="id1" value="#{ajaxTest.number}"/>
<h:commandButton value="数字增加" action="#{testAjax.count}">
<f:ajax render="number" onevent="showFire"/>
</h:commandButton>
</h:form>
...
Java代码
...
@ManagedBean
@ViewScoped
public class AjaxTest implements Serializable {
private int number;
public void count() {
number++;
}
//getter and setter
...
}
listener
此属性是指ajax事件触发后调用的managedbean的方法,其实作用很明显,比如说我们这里不用按钮之类的标签,只是需要当我们输入某个数据的时候触发一个ajax事件,这个属性就显得很重要了。示例如下:
JSF页面代码
...
<h:head>
<title>JSF2.0 ajax测试</title>
<script type="text/javascript">
var temp = 0;
function showFire() {
alert("响应函数!");
}
</script>
</h:head>
<h:body>
<h:form>
<h:outputText id="id1" value="#{ajaxTest.number}"/>
<h:inputText>
<f:ajax render="id1" event="keyup" onevent="showFire" listener="#{ajaxTest.count}"/>
</h:inputText>
</h:form>
</h:body>
...
Java代码
...
@ManagedBean
@ViewScoped
public class AjaxTest implements Serializable {
private int number;
public void count() {
number++;
}
//getter and setter
...
}
listener属性的代码作用就是调用AjaxTest类中的count方法,使数字加一,我们也可以延伸一下作用,比如说注册信息的时候,输入的用户名检查是否重复,当我们输入的时候就实时检测即可。
来源:http://blog.csdn.net/beijiguangyong/article/details/22699327
- jsf中的ajax技术
- JSF中的Ajax
- JSF教程(3)——初探JSF中的Ajax
- JSF - Ajax
- JSF+Ajax专题
- JSF之AJAX学习
- JSF学习五Ajax
- 关于JSF ajax 提交
- JSF探索--ajax应用
- jsf大将之ajax
- Ajax和JSF
- Ajax优于JSF的原因
- Apusic JSF — 体验Ajax
- asp.net ajax Vs jsf
- Ajax Integration with JSF 2.0
- JSF简单的ajax事件
- JSF中的设计模式
- JSF中的导航处理
- 学习ionic
- java笔记
- 将4G以上文件从iphone传到电脑中的方法
- WOJ1162-Simple Addition
- 1016. 部分A+B (15)
- JSF中的Ajax
- AJAX第四步:AJAX使用jquery一步到位。
- OJ 2530: 小勇玩lol
- Java递归法读取文件目录
- 【Algorithms】拓扑排序的原理及其实现
- 多重背包的二进制优化
- ListView多条目加载
- Java由基础到高级面试题经典问答
- Ubuntu14.04下配置shadowsocks(chrome+SwitchyOmega)