就在不久前，开发人员若想实现AJAX的特性，需要直接和XMLHTTPRequest对象打交道，或者使用某些初级的函数库来完成2005年6月，笔者在DevX上发表第一篇介绍AJAX的文章AJAX: A Fresh Look at Web Development》，那时AJAX技术还在萌芽期。如今，很多免费的AJAX框架为开发人员提供了解决各种复杂任务的诸多特性本文介绍了以下几种常见的非商业性AJAX框架在呼叫中心开发案例中的应用Prototype Dojo Direct Web Remoting (DWR) Yahoo! User Interface (YUI) Toolkit Google Web Toolkit (GWT) 文中阐述了笔者的个人观点并且介绍了每个框架可以为开发人员提供哪些功能 一、测试案例为客户提供服务的应用系统通常以富客户端或者嵌入浏览器可执行程序等方式实现。客户支持系统要求程序对客户的请求作出即时反应以及迅速实现各种查询。这些需求使得典型的非动态应用的解决方案不能令人满意，本文的测试应用案例是简化的呼叫中心程序，可为客户提供即时的呼叫服务。为了实现对于呼叫人及其账户信息的即时访问，呼叫中心应用需要将企业和账户管理系统（基于web的模拟器）集成，从而使得应用具有挑战性和趣味性。以下是本应用案例的开发和测试环境。开发环境： Eclipse IDE, Visual Web Developer 2005 Express Edition (for Web design) and PSPad 服务器端平台：, Apache Tomcat 5.5 Servlet/JSP Container 测试用浏览器：Firefox 1.5 and Internet Explorer (IE) 6, and IE 呼叫中心应用的界面包含两个子面板（如图：左侧，显示需应答的呼叫客户列表：右侧，显示动态生成的选定客户的详细信息。客户服务人员选取待应答客户时，账户管理系统在右侧面板动态产生此用户的详细信息 。
http://image.it168.com/cms/2007-4-24/Image/2007424105020.JPG图1
二、Prototype's JavaScript 特性
Prototype 是最受欢迎的AJAX框架之一。Ajaxian.com网站2006年的调查结果显示，Prototype同框架规模庞大的Yahoo! User Interface, Google Web Toolkit, and Atlas.等相比较起来，其排名竟然遥遥领先，这不能不令人感到惊异。
答案很简单：Prototype使用起来就像是对于JavaScript语言的自然扩展。尝试过Prototype框架后，笔者几乎坚信Prototype框架应该被纳入JavaScript语言。
对于我们的案例，紧凑、强大并且设计合理的Prototype框架再合适不过了。通过Ajax.Request对象建立两个指向服务器端资源（PBX和账户查询）的并发调用，完成了第一个挑战——资源整合。Ajax.Request对象是对于XMLHTTPRequest对象的跨浏览器抽象，可向服务器端发送普通请求或者异步请求。当调用请求结束时，Ajax.Request对象把回调函数的名字作为参数返回。
因此，通过以下两个连续的调用实现了指向PBX系统两次请求：
function getInfo()
{
//load params from form
var callerNum = $F('callerNum');
var url = 'http://<server>/ServiceProvider/pbxService';
var pars = 'callerNum=' + callerNum;
//asynchronous calls are used as default
var response = new Ajax.Request( url, { method: 'get', parameters: pars
onComplete: showPBXResponse });
var callerName = response.responseText ;
var url = 'http://<server>/ServiceProvider/acctService';
var pars = 'callerName=' + callerName;
var acctResponse = new Ajax.Request( url, { method: 'get',parameters: pars
onComplete: showAcctResponse });
}
//callback functions
function showPBXResponse(requestResults)
{
//show returned value in the PBX area
$('pbxResult').value = requestResults.responseText ;
}
function showAcctResponse(requestResults)
...
开发案例的其它部分由传统的JavaScript完成。对于页面元素渲染效果的定制，Prototype框架并不提供太多的支持。这部分处理成常规的基于XHTML/CSS界面设计的事件驱动模式的补充。
Prototype 是最受欢迎的AJAX框架之一。Ajaxian.com网站2006年的调查结果显示，Prototype同框架规模庞大的Yahoo! User Interface, Google Web Toolkit, and Atlas.等相比较起来，其排名竟然遥遥领先，这不能不令人感到惊异。
答案很简单：Prototype使用起来就像是对于JavaScript语言的自然扩展。尝试过Prototype框架后，笔者几乎坚信Prototype框架应该被纳入JavaScript语言。
对于我们的案例，紧凑、强大并且设计合理的Prototype框架再合适不过了。通过Ajax.Request对象建立两个指向服务器端资源（PBX和账户查询）的并发调用，完成了第一个挑战——资源整合。Ajax.Request对象是对于XMLHTTPRequest对象的跨浏览器抽象，可向服务器端发送普通请求或者异步请求。当调用请求结束时，Ajax.Request对象把回调函数的名字作为参数返回。
因此，通过以下两个连续的调用实现了指向PBX系统两次请求：
function getInfo()
{
//load params from form
var callerNum = $F('callerNum');
var url = 'http://<server>/ServiceProvider/pbxService';
var pars = 'callerNum=' + callerNum;
//asynchronous calls are used as default
var response = new Ajax.Request( url, { method: 'get', parameters: pars
onComplete: showPBXResponse });
var callerName = response.responseText ;
var url = 'http://<server>/ServiceProvider/acctService';
var pars = 'callerName=' + callerName;
var acctResponse = new Ajax.Request( url, { method: 'get',parameters: pars
onComplete: showAcctResponse });
}
//callback functions
function showPBXResponse(requestResults)
{
//show returned value in the PBX area
$('pbxResult').value = requestResults.responseText ;
}
function showAcctResponse(requestResults)
...
开发案例的其它部分由传统的JavaScript完成。对于页面元素渲染效果的定制，Prototype框架并不提供太多的支持。这部分处理成常规的基于XHTML/CSS界面设计的事件驱动模式的补充。
三、Dojo ——神奇的界面工具集世界
Dojo是一种颇受欢迎的开源框架，对于web界面工具集和web开发中与后端系统间交互等诸多重要方面提供广泛的支持。在各种工具中，有些可直接用来渲染呼叫用户列表（Dojo使用手册中这部分的文档不完整），其它像多选列表项的异步调用等则需要作进一步定制工作。
Dojo界面工具的定制需要深入了解Dojo的底层。Dojo的定制机制非常灵活，通晓javascript语言并且对于Dojo框架的细节了如指掌。定制的可能性是无限的。
对于多个后端异步调用的实现，采用了dojo.io.bind对象。Bind对象可实现对后端资源的调用并将结果返回给回调对象。下面的代码完成了针对PBX交换系统的调用。
var getURL = 'http://<server>/ServiceProvider/acctService?callerName=' +
callerName;
dojo.io.bind({
url: getURL, /* URL to be called */
load: function(type, data, evt){
/* normal callback code here
*/ },
error: function(type, error){
/* error handling callback defined here
*/ },
mimetype: "text/plain"
});
Dojo的类和扩展模型相当复杂，而Bind对象和回调对象的模型则更容易理解和使用，性能也不错。
Dojo是一种颇受欢迎的开源框架，对于web界面工具集和web开发中与后端系统间交互等诸多重要方面提供广泛的支持。在各种工具中，有些可直接用来渲染呼叫用户列表（Dojo使用手册中这部分的文档不完整），其它像多选列表项的异步调用等则需要作进一步定制工作。
Dojo界面工具的定制需要深入了解Dojo的底层。Dojo的定制机制非常灵活，通晓javascript语言并且对于Dojo框架的细节了如指掌。定制的可能性是无限的。
对于多个后端异步调用的实现，采用了dojo.io.bind对象。Bind对象可实现对后端资源的调用并将结果返回给回调对象。下面的代码完成了针对PBX交换系统的调用。
var getURL = 'http://<server>/ServiceProvider/acctService?callerName=' +
callerName;
dojo.io.bind({
url: getURL, /* URL to be called */
load: function(type, data, evt){
/* normal callback code here
*/ },
error: function(type, error){
/* error handling callback defined here
*/ },
mimetype: "text/plain"
});
Dojo的类和扩展模型相当复杂，而Bind对象和回调对象的模型则更容易理解和使用，性能也不错。
四、DWR — 令人激动的服务器端集成
DWR (Direct Web Remoting) 同上述的框架性质上完全不同。DWR的重点是浏览器/服务器的交互。DWR框架的大部分API函数也是针对这种交互的。DWR是基于java的框架，最适用于后端运行java应用的情况。
因为这些特性，DWR为开发呼叫中心应用提供了一种有趣的途径。这种方法不再使用AJAX控制从服务器返回的文本信息，而是使用javascript调用DWR框架的远程异步对象。实现起来很简单：通过在浏览器端的JavaScript构造和调用PBX和相关JAVA对象。这样就通过优雅而简洁的方式完成了客户端和服务器端的集成。
在Java代码里，定义了PBXService对象，用来根据呼叫用户代码从PBX获取用户详细信息。
public class PBXService ...{
public String getCallerName(int callerNumber)...{
...
}
}
在html代码里，嵌入了使用PBXService对象和DWR引擎的JavaScript 方法。
<script type="text/javascript"
src="ServiceProvider/dwr/interface/PBXService.js"> </script>
<script type="text/javascript"
src="ServiceProvider/dwr/engine.js"> </script>
...
从JavaScript调用PBXService的方法如下：
PBXService.getCallerName(18003456700, processPBXResponse);
自定义的JavaScript方法processPBXResponse用来处理PBXService.getCallerName 方法的返回结果
尽管不如Dojo的框架复杂精细，也不如Prototype与JavaScript的集成度高，DWR却提供了颇具吸引力的与服务端的集成方式。在与服务器端Java应用的集成方面，DWR做得最好。
DWR (Direct Web Remoting) 同上述的框架性质上完全不同。DWR的重点是浏览器/服务器的交互。DWR框架的大部分API函数也是针对这种交互的。DWR是基于java的框架，最适用于后端运行java应用的情况。
因为这些特性，DWR为开发呼叫中心应用提供了一种有趣的途径。这种方法不再使用AJAX控制从服务器返回的文本信息，而是使用javascript调用DWR框架的远程异步对象。实现起来很简单：通过在浏览器端的JavaScript构造和调用PBX和相关JAVA对象。这样就通过优雅而简洁的方式完成了客户端和服务器端的集成。
在Java代码里，定义了PBXService对象，用来根据呼叫用户代码从PBX获取用户详细信息。
public class PBXService ...{
public String getCallerName(int callerNumber)...{
...
}
}
在html代码里，嵌入了使用PBXService对象和DWR引擎的JavaScript 方法。
<script type="text/javascript"
src="ServiceProvider/dwr/interface/PBXService.js"> </script>
<script type="text/javascript"
src="ServiceProvider/dwr/engine.js"> </script>
...
从JavaScript调用PBXService的方法如下：
PBXService.getCallerName(18003456700, processPBXResponse);
自定义的JavaScript方法processPBXResponse用来处理PBXService.getCallerName 方法的返回结果
尽管不如Dojo的框架复杂精细，也不如Prototype与JavaScript的集成度高，DWR却提供了颇具吸引力的与服务端的集成方式。在与服务器端Java应用的集成方面，DWR做得最好。
五、Yahoo UI (YUI) Toolkit ——争做第一流的框架
YUI 是一种性能稳定的、功能丰富多彩、文档完善的AJAX开发框架。在测试的几个框架中，YUI框架最具专业水准的感觉。
完整的呼叫中心应用由Yahoo工具集实现起来相当容易。列表和面板等展示层对象采用YUI的面板和对话框组件实现。对于后端PBX和账户查询系统的异步调用采用Yahoo ConnectorManager（连接管理器）和回调API函数实现。具体用法如下：
var pbxURL = [url=http://</]http://<[/url];server>/ServiceProvider/acctService?callerName=' + callerName;
PbxCallback是JavaScript对象，定义如下：
var requestFromPBX = YAHOO.util.Connect.asyncRequest('GET', pbxUrl, pbxCallback);
var callback = {
success:handleSuccess,
failure: handleFailure
argument: { callerName: "N/A" }
};
HandleSuccess 是常规的JavaScript函数，用来读取PBX服务器返回的结果。并发出以PBX系统返回的呼叫用户名为参数的对于账户查询系统的调用。
var pbxURL = [url=http://</]http://<[/url];server>/ServiceProvider/acctService?callerName=' + callerName;
var requestFromAcct = YAHOO.util.Connect.asyncRequest('GET', acctURL, acctCallback);
读者可能会提出疑问，框架提供任务如此之多的特性，是否存在争议之处？确实如此。YUI是一套特定品牌API的框架，随处可见其商业公司的烙印。其设计和实现由Yahoo的一个项目组专门维护。同时也用来开发Yahoo公司的门户产品。虽然框架本身是免费的，却会在多处用户的应用代码中表明Yahoo产品的痕迹。（如图2）对于习惯于使用开源框架的开发人员这可能是个问题。
[align=center][size=2][color=black][img]http://image.it168.com/cms/2007-4-24/Image/200742411155.jpg[/img][/color][/size][/align][align=center][size=2][color=black]图2 [/color][/size][/align][color=black][align=left][size=2][color=black]一般来说，[/color][color=black]YUI[/color][color=black]工具箱简单、易用。[/color][color=black]YUI[/color][color=black]和其它框架比较起来要庞大得多，然而对框架比较熟悉后，用它开发基本上就是一个组装的过程：在界面上布置各种组件，然后使其协同运行。总体看来，这是个不错的框架。[/color][/size][/align][/color]
六、Google Web Toolkit— 完全Java化
YUI 是一种性能稳定的、功能丰富多彩、文档完善的AJAX开发框架。在测试的几个框架中，YUI框架最具专业水准的感觉。
完整的呼叫中心应用由Yahoo工具集实现起来相当容易。列表和面板等展示层对象采用YUI的面板和对话框组件实现。对于后端PBX和账户查询系统的异步调用采用Yahoo ConnectorManager（连接管理器）和回调API函数实现。具体用法如下：
var pbxURL = [url=http://</]http://<[/url];server>/ServiceProvider/acctService?callerName=' + callerName;
PbxCallback是JavaScript对象，定义如下：
var requestFromPBX = YAHOO.util.Connect.asyncRequest('GET', pbxUrl, pbxCallback);
var callback = {
success:handleSuccess,
failure: handleFailure
argument: { callerName: "N/A" }
};
HandleSuccess 是常规的JavaScript函数，用来读取PBX服务器返回的结果。并发出以PBX系统返回的呼叫用户名为参数的对于账户查询系统的调用。
var pbxURL = [url=http://</]http://<[/url];server>/ServiceProvider/acctService?callerName=' + callerName;
var requestFromAcct = YAHOO.util.Connect.asyncRequest('GET', acctURL, acctCallback);
读者可能会提出疑问，框架提供任务如此之多的特性，是否存在争议之处？确实如此。YUI是一套特定品牌API的框架，随处可见其商业公司的烙印。其设计和实现由Yahoo的一个项目组专门维护。同时也用来开发Yahoo公司的门户产品。虽然框架本身是免费的，却会在多处用户的应用代码中表明Yahoo产品的痕迹。（如图2）对于习惯于使用开源框架的开发人员这可能是个问题。
[align=center][size=2][color=black][img]http://image.it168.com/cms/2007-4-24/Image/200742411155.jpg[/img][/color][/size][/align][align=center][size=2][color=black]图2 [/color][/size][/align][color=black][align=left][size=2][color=black]一般来说，[/color][color=black]YUI[/color][color=black]工具箱简单、易用。[/color][color=black]YUI[/color][color=black]和其它框架比较起来要庞大得多，然而对框架比较熟悉后，用它开发基本上就是一个组装的过程：在界面上布置各种组件，然后使其协同运行。总体看来，这是个不错的框架。[/color][/size][/align][/color]
GWT的开发理念同其它几个框架完全不同。GWT是完全基于Java的开发框架，所有的Web组件采用Java编写，然后编译成具有AJAX功能的web页面。因为笔者是多年的java 程序员，所以对这种相对新奇的方式使用起来感觉相当自如。但是如果不熟悉Java开发，或需要对于从Java到Web的编译过程有更细致的控制，则会遇到困难。然而，GWT框架非常易用，只要补充一些Java语言技巧就可以开始用GWT了。
对于Java程序员来说，GWT生成Web内容的功能是神奇的（虽然存在少许限制）。典型的Web开发人员偏好对于应用生成的web内容有足够多的控制，而GWT只提供了非常有限的控制方法。例如，案例中使用了com.google.gwt.user.client.ui.HorizontalPanel 设计页面布局。这种Swing风格对于Java开发非常方便，适用于不同的浏览器。然而，若要细致地调整表现层的效果，则需跳出Java的规范，直接通过样式定义来微调输出结果。尽管这种做法很合理，却超出了GWT的Java-only方式。
七、排除性能因素的框架比较
用于开发测试案例的所有框架有几个共同之处：对于发送AJAX请求方面功能强大、易于使用，而且免费。YUI对于一般的门户应用来说功能最完善（界面良好、灵活、拖放操作）。YUI的问题是其纯粹的框架性质。YUI提供了很多功能，但也存在很多限制，使用起来感觉有些不够灵活。而Prototype则正相反，是最开放灵活的框架。Prototype框架规模紧凑，提供了核心的AJAX抽象API , 在此基础上开发人员可以只有构建其应用。
DWR对于需要与服务器端频繁交互的、基于Java的应用来说是个不错的框架。使用DWR，浏览器端逻辑层可以直接与业务层互动，从而有效地创建了一种全新的MVC模式。框架的设计考虑了各种复杂的客户端/服务器端交互情况。然而，如果对于类门户的web应用来说，DWR的作用并不显著。
如果需要一个支持AJAX的功能完善的框架，并且具有定制和底层代码微调，应该选用Dojo。如果应用平台是Java, GWT是最好的选择。
具体采用哪个框架主要取决与应用的类型和开发人员的业务素质。