Code Sample 1: The Mabon Protocol:

mabon:/managedBean.getValidDates

Code Sample 2: String returned after Mabon has evaluated the Mabon Protocol:

/<context-root>/<mabon-servlet-mapping>/managedBean.getValidDates

During an AJAX request, this URL is sent on the request and intercepted by the FacesLifecycleServlet.

Mabon: Initial Request
The Mabon implementation is designed specifically for AJAX requests and implements a communication channel using JSON syntax. This solution lets AJAX components that use managed beans fetch data and communicate with the server without having to go through a full JSF lifecycle. So how does it work? At application start-up Mabon will add the MabonLifecycle as part of the JSF LifecycleFactory context.

On the initial request, Mabon is just delegating through to the underlying JSF implementation and is active only during the Render Response phase, if needed.

In the Figure 3 sequence diagram, a page that contains a custom AJAX component is executed. To work, the AJAX component has to get data from an underlying backing bean. During encodeBegin(), the AJAX Renderer for that component will use the Mabon protocol - mabon:/ - to write out a target URL that references the backing bean. To get this URL, the Renderer will call the getResourceURL() on the ViewHandler. It will pass a string matching the method binding expression for the backing bean (for example, mabon:/managedBean.getSuggestions). The getResourceURL() method in MabonViewHandler will return a full path - /<context-root>/<mabon-servlet-mapping>/managedBean.getSuggestions - that can be written out to the document.

Mabon: Data Fetch Request
After the page has been rendered to the client, it contains a target URL to the backing bean that's needed by the AJAX component to fetch data (for example, /<context-root>/<mabon mapping>/managedBean.getValidDates). In subsequent AJAX requests, this string will be intercepted by the Mabon implementation and used to invoke the backing bean and return the result to the client (Figure 4).

On submit an AJAX-enabled component creates a new XMLHttpRequest object, which communicates asynchronously with the server to get data from the managed bean. This request is intercepted by the FacesLifecycleServlet, which routes the request through the Mabon Lifecycle instead of the default JSF Lifecycle.

When the FacesLifecycleServlet intercepts the request, the request processing starts by calling each Mabon lifecycle phase in sequence. First, you execute the ApplyRequestValuesPhase, which will decode the request and get the managed bean reference and method arguments needed for the managed bean off the request. Second, you execute the InvokeApplicationPhase that will create a MethodBinding based on the managed bean reference, invoke this MethodBinding passing any arguments, and return the result. Third, the Render-ResponsePhase takes the result and writes it back to the client.

Mabon APIs
The following sections cover the available APIs and how to register Mabon with an application.

Mabon Servlet Configuration
If you're planning to use Mabon for your AJAX-enabled components, you should be aware that it adds an extra step for the application developer using your JSF component library. The application developer needs to add the entry shown in Listing 1 to the Web application configuration file web.xml.

The servlet class net.java.dev.mabon.webapp.Faces-LifecycleServlet and the initialization parameter (for example, net.java.dev.mabon) is part of the Mabon contract. The application developer can decide to set the mapping to the same URL-pattern(s) as defined by default (for example, /mabon/*) or override the default URL mapping in case it's colliding with resources used by the Web application. Mabon automatically consumes this URL mapping change without requiring any code changes.

Mabon JavaScript APIs
The Mabon project provides a convenience JavaScript library that you can use to send your request to the server. The Mabon send() function leverages the Dojo toolkit's bind() function to communicate asynchronously with the server. For more information about the Dojo Toolkit visit the Dojo Web site at http://dojotoolkit.org/.

Listing 2 shows the source of the Mabon JavaScript library.

The Mabon send() function takes one argument - a Map. To call the mabon.send() function from your AJAX implementation, you have to construct the Map using JavaScript Map syntax as shown in the following code:

mabon.send(
       { url: targetURL,
       args: [item1, item2],
       callback: callback_function }
       );

The targetURL is the resource URL that's written to the client (for example, /context-root/mabon-servlet-mapping/managedBean.methodName). The targetURL will be intercepted by the FacesLifecycleServlet and deciphered by the Mabon Apply Request Values phase.

Mabon Protocol
Now that you know how to configure Mabon, it's time to look at how you can reference the managed beans needed to fetch data. The Mabon protocol-like syntax is convenient and easy to understand. The syntax starts with mabon:/ followed by the managed bean name and finally the method name, as shown below:

ViewHandler.getResourceURL(context, "mabon:/<managed bean name>.<method>");

The syntax uses a prefix to indicate this is a Mabon-managed request, the managed bean name, and the method needed. This syntax - mabon:/<managed bean><method> - defined by the Mabon contract is used to return a target URL referencing the managed bean.

Summary
This article discussed how you can use AJAX to fetch data and leverage the JSF managed bean facility as a data source. It also covered the different XMLHttpRequest response types - responseText and responseXML - that you can use to return the result from the server. We also showed you how to use the eval() function to parse JSON-syntax responses efficiently.

We covered a new Open Source project called Mabon that extends JSF to provide a custom lifecycle that invokes a managed bean method remotely and then transfers the result to the client using JSON syntax.

In our next article in this series of building Rich Internet Components with JavaServer Faces, we're going to look at how we can bring the knowledge from the three previous articles together and create a <jdj:inputSuggest> component that leverages AJAX, Mabon, and Weblets.

This article is based on, and contains excerpts from, the book Pro JSF and Ajax: Building Rich Internet Components by Jonas Jacobi and John Fallows, to be published by Apress in February 2006.