JSF教程(3)——初探JSF中的Ajax

前端之家收集整理的这篇文章主要介绍了JSF教程(3)——初探JSF中的Ajax前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Ajax是提高用户体验的最有效方法之一,同时也是提高系统性能方法之一。提供页面局部刷新所以可以满足上面的两个要求。在JSF当中可以通过两种方式加入Ajax特性。一种是手动写JS代码,另一种是用JSF自带功能(其中封装了Ajax特性而已)。后者是本文要介绍的重点。在一些类似与buttonstext当中可以使用Ajax来实现自己想要的功能,说的再多不如代码来的实在一些。

Xhtml页面代码

<h:body>
    <h:form>
        <h:inputText id="name" value="#{helloBean.name}"></h:inputText>
        <h:inputText id="name2" value="#{helloBean.name2}"></h:inputText>
        <h:commandButton value="Welcome Me">
            <f:ajax execute="name" render="output"/>
        </h:commandButton>

        <h2>The first input value: <h:outputText id="output" value="#{helloBean.name}"/></h2>
        <h2>The second input value: <h:outputText id="output2" value="#{helloBean.name2}"/></h2>
    </h:form>
</h:body>

在上面的代码当中ajax标签被包含在commandButton当中,这就表明在Button中去触发Ajax对应的事件。比较引人注意的两个属性一个是execute另一个是render。官方文档中对于execute的解释如下

A Collection that identifies a list of components to be executed on the server.If a literal is specified,it must be a space-delimited String of componentidentifiers and/or one of the keywords. If a ValueExpression is specified,itmust refer to a property that returns a Collection of String objects. If notspecified,the default value is @this.

很明显在上面的代码中利用ajax提交的是第一个input,用官方的话说就是部分的代码(文档中说是传递了一个包含多个组件id的字符串)在服务端执行了(这里所谓的执行就是执行set方法)相信读者对属性getset方法的认识会在后面有关JSF生命周期中有更深刻的理解。

官方文档中对于render的解释如下

A Collection that identifies a list of components to be rendered on the client.If a literal is specified,the default value is @none.

既然是基于Ajax的那么肯定需要指定在界面上需要重新渲染(render)或者说重新刷新某个(些)组件,(和execute传递的机制是一样的,都是通过一个由空格隔开的一个字符串进行传递的),这里指定的是第一个output元素。

看了上面的例子以及分析相信读者已经对JSFAjax是实现有了初步的了解。笔者的感觉是使用JSF来实现Ajax简直是太容易了,只需要在组件中使用Ajax标签然后指定需要提交(需要在服务器执行)的组件,以及需要重新渲染(刷新)的组件就万事大吉了。相对于之前用手动写的Ajax,开发效率(有兴趣的读者可以看这里)不知道提高了多少。相信这也是未来编程发展的一个趋势,抽象,封装,模块化让开发人员将更多的精力集中在业务逻辑上。只有这样的框架,这样的技术才能被更多的开发人员所接受。所以笔者看好JSF,看好组件化的开发框架;相信爱,相信为人民服务的力量。


本教程项目源码gitHub 地址(所有源码均来自于网络,随着教程的继续源码会持续更新,欢迎交流)。

原文链接:https://www.f2er.com/ajax/165077.html

猜你在找的Ajax相关文章