您的位置：首页 > Web前端 > JavaScript

JSF2.0实战 - 2、AJAX体验

2014-04-28 17:05 417 查看

接上篇，修改页面代码：

<!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,event,'action','@form','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接口但没有实现具体功能，我们只有自己扩展处理，先放着，后面开发组件时再讲。

下载示例代码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航