JSF页面中的JS取得受管bean的数据（受管bean发送数据到页面）

　　JSF中引入jsf.js文件之后，可以拦截jsf.ajax.request请求。一直希望有一种方法可以像jquery的ajax一样，能在js中异步取得服务器端发送的数据。无奈标准JSF并没有提供这样的方法。在一些JSF框架里面提供了这样的方法，比如primefaces的onComplete方法就是返回数据到一个js方法中的。JSF能在bean里面更新视图（非ajax更新），其中的PartialViewContext类就可以做到局部更新UI，在bean里获取到这个UI就可以了。于是在网上翻看了很多开源的JSF框架，无意中发现omnifaces这个开源框架。官网:http://omnifaces.org/。

　　当然，一个框架的东西会有很多，以个人之力要全部参透会有一些难度。开源框架更是集思广益，不过我所需要的只是其中的一部分而已，即在js中取得bean返回的数据。

　　根据omnifaces的showcase http://showcase.omnifaces.org/ 看到其中的一个Ajax工具类根据PartialViewContext类做到了js取得返回数据，不论字符串或者对象数据都可以发送，非常方便。于是根据提供的源码，顺藤摸瓜，copy了必须支持的类，整理出来了一个仅Ajax发送数据的jar。

　　omnifaces做的步骤大概是先重写了PartialViewContextFactory这个类，然后在配置文件中配置该重写的类。

　　

 /**
  * This partial view context factory takes care that the {@link OmniPartialViewContext} is properly initialized.
  *
  */
 public class CustomPartialViewContextFactory extends PartialViewContextFactory {

     // Variables ------------------------------------------------------------------------------------------------------

     private PartialViewContextFactory wrapped;

     // Constructors ---------------------------------------------------------------------------------------------------

     /**
      * Construct a new OmniFaces partial view context factory around the given wrapped factory.
      * @param wrapped The wrapped factory.
      */
     public CustomPartialViewContextFactory(PartialViewContextFactory wrapped) {
         this.wrapped = wrapped;
     }

     // Actions --------------------------------------------------------------------------------------------------------

     /**
      * Returns a new instance of {@link OmniPartialViewContext} which wraps the original partial view context.
      */
     @Override
     public PartialViewContext getPartialViewContext(FacesContext context) {
         return new CustomPartialViewContext(wrapped.getPartialViewContext(context));
     }

     /**
      * Returns the wrapped factory.
      */
     @Override
     public PartialViewContextFactory getWrapped() {
         return wrapped;
     }

 }

该类重写还需要一个PartialViewContext ，此处没有直接继承PartialViewContext ，而是继承了PartialViewContext 的子类PartialViewContextWrapper，并重写了里面的方法：

 /**
  * <p>
  * This OmniFaces partial view context extends and improves the standard partial view context as follows:
  * <ul>
  * <li>Support for executing callback scripts by {@link PartialResponseWriter#startEval()}.</li>
  * <li>Support for adding arguments to an ajax response.</li>
  * <li>Any XML tags which Mojarra and MyFaces has left open after an exception in rendering of an already committed
  * ajax response, will now be properly closed. This prevents errors about malformed XML.</li>
  * <li>Fixes the no-feedback problem when a {@link ViewExpiredException} occurs during an ajax request on a page which
  * is restricted by <code>web.xml</code> <code>&lt;security-constraint&gt;</code>. The enduser will now properly be
  * redirected to the login page instead of retrieving an ajax response with only a changed view state (and effectively
  * thus no visual feedback at all).</li>
  * </ul>
  * You can use the {@link Ajax} utility class to easily add callback scripts and arguments.
  * <p>
  * This partial view context is already registered by OmniFaces' own <code>faces-config.xml</code> and thus gets
  * auto-initialized when the OmniFaces JAR is bundled in a web application, so end-users do not need to register this
  * partial view context explicitly themselves.
  *
  * @author Bauke Scholtz
  * @since 1.2
  * @see OmniPartialViewContextFactory
  */
 public class CustomPartialViewContext extends PartialViewContextWrapper {

     // Constants ------------------------------------------------------------------------------------------------------

     private static final String AJAX_DATA = "var Faces=Faces||{};Faces.Ajax={data:%s};";
     private static final String ERROR_NO_OMNI_PVC = "There is no current CustomPartialViewContext instance.";

     // Variables ------------------------------------------------------------------------------------------------------

     private PartialViewContext wrapped;
     private Map<String, Object> arguments;
     private List<String> callbackScripts;
     private CustomPartialResponseWriter writer;

     // Constructors ---------------------------------------------------------------------------------------------------

     /**
      * Construct a new OmniFaces partial view context around the given wrapped partial view context.
      * @param wrapped The wrapped partial view context.
      */
     public CustomPartialViewContext(PartialViewContext wrapped) {
         this.wrapped = wrapped;
         setCurrentInstance(this);
     }

     // Actions --------------------------------------------------------------------------------------------------------

     @Override
     public PartialResponseWriter getPartialResponseWriter() {
         if (writer == null) {
             writer = new CustomPartialResponseWriter(this, super.getPartialResponseWriter());
         }

         return writer;
     }

     @Override // Necessary because this is missing in PartialViewContextWrapper (will be fixed in JSF 2.2).
     public void setPartialRequest(boolean partialRequest) {
         getWrapped().setPartialRequest(partialRequest);
     }

     @Override
     public PartialViewContext getWrapped() {
         return wrapped;
     }

     /**
      * Add an argument to the partial response. This is as JSON object available by <code>OmniFaces.Ajax.data</code>.
      * For supported argument value types, read {@link Json#encode(Object)}. If a given argument type is not supported,
      * then an {@link IllegalArgumentException} will be thrown during end of render response.
      * @param name The argument name.
      * @param value The argument value.
      */
     public void addArgument(String name, Object value) {
         if (arguments == null) {
             arguments = new HashMap<>();
         }

         arguments.put(name, value);
     }

     /**
      * Add a callback script to the partial response. This script will be executed once the partial response is
      * successfully retrieved at the client side.
      * @param callbackScript The callback script to be added to the partial response.
      */
     public void addCallbackScript(String callbackScript) {
         if (callbackScripts == null) {
             callbackScripts = new ArrayList<>();
         }

         callbackScripts.add(callbackScript);
     }

     /**
      * Reset the partial response. This clears any JavaScript arguments and callbacks set any data written to the
      * {@link PartialResponseWriter}.
      * @see FullAjaxExceptionHandler
      */
     public void resetPartialResponse() {
         if (writer != null) {
             writer.reset();
         }

         arguments = null;
         callbackScripts = null;
     }

     /**
      * Close the partial response. If the writer is still in update phase, then end the update and the document. This
      * fixes the Mojarra problem of incomplete ajax responses caused by exceptions during ajax render response.
      * @see FullAjaxExceptionHandler
      */
     public void closePartialResponse() {
         if (writer != null && writer.updating) {
             try {
                 writer.endUpdate();
                 writer.endDocument();
             }
             catch (IOException e) {
                 throw new FacesException(e);
             }
         }
     }

     // Static ---------------------------------------------------------------------------------------------------------

     /**
      * Returns the current instance of the OmniFaces partial view context.
      * @return The current instance of the OmniFaces partial view context.
      * @throws IllegalStateException When there is no current instance of the OmniFaces partial view context. That can
      * happen when the {@link OmniPartialViewContextFactory} is not properly registered, or when there's another
      * {@link PartialViewContext} implementation which doesn't properly delegate through the wrapped instance.
      */
     public static CustomPartialViewContext getCurrentInstance() {
         return getCurrentInstance(getContext());
     }

     /**
      * Returns the current instance of the OmniFaces partial view context from the given faces context.
      * @param context The faces context to obtain the current instance of the OmniFaces partial view context from.
      * @return The current instance of the OmniFaces partial view context from the given faces context.
      * @throws IllegalStateException When there is no current instance of the OmniFaces partial view context. That can
      * happen when the {@link OmniPartialViewContextFactory} is not properly registered, or when there's another
      * {@link PartialViewContext} implementation which doesn't properly delegate through the wrapped instance.
      */
     public static CustomPartialViewContext getCurrentInstance(FacesContext context) {
         CustomPartialViewContext instance = getContextAttribute(context, CustomPartialViewContext.class.getName());

         if (instance != null) {
             return instance;
         }

         // Not found. Well, maybe the context attribute map was cleared for some reason. Get it once again.
         instance = unwrap(context.getPartialViewContext());

         if (instance != null) {
             setCurrentInstance(instance);
             return instance;
         }

         // Still not found. Well, maybe RichFaces is installed which doesn't use PartialViewContextWrapper.
         if (Hacks.isRichFacesInstalled()) {
             PartialViewContext pvc = Hacks.getRichFacesWrappedPartialViewContext();

             if (pvc != null) {
                 instance = unwrap(pvc);

                 if (instance != null) {
                     setCurrentInstance(instance);
                     return instance;
                 }
             }
         }

         // Still not found. Well, it's end of story.
         throw new IllegalStateException(ERROR_NO_OMNI_PVC);
     }

     private static void setCurrentInstance(CustomPartialViewContext instance) {
         setContextAttribute(CustomPartialViewContext.class.getName(), instance);
     }

     private static CustomPartialViewContext unwrap(PartialViewContext context) {
         PartialViewContext unwrappedContext = context;

         while (!(unwrappedContext instanceof CustomPartialViewContext) && unwrappedContext instanceof PartialViewContextWrapper) {
             unwrappedContext = ((PartialViewContextWrapper) unwrappedContext).getWrapped();
         }

         if (unwrappedContext instanceof CustomPartialViewContext) {
             return (CustomPartialViewContext) unwrappedContext;
         }
         else {
             return null;
         }
     }

     // Nested classes -------------------------------------------------------------------------------------------------

     /**
      * This OmniFaces partial response writer adds support for passing arguments to JavaScript context, executing
      * oncomplete callback scripts, resetting the ajax response (specifically for {@link FullAjaxExceptionHandler}) and
      * fixing incomlete XML response in case of exceptions.
      * @author Bauke Scholtz
      */
     private static class CustomPartialResponseWriter extends PartialResponseWriter {

         // Variables --------------------------------------------------------------------------------------------------

         private CustomPartialViewContext context;
         private PartialResponseWriter wrapped;
         private boolean updating;

         // Constructors -----------------------------------------------------------------------------------------------

         public CustomPartialResponseWriter(CustomPartialViewContext context, PartialResponseWriter wrapped) {
             super(wrapped);
             this.wrapped = wrapped; // We can't rely on getWrapped() due to MyFaces broken PartialResponseWriter.
             this.context = context;
         }

         // Overridden actions -----------------------------------------------------------------------------------------

         /**
          * An override which checks if the web.xml security constraint has been triggered during this ajax request
          * (which can happen when the session has been timed out) and if so, then perform a redirect to the originally
          * requested page. Otherwise the enduser ends up with an ajax response containing only the new view state
          * without any form of visual feedback.
          */
         @Override
         public void startDocument() throws IOException {
             wrapped.startDocument();
             String loginURL = WebXml.INSTANCE.getFormLoginPage();

             if (loginURL != null) {
                 FacesContext facesContext = FacesContext.getCurrentInstance();
                 String loginViewId = normalizeViewId(facesContext, loginURL);

                 if (loginViewId.equals(getViewId(facesContext))) {
                     String originalURL = getRequestAttribute(facesContext, "javax.servlet.forward.request_uri");

                     if (originalURL != null) {
                         redirect(originalURL);
                     }
                 }
             }
         }

         /**
          * An override which remembers if we're updating or not.
          * @see #endDocument()
          * @see #reset()
          */
         @Override
         public void startUpdate(String targetId) throws IOException {
             updating = true;
             wrapped.startUpdate(targetId);
         }

         /**
          * An override which remembers if we're updating or not.
          * @see #endDocument()
          * @see #reset()
          */
         @Override
         public void endUpdate() throws IOException {
             updating = false;
             wrapped.endUpdate();
         }

         /**
          * An override which writes all {@link OmniPartialViewContext#arguments} as JSON to the extension and all
          * {@link OmniPartialViewContext#callbackScripts} to the eval. It also checks if we're still updating, which
          * may occur when MyFaces is used and an exception was thrown during rendering the partial response, and then
          * gently closes the partial response which MyFaces has left open.
          */
         @Override
         public void endDocument() throws IOException {
             if (updating) {
                 // If endDocument() method is entered with updating=true, then it means that MyFaces is used and that
                 // an exception was been thrown during ajax render response. The following calls will gently close the
                 // partial response which MyFaces has left open.
                 // Mojarra never enters endDocument() method with updating=true, this is handled in reset() method.
                 endCDATA();
                 endUpdate();
             }
             else {
                 if (context.arguments != null) {
                     startEval();
                     write(String.format(AJAX_DATA, Json.encode(context.arguments)));
                     endEval();
                 }

                 if (context.callbackScripts != null) {
                     for (String callbackScript : context.callbackScripts) {
                         startEval();
                         write(callbackScript);
                         endEval();
                     }
                 }
             }

             wrapped.endDocument();
         }

         // Custom actions ---------------------------------------------------------------------------------------------

         /**
          * Reset the partial response writer. It checks if we're still updating, which may occur when Mojarra is used
          * and an exception was thrown during rendering the partial response, and then gently closes the partial
          * response which Mojarra has left open. This would clear the internal state of the wrapped partial response
          * writer and thus make it ready for reuse without risking malformed XML.
          */
         public void reset() {
             try {
                 if (updating) {
                     // If reset() method is entered with updating=true, then it means that Mojarra is used and that
                     // an exception was been thrown during ajax render response. The following calls will gently close
                     // the partial response which Mojarra has left open.
                     // MyFaces never enters reset() method with updating=true, this is handled in endDocument() method.
                     endCDATA();
                     endUpdate();
                     wrapped.endDocument();
                 }
             }
             catch (IOException e) {
                 throw new FacesException(e);
             }
             finally {
                 responseReset();
             }
         }

         // Delegate actions -------------------------------------------------------------------------------------------
         // Due to MyFaces broken PartialResponseWriter, which doesn't delegate to getWrapped() method, but instead to
         // the local variable wrapped, we can't use getWrapped() in our own PartialResponseWriter implementations.

         @Override
         public void startError(String errorName) throws IOException {
             wrapped.startError(errorName);
         }

         @Override
         public void startEval() throws IOException {
             wrapped.startEval();
         }

         @Override
         public void startExtension(Map<String, String> attributes) throws IOException {
             wrapped.startExtension(attributes);
         }

         @Override
         public void startInsertAfter(String targetId) throws IOException {
             wrapped.startInsertAfter(targetId);
         }

         @Override
         public void startInsertBefore(String targetId) throws IOException {
             wrapped.startInsertBefore(targetId);
         }

         @Override
         public void endError() throws IOException {
             wrapped.endError();
         }

         @Override
         public void endEval() throws IOException {
             wrapped.endEval();
         }

         @Override
         public void endExtension() throws IOException {
             wrapped.endExtension();
         }

         @Override
         public void endInsert() throws IOException {
             wrapped.endInsert();
         }

         @Override
         public void delete(String targetId) throws IOException {
             wrapped.delete(targetId);
         }

         @Override
         public void redirect(String url) throws IOException {
             wrapped.redirect(url);
         }

         @Override
         public void updateAttributes(String targetId, Map<String, String> attributes) throws IOException {
             wrapped.updateAttributes(targetId, attributes);
         }

     }
 }

在face-config.xml文件添加配置如下：

  <factory>
      <partial-view-context-factory>com.context.CustomPartialViewContextFactory</partial-view-context-factory>
  </factory>

可以看到其中定义了两个常量，一个警告说明，一个名为AJAX_DATA，里面写的是一段js的字符串。这个常量用在了 被重写的endDocument()方法里。这个方法主要做了两件事，第一是写入要传递的数据，并且以json格式打包，第二件事是包含了一个js方法。那么可以这样认为：该方法的作用是用一个js方法取得发送的数据。

　　首先我们必须清楚，JSF使用f:ajax更新客户端的底层操作是怎样的。JSF更新数据是向页面发送了xml数据的，可以在firefox的 firebug下面的网络-XML面板下看到发送的xml数据，类似于以下的数据：

 <partial-response id="j_id1">
 　　<changes>
 　　　　<update id="j_id1:javax.faces.ViewState:0">-4426271603414575392:-5845678956333562288</update>
 　　</changes>
 </partial-response>

里面包含了需要更新的组件和组件状态。

我把omnifaces的Ajax代码整理出来以后，根据官方例子的用法，写了一个小demo测试，其中页面form表单代码如下：

 <h:form prependId="false">
         <h:outputLabel value="#{test2.radom}" id="outLabel"/>
         <h:commandButton action="#{test2.callback}"  value="请求服务端js">
             <f:ajax/>
         </h:commandButton>
         <h:commandButton value="获取服务端数据到js">
             <f:ajax listener="#{test2.argument}"/>
         </h:commandButton>

         <h:commandButton value="showUser">
             <f:ajax listener="#{test2.parseUser}"/>
         </h:commandButton>
 </h:form>

测试bean代码如下：

 @ManagedBean(name="test2")
 @ViewScoped
 public class Test2 implements Serializable {

     private static final long serialVersionUID = 8686669721840131192L;

     public void callback() {
         Ajax.oncomplete("alert('Hi, I am the oncomplete callback script!')");
     }

     public void argument() {
         Ajax.data("foo", "bar");
         Ajax.data("first", "one", "second", "two");
         Map<String, Object> data = new HashMap<>();
         data.put("bool", true);
         data.put("number", 1.2F);
         data.put("date", new Date());
         data.put("array", new Integer[] { 1, 2, 3, 4, 5 });
         data.put("list", Arrays.asList("one", "two", "three"));
         Ajax.data(data);
         Ajax.oncomplete("showData()");
     }

     public void parseUser(){
         Ajax.data("user", new User(1, "bigbang"));
         Ajax.oncomplete("showUser()");
     }

 }

其中提供了三个页面响应的方法。当点击第一个button时，页面会弹出一个alert提示框。此时查看firefox下面的数据如下：

 <partial-response id="j_id1">
 <changes>
 <update id="j_id1:javax.faces.ViewState:0">-4426271603414575392:-5845678956333562288</update>
 <eval>alert('Hi, I am the oncomplete callback script!')</eval>
 </changes>
 </partial-response>

点击“获取数据到js”按钮，查看xml数据：

 <partial-response id="j_id1">
 <changes>
 <update id="j_id1:javax.faces.ViewState:0">-3364647386979820288:-1391656100755852530</update>
 <eval>var Faces=Faces||{};Faces.Ajax={data:{"second":"two","number":1.2,"list":["one","two","three"],"foo":"bar","bool":true,"date":"Fri, 17 Jul 2015 09:17:50 GMT","first":"one","array":[1,2,3,4,5]}};</eval>
 <eval>showData()</eval>
 </changes>
 </partial-response>

点击“showuser”按钮，查看xml数据：

 <partial-response id="j_id1">
 <changes>
 <update id="j_id1:javax.faces.ViewState:0">-3364647386979820288:-1391656100755852530</update>
 <eval>var Faces=Faces||{};Faces.Ajax={data:{"user":{"id":1,"name":"bigbang"}}};</eval>
 <eval>showUser()</eval>
 </changes>
 </partial-response>

可以看出刚才的那个endDocumnt方法和AJAX_DATA常量的用意了，实际是构造了一个js对象，然后传入一个js方法到客户端，客户端会自动调用这个js方法，根据对象取得json数据。那么客户端的js只需要这样写就可以了：

   <script>
     function showData() {
            var data = Faces.Ajax.data;
            $.each(data, function(key, value) {
                 console.log(key+"---"+JSON.stringify(value));
             });
       }

       function showUser(){
         var data = Faces.Ajax.data;
         $.each(data, function(key,value){
             var user = JSON.stringify(value);
             var u = $.parseJSON(user);
             console.log("userName----"+u.name);
          }
   </script>

控制台显示数据如下：

OK，大功告成了！其中的细节不用细究，无非就是掺杂了各种数据转换为json格式、数据的包装和写入。最后说明一点，omnifaces需要CDI的支持，必须导入CDI的jar包。