JSF 2.0简介：初识Ajax，一个简单的例子（系列之五）

feidaodalian

浏览: 179528 次
性别:
来自: 北京

最近访客更多访客>>

WarmAir2009

woodding2008

shaolongyuan

coolwindow

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax JSF JavaScript Bean XHTML

从本期介绍开始，我们来看看JSF 2.0对Ajax的支持，一贯的，我们还是采用最实际的方式，例子来做说明。
        我们回到系列三中实现的例子，从这个例子开始，加入一点Ajax功能。
        首先创建一个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！

        例子是不是很简单，那所有的javascript代码去了哪儿？如果你愿意，可以将最终生成的代码保存一下，查看一下javascript代码。所有的过程都已经有实现专家组给我们封装起来了，容易出错的javascript调用的事情交给专家们去做吧，我们只来关注业务实现。

分享到：

JSF 2.0简介：Ajax对页面的增加与删除操作 ... | JSF2.0简介：页面模版化（系列之四）

2009-08-06 03:00
浏览 4634
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论