JSF2中轻松使用ajax
来源:互联网 发布:02年世界杯中国队数据 编辑:程序博客网 时间:2024/05/17 06:04
JSF2中轻松使用ajax
http://blog.csdn.net/thinkhlin_down/archive/2010/04/15/5488370.aspx1:使用JSF2提供的ajax的理由
js兼容性:写过web应用的朋友都知道,js在各个浏览器中的不兼容是出了名的,在IE上运行好好的放到firefox下可能没法正常运行,或者相反的情况在firefox下正常运行的代码在IE上无法运行,甚至在IE6下能正常运行的代码在IE8里面不能正常运行,但是JSF2.0中将所有的不一致都隐藏起来了,开发者或者使用者无需关心这些恼人的问题。
ajax框架的选择:当前有许多流行的ajax框架,如jquery,json,dwr等等,但是这些都必须额外添加支持库而且有些必须进行繁杂的配置,对于注重应用的开发人员来说很不利(别说用那些很多配置的显示你很高手,那都是自我安慰的一种方式,谁不喜欢简单的事情!难不成你用这些理由跟你们老板理论去,那你就等着卷铺盖走人吧!),而JSF2是内置了ajax功能,能满足我们绝大部分的需求,所以可以大大的简化和加速我们项目的进度。
2:最简单的ajax功能
如今流行的ajax框架非常多,比如jquery,dwr等之类的,但是这些ajax框架(或类似脚本库)都是单独提供的,而且使用起来还是相对麻烦,而JSF2提供的ajax功能实现非常简单,甚至一句js代码都不用写就可以完成页面的无刷新功能。
以下是一个非常简单的一个使用JSF2标签并带有ajax功能的代码
<h:commandButton action="#{testAjax.validateUser}">
<f:ajax render="id1">
</h:commandButton>
我们在上面的例子中并没有看到任何的js代码,其实JSF2标签帮我们封装好了所有的操作,在生成页面的时候会进行相应的处理,具体的属性介绍我们下面的内容会详细讲解。
3:以上的例子只是一个非常简单的功能,能完成一些基本的ajax功能,我们现在编写一个相对完全一点的示例:
<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方法,使数字加一,我们也可以延伸一下作用,比如说注册信息的时候,输入的用户名检查是否重复,当我们输入的时候就实时检测即可。
注:此回调函数showFire会被执行三次,但是通过监控软件ajax事件触发后只提交了一次数据请求,所以具体的问题出现在客户端,由于资料相对较少暂时不做解释。
- JSF2中轻松使用ajax
- 在JAVA中轻松使用AJAX
- 在JAVA中轻松使用AJAX
- 在JSF2中使用Richfaces 4
- AJAX/JSF2/基于JSF2的框架
- JSF2复合组件外部使用Ajax组件(f:ajax、p:ajax等)
- JSF2复合组件外部使用Ajax组件(f:ajax、p:ajax等)
- 使用jQuery轻松实现Ajax
- JSF2 Tutorial使用心得
- JSF2 ManagedBean使用注意事项
- JSF2.0 中 实现上传下载
- JSF2 EL表达式使用感受
- JSF2.0实战 - 2、AJAX体验
- 在EasyJWeb中轻松开发Ajax运用
- 在EasyJWeb中轻松开发Ajax运用
- 在EasyJWeb中轻松开发Ajax运用
- 在EasyJWeb中轻松开发Ajax运用
- 在EasyJWeb中轻松开发Ajax运用
- iOS网络笔记--AFNetWorking发送get和post请求
- 摄像头v4l2采集中的mmap
- poj 1010 STAMPS 枚举组合
- kernel module signing
- Git tag
- JSF2中轻松使用ajax
- 解决ObjectInputStream的readObject()方法的EOF异常
- NuGet学习笔记(2)——使用图形化界面打包自己的类库
- UIToolbar(工具栏)
- [心情]回顾&一个新的开始
- 截图 iOS
- canvas延伸-WebGL(three.js)
- C++ 多态 指针转换
- Android多窗口分屏(原生方法)