AJAX设计策略（八）

设计策略4：包装

客户端JavaScript库和客户端框架提供不同的优势。但是有没有将二者结合的方法，使JavaScript库在客户端框架内可用。回答使肯定的。达到此种目的的一种努力是开源的jMaki项目。jMaki（发音jay-MAH-kee）是一个框架，用来将JavaScript部件包装进JSP标记或JavaServer Faces组件。名字jMaki聪明地加入Java－这就是jMaki中j代表的意义－包装－Maki是日语包装的意思。

jMaki提供一个包装组件库，它们来自多种流行JavaScript库例如Dojo toolkit 和 Script.aculo.us。超过30种的jMaki部件已经可用。你可以在jMaki Widget Gallery里查看这些组件。jMaki框架同样提供添加一系列jMaki部件的方法。

页面作者在页面里包含jMaki部件同JSP标记、JavaServer Faces组件一样。例如，有一个jMaki的标记是一个来Dojo部件库的内联编辑器部件。这里有页面作者如何像包含JavaServer Faces组件一样包含部件的方法：

 

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

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

<%@ taglib prefix="a" uri="http://java.sun.com/jmaki-jsf" %>

...

<f:view>

    <a: ajax name="dojo.inlineedit"/>

</f:view>

 

 

注意，jMaki标记库引入就在JavaServer Faces标记库引入的后面。jMaki包含两种标记库－一种是JSP标记另一种是JavaServer Faces组件。作为页面上标记的响应，jMaki为部件生成适当的JavaScript代码－还有HTML和CSS。

需要3个文件定义一个jMaki部件：一个HTML模版文件，指定了部件的页面版式，一个CSS文件，指定部件的样式参数，一个JavaScript文件，指定部件的行为。为将一个部件添加到一组jMaki部件里，你需要提供部件的3个文件。例如，这是内联编辑器部件的JavaScript文件:

 

dojo.require("dojo.widget.*");

dojo.require("dojo.widget.InlineEditBox");

dojo.require("dojo.event.*");

 

dojo.widget.createWidget(widget.uuid);

 

var editable = dojo.widget.byId(widget.uuid);

editable.onSave = function() {

    var id = widget.uuid;

    alert("saving " + id);

};

 

jmaki.attributes.put(widget.uuid, editable);

 

 

JavaScript代码为部件引入Dojo库，并包括一个JavaScript函数的调用，创建一个部件的实例。

你可以使用jMaki包装一个JavaScript库里的部件－是一个类似Dojo或者Prototype客户JavaScript库中的部件，而不是jMaki里已提供的部件－或者创建自己的部件并包装它。当然，如果你创建自己的部件你必须编写完全指定它行为的JavaScript代码。如果行为包含AJAX功能，你必须编写代码实现那些功能。这包括创建和配置XMLHttpRequest对象以创建异步请求，并编写一个回调函数。

 

使用jMaki的正面与反面

正面

隐藏JavaScript细节。因为jMaki封装类似Dojo等JavaScript库的部件，它提供使用这些部件的所有优势，例如隐藏AJAX底层细节，处理浏览器的不兼容性，并处理类似书签的UI问题。你可以使用一个或多个JavaScript库中的这些部件而不必了解每个库的不同语法。jMaik为开发者提供了一致的语法，而不管部件的来源是什么。当然你也不必编写部件里已经提供了的JavaScript代码。

此外，由于jMaki使部件像JSP标记和JavaServer Faces组件一样可用，它也提供了JSP和JavaServer Faces的优势。页面作者不需要懂得JavaScript，CSS和DOM。页面作者可以简单的通过将jMaki标记库引入然后指定部件的标记的方式来在页面上包含部件。由于部件包装的像JavaServer Faces组件一样，开发者可以利用JavaServer Faces处理事件的体系的优势，转换验证用户输入。在Sun Java Studio Creator IDE 和 NetBeans IDE之类的应用开发环境中，应用开发者同样可以通过拖放方式使用包装部件。在NetBeans IDE 5.5 Beta里可以获得一个jMaki插件模块。

集成到Project Phobos脚本框架。不仅可以与JSP和JavaServer Faces协作，jMaki也可以与Project Phobos脚本框架协作。Phobos是一个专注于建立一个用脚本语言创建web应用的框架的项目。框架同样允许开发者使用Java语言而不使用脚本语言，来执行任务。jMaki到Project Phobos的集成允许开发者在框架中使用jMaki部件。

 

 

反面

需要一些JavaScript的知识。除非你使用已封装到jMaki的部件，不然你仍需要知道一些JavaScript知识。如上一例子所示，如果你使用jMaki包装JavaScript库中的部件，你需要编写代码为部件引入适当的包，并调用JavaScript函数创建部件实例。如果你创建自己的部件，你不惜编写JavaScript代码以指定它的行为，和CSS指定它的样式。如果行为包含AJAX功能，你必须编写JavaScript代码实现该功能－包含DOM操作。

 

设计策略5：远程调用

使用AJAX的另一种途径是使用远程框架，例如Direct Web Remoting (DWR) 和 JSON-RPC。这些框架是开发者可以通过远程过程调用（RPC）－就像JavaScript调用来将AJAX置入应用程序。例如，返回本文先前讨论的弹出式气球。你可以为弹出气球在服务端创建一个简单的类来处理AJAX请求。你可以把类叫做Popup，把类中提供书籍细节的方法叫做getDetails.在客户端，你编写一个JavaScript函数，这个函数在鼠标越过事件时触发。在JavaScript代码里调用getDetails方法：

 

<script type="text/javascript" src="dwr/engine.js"></script>

<script type="text/javascript" src="dwr/util.js"></script>

 

<script type="text/javascript">

...

 

showPopupInternal=function(popupx, bookId) {

   Popup.getDetails(bookId, ajaxReturnFunction)

}

 

...

 

该方法的参数，ajaxReturnFunction，是一个回调函数。你必须在客户端编写回调函数。尽管如此，你不必编写创建、配置XMLHttpRequest对象的底层细节。DWR框架为你做了这些。框架在客户端生成一个远程方法调用（RMI）stub的等价物。Stub是一个包括 XMLHttpRequest底层操作的类. 然后框架处理生成的JavaScript类与服务端之间的交互数据。这包括转换客户端JavaScript传递的参数，和转换服务端Java返回的值。在服务端，框架生成一个叫做DWRServlet的servlet，接收请求并将它分配给Popup类处理。

注意在代码开头部分确定的两个DWR JavaScript库文件。dwr/util.js文件包含一个可以用来更新web页面的JavaScript库。例如，你可以使用有用的函数$(id)来替代等价的DOM API document.getElementById(id)访问和处理DOM中的元素。dwr/engine.js文件包含了处理客户端stub与服务端调用的功能。

使用DWR的正面与反面

正面

隐藏底层AJAX细节。你可以通过对服务端Java方法的类似RMI的函数调用方式来创建一个AJAX请求。DWR框架处理了底层的细节，例如创建和配置XMLHttpRequest对象并在这些对象上执行操作。

需要Java开发者使用熟悉的方法结构来创建AJAX请求。DWR调用的类似RMI的语法结构对大多数Java应用开发者来说很熟悉。

允许开发者通过很小的努力将现有的业务逻辑暴露给AJAX客户端。如果你在服务端有业务逻辑可以处理AJAX请求，你就可以通过一个简单的方法调用从客户端JavaScript函数访问那个逻辑。

提供安全控制。DWR提供多种控制保护远程类和方法免遭暴露。远程类只有在被在配置文件dwr.xml中指定的情况下，才能通过DWR被暴露。这些控制可以更精确的暴露远程类中仅被指定的方法。DWR同样支持Java平台，Java EE基于角色的权限控制。允许的Java EE角色拥有指定远程类或方法的权限。

反面

需要JavaScript知识。虽然DWR框架生成AJAX通信的底层细节代码，你仍然需要编写事件触发的JavaScript代码－例如鼠标越过或点击事件。同样需要编写回调函数的代码。但你可以通过使用DWR连同jMaki部件，AJAX的JavaServer Faces组件，或其他封装JavaScript的组件来降低代码的数量。

只对Java对象起作用。DWR专门为JavaScript客户端和服务端Java对象设计。比较起来，不同的JSON-RPC实现存在不同的语言。

 

设计策略6：所有Java技术

JavaServer Faces 和 jMaki 是使用 Java 建立 AJAX 应用的途径。但是它们仍需要开发者写一些 JavaScript 代码。尽管如此，有一些仅 Java 的途径。其中之一是使用 Google Web Toolkit (GWT). GWT 是免费的－虽然不开源－客户端框架，需要开发者专门使用 Java 语言建立 AJAX 应用。这包括应用客户端－ GWT Java-to-JavaScript 编译器将 Java 语言转换成 JavaScript 代码和 HTML 。在服务端，你可以服务端 Java 技术的优势，例如 servlets, JSP, 和 JavaServer Faces 。