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