流行AJAX框架大比拼(一)

      就在不久前，开发人员若想实现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应用的解决方案不能令人满意。

本文的测试应用案例是简化的呼叫中心程序，可为客户提供即时的呼叫服务。为了实现对于呼叫人及其账户信息的即时访问，呼叫中心应用需要将企业PBX和账户管理系统（基于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 7

呼叫中心应用的界面包含两个子面板（如图1）

1：左侧，显示需应答的呼叫客户列表
2：右侧，显示动态生成的选定客户的详细信息。客户服务人员选取待应答客户时，账户管理系统在右侧面板动态产生此用户的详细信息。

 

图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界面设计的事件驱动模式的补充。

三、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对象和回调对象的模型则更容易理解和使用，性能也不错。