JSF 2.0的一个AJAX例子

最新推荐文章于 2025-06-09 14:29:26 发布

转载最新推荐文章于 2025-06-09 14:29:26 发布 · 1.3k 阅读

文章标签：

#jsf #ajax #import #div #callback #library

jsf ajax 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何使用 JSF2.0 实现一个简单的 AJAX 示例，包括创建 ManagedBean 记录按钮点击次数，改造 echo.xhtml 添加 AJAX 支持，以及通过 CommandButton 的 onclick 和 actionListener 属性实现页面局部更新。演示了 JSF2.0 中的 Ajax 方法及其实现过程。

JSF 2.0的一个AJAX例子

2009-08-20 15:09

首先创建一个ManagedBean用来记录我们提交按钮的数量。示例如下：

Count.java

package   test;

import   java.io.Serializable;
import   javax.faces.bean.ManagedBean;
import   javax.faces.bean.RequestScoped;

@ManagedBean(name   =   "count")
@RequestScoped
public   class   Count   implements   Serializable   {

     private   static   final   long   serialVersionUID   =   6499154494910177344L;
     private   int   count   =   0;

     public   int   getCount()   {
                 return   count;
         }

         public   void   countIt()   {
                 count++;
         }
}

再来改造一下我们的echo.xhtml，如下：

echo.xhtml:
<!DOCTYPE   html   PUBLIC   "-//W3C//DTD   XHTML   1.0   Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html   xmlns="http://www.w3.org/1999/xhtml"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:echo="http://java.sun.com/jsf/composite/echo"
             xmlns:ui="http://java.sun.com/jsf/facelets">
     <h:head>
         <title>测试简单的复合组件</title>
         <meta   http-equiv="keywords"   content="jsf2.0,组件，ajax"   />
         <meta   http-equiv="description"   content="测试简单的复合组件."   />
         <meta   http-equiv="content-type"   content="text/html;   charset=UTF-8"   />
     </h:head>
     <body>
         <div   id="header"   style="padding:100px   0   20px   100px;font-size:22px;font-weight:bold;border-bottom:solid   1px   red">
             这个应声器的作者是：#{echo.encoder.author}。
         </div>
         <div>
         <h:form   id="form"   style="padding:20px   0   20px   100px">
                 <h:outputScript   library="javax.faces"   name="jsf.js"   target="head"/>
             <echo:echoInputText   echo="#{echo}"></echo:echoInputText>
             <div   style="padding-left:50px">
                             <h:commandButton   id="post"   style="padding:3px;width:100px;"   value="提交响应"
                                     onclick="jsf.ajax.request(this,   event,   {execute:'form',   render:   'after'});   return   false;"
                                                 actionListener="#{count.countIt}"/>
             </div>
         </h:form>
         </div>
         <h:panelGroup   id="after">
         <div   style="padding:20px   0   0   100px">
         <div   style="padding:0   0   10px   0">应声器更新次数：#{count.count}</div>
         响应：<h:outputText   id="echo"   value="#{echo.outText}"   escape="false"></h:outputText>
         </div>
         </h:panelGroup>
     </body>
</html>

看看有些什么变化，其中加入了一行
<div   style="padding:0   0   10px   0">应声器更新次数：#{count.count}</div>
用来记录更新次数。<h:outputScript   library="javax.faces"   name="jsf.js"   target="head"/>   这一句用来引入JSF2.0的ajax支持，意思就是将JSF2.0的Ajax支持的javascript引用加到<h:head></h:head>标签之间。
       再有一个变化就是CommandButton：
                             <h:commandButton   id="post"   style="padding:3px;width:100px;"   value="提交响应"
                                     onclick="jsf.ajax.request(this,   event,   {execute:'form',   render:   'after'});   return   false;"
                                                 actionListener="#{count.countIt}"/>
加入了一个onclick动作和一个监听事件。看到重点了，这儿解释一下onclick中的两个重要参数，execute:’form’是表示提交的是当前id为form的表单，render:’after’表示只更新id为after的页面元素。actionListener调用的是Count类中的countIt方法，这是JSF的事件模型，在以前的版本中就存在的，就不多做说明了。
         好了，输入http://localhost:8080/TestJsf2.0/echo.xhtml可以查看一下运行效果，只有after之间的内容改变了吧。在JSF2.0中加入Ajax支持就是这么简单，^_^。具体的说明可参考https://javaserverfaces.dev.java.net/nonav/docs/2.0/jsdocs/symbols/jsf.ajax.html

JSF2.0中的Ajax有四个方法：jsf.ajax.addOnError(callback)，jsf.ajax.addOnEvent(callback)，jsf.ajax.request(source,   event,   options)，jsf.ajax.response(request,   context)。其中request用来请求，并通过options项设置错误回调，事件回调方法以及其他运行表单，更新内容等信息，response是回调方法，一般不需要自己设置，只要回传的方法符合标准，他会自动调用，并更新相应的位置，一个标准的返回数据如下：
<?xml   version="1.0"   encoding="utf-8"?>
<partial-response><changes><update   id="after"><![CDATA[<span   id="after">
         <div   style="padding:20px   0   0   100px">
         <div   style="padding:0   0   10px   0">应声器更新次数：1</div>
         响应：<span   id="echo">ddddd</span>
         </div></span>]]></update><update   id="javax.faces.ViewState"><![CDATA[-8017186116961147735:-2243811565520699646]]></update></changes></partial-response>

这个信息，我是用TCP/IP   monitor截取，其中的中文部分在这个工具中是乱码，我为了看着方便，替换成中文了。

         这个例子是可以正常运行了，不过用的时候是不是有一点不太对劲？计数总是1。^_^，这是一个陷阱。现在我们再修改一下Count.java，修改后如下：

Count.java
package   test;

import   java.io.Serializable;
import   javax.faces.bean.ManagedBean;
import   javax.faces.bean.ViewScoped;

@ManagedBean(name   =   "count")
@ViewScoped
public   class   Count   implements   Serializable   {

     private   static   final   long   serialVersionUID   =   6499154494910177344L;
     private   int   count   =   0;

     public   int   getCount()   {
                 return   count;
         }

         public   void   countIt()   {
                 count++;
         }
}

         与前面唯一的差别就是将@RequestScoped修改为了@ViewScoped。再看看计数正常了吧，^_^，留一点悬念给大家，从这个例子可以体会一下新加入的ViewScoped作用域的用法。如果技术值还一直是1，那肯定是你没有重新部署，redeploy一下，Ok！