JSF2.0实战 - 2、AJAX体验

前端之家收集整理的这篇文章主要介绍了JSF2.0实战 - 2、AJAX体验前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

接上篇,修改页面代码

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<Meta charset="utf-8" />
<title>Hello World</title>
</h:head>
<body>
	<h:form>
		<h:inputText id="text" binding="#{hello.text}" />
		<h:commandButton value="确定" actionListener="#{hello.action}" >
			<f:ajax execute="@form" render="text" />
		</h:commandButton>
	</h:form>
</body>
</html>

修改部分:

<h:head></h:head>

id="text"

<f:ajax execute="@form" render="text" />

后台java类不变。运行结果,点击按钮文本框显示文字,但页面无刷新。通知调试可以看到是采用ajax更新方式

查看html源代码,可看出不同

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2">
<Meta charset="utf-8" />
<title>Hello World</title><script type="text/javascript" src="/HelloWorld/javax.faces.resource/jsf.js.faces?ln=javax.faces"></script></head>
<body>
<form id="j_idt3" name="j_idt3" method="post" action="/HelloWorld/hello.faces" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt3" value="j_idt3" />
<input id="j_idt3:text" type="text" name="j_idt3:text" /><input id="j_idt3:j_idt7" type="submit" name="j_idt3:j_idt7" value="确定" onclick="mojarra.ab(this,event,'action','@form','j_idt3:text');return false" /><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-3926493960908157703:2397438566985912183" autocomplete="off" />
</form>
</body>
</html>

新增部分:

<script type="text/javascript" src="/HelloWorld/javax.faces.resource/jsf.js.faces?ln=javax.faces"></script>

onclick="mojarra.ab(this,'j_idt3:text');return false"


JSF2.0实现了Ajax特性。使用方式是在actionListener组件中加入<f:ajax execute="@form" render="text" />,这里@form是表示提交form内的所有组件信息,render="text"是表示刷新id="text"的组件。JSF2.0的Ajax更新方式目前只实现了局部的update,即用响应结果更新指定的组件HTML代码,在这里请求响应后会从DOM节点中删除<input id="j_idt3:text">的元素,然后用响应结果片段构造一个新的放入原位置。

这里重点要关注的几点:

1、<head>换成了<h:head>。必须要这样做,才会自动引入ajax所需的jsf.js文件

2、加入id="text",因为我们只刷新局部组件,所以必须为组件命名。如果不指定render对象,会刷新整个页面

这里展示了JSF2.0的一个重要特性:组件可以根据自身需要加载所需的资源文件,即js和css文件。我们不必事先了解组件所需的资源文件然后写在页面上,组件自已知道。页面上有这个组件时,它会自动引入所需的资源,没有这个组件时,就不引入相关的资源。

另一个重要特征是JSF2.0可以从jar中读取js和css资源文件可以看到项目中并不存在jsf.js文件,这个文件存在于javax.faces-2.2.5.jar文件中,JSF2.0在运行时根据需要提取文件,供组件使用。

以上两点特性决定了采用JSF2.0可以打造完全的可复用组件。以往我们只能实现组件后台java类的可复用,前端页面总是要事先引入css和js,有了这两个新特性,我们可以把java类和资源文件绑定在一起做成组件,并打包成jar文件,实现完全的可复用,实际应用时不再关心哪个组件要关联哪些资源文件,也不再需要在各个项目中粘贴复制css和js文件

不够好的是JSF2.0的Ajax还不完善,目前仅实现了替换dom节点方式更新页面功能,这只够替换简单的html元素。实际应用中,常见的需求是通过调用javascript的eval方式执行响应结果来更新前端页面。JSF2.0留了eval接口但没有实现具体功能,我们只有自己扩展处理,先放着,后面开发组件时再讲。

下载示例代码

猜你在找的Ajax相关文章