AJAX设计策略（六）

同样重要的，JavaServer Faces UI组件被设计为易于引入到集成开发环境（IDE）的，例如Sun Java Studio Creator IDE.这使开发者可以通过拖放可视控件来将AJAX置入web应用。

值得注意的，JavaServer Faces组件模型是可扩展的所以组件开发者可以创建定制的控件。这也意味着组件开发者可以创建带有AJAX功能的JavaServer Faces组件或者将AJAX功能加入已存在的组件。就如本文前面提到的，AJAX JavaServer Faces组件库（library of AJAX-enabled custom JavaServer Faces components）已经是JAVA 设计方案手册（Java Blueprints Solutions Catalog）的一部分。

创建和使用包含AJAX功能的组件不会减少AJAX代码的数量。组件开发者同样需要提供JavaScript，CSS和DOM代码以实现AJAX功能，但是对页面作者来说可以遮蔽代码的细节。

你可以在设计手册上查到所有的AJAX的 JavaServer Faces组件。让我们来看其中的一个：一个使用监听方式的JavaServer Faces组件。这个定制组件包含与bookstore 2程序中相似的功能。当用户鼠标移动到组件上方，将触发一个弹出气球的函数见图3。

图3：使用状态监听器的JSF定制组件

你可以在"Using PhaseListener Approach for Java Server Faces Technology with AJAX"中找到这个组件的详细描述。状态监听器是一个接口JavaServer Faces请求处理的每一阶段都会收到通知。使用状态监听器只是处理JavaServer Faces请求的多种方式之一。例如，你可以使用servlet。请在设计手册上察看这些和其他的方法。

为在JSP页面使用定制组件，页面作者需要引用定制组件的tag库和标准JavaServer Faces库，并为页面里的组件指定标记。

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<%@ taglib prefix="ui" uri="http://java.sun.com/blueprints/ui" %>

...

<f:view>

    <ui:compB id="pop1" url="faces/bpui_compb_action/CompBBean/processMethod?itemId="/>

</f:view>

<ui:compB>是包含弹出气球功能的定制组件的标记。url参数包含服务端处理请求所需的信息。

JSP页面同样包含将鼠标穿越事件映射到JavaScript函数的代码。

<a href="#" onmouseover="bpui.compB.showPopup('pop1', event, 'test1A')"

 onmouseout="bpui.compB.hidePopup('pop1')" style="cursor: pointer">

 <b>Mouse over link to see popup (test1A)</b></a><br/>

   <small><i>(With a JSF Managed Bean fulfilling the AJAX Request)</i></small><br/><br/>

这基本上是页面作者需要的关于弹出气球的所有代码。

尽管如此，组件开发者仍需要提供鼠标穿越事件触发的JavaScript函数。跟往常一样，函数创建和配置XMLHttpRequest对象并用它提交异步请求。

bpui.compB.showPopupInternal=function(popupx, itemId) {

    // initialize the AJAX request

    bpui.compB.req=bpui.compB.initRequest();

    // retrieve the correct popup object that is being shown

    popObject=bpui.compB[popupx];

    // concatenate the itemId value to the URI

    url=popObject.urlx + escape(itemId);

    // set the correct popup's callback function

    bpui.compB.req.onreadystatechange = popObject.ajaxReturnFunction;

    bpui.compB.req.open("GET", url, true);

    // send the request

    bpui.compB.req.send(null);

}

组件开发者必须为回调函数提供代码以更新页面的DOM表现。

this.ajaxReturnFunction=function() {

    // make sure response is ready

    if (bpui.compB.req.readyState == 4) {

        // make sure it is a valid response

        if (bpui.compB.req.status == 200) {

            // populate the popup with the info from the response

            var resultx=bpui.compB.req.responseXML.getElementsByTagName("response")[0];

            document.getElementById(componentId + "_title").innerHTML=

              resultx.getElementsByTagName("title")[0].childNodes[0].nodeValue;

            document.getElementById(componentId + "_message").innerHTML=

              resultx.getElementsByTagName("message")[0].childNodes[0].nodeValue;;

            // show popup with the newly populated information

            document.getElementById(componentId).style.visibility='visible';

        } else if (bpui.compB.req.status == 204){

            // error, just show alert

            alert("204 returned from AJAX call");

        }

}

}此种途径与do-it-yourself途径的不同是它封装在服务端的定制控件里。定制组件呈现组件标记，如同<script>标记一样。标签指明了组件的JavaScript文件。当页面呈现定制组件的时候，会创建一个对定制标签指定的URL的调用。URL的第一部分，faces，被映射到一个FacesServlet servlet。注意，JavaServer Faces框架实现模型－视图－控制器（MVC）设计模式。FacesServlet是框架里的控制器。FacesServlet的映射由web应用的配置描述web.xml执行。

在JavaServer Faces请求处理生命周期期间，框架调用定制组件的状态监听器，它在组件的faces-config.xml配置描述里被注册。装填监听器检查URL，看是否请求与定制组件相关联。如果相关，状态监听器执行基于URL内容的请求。

如图4所示，页面呈现之后，用户发动一个鼠标越过事件，处理事件的JavaScript函数创建并配置一个XMLHttpRequest对象（1）并用它提交异步请求。多种服务器组件参与出了请求，包括FacesServlet和状态监听器（2），还要受管理的bean（3），它其中的方法创建一个XML响应。然后回调函数基于返回的XML更新DOM（4），生成并显示弹出气球（5）。

 

图4：使用状态监听器处理AJAX请求