同样重要的，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。
你可以在"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请求
