面对众多Ajax框架，我们该如何选择呢？(转载Amigo 2007-07-04 )

  Ajax（Asynchronous JavaScript and XML）框架或库（以下简称为Ajax库）有如雨后春笋般令如今的开发人员眼花缭乱，总是为选择适合自己项目的Ajax库而感到迷惑。笔者通过对各种Ajax库的分析比较及对过去项目经验的总结，希望与读者就如何选择合适的Ajax库而进行一些心得体会的交流，以期待共同学习与进步。

一、        前言

面对Ajax遍地开花的局面，很多的WEB开发人员都跃跃欲试。但对于已经被各种IDE娇生惯养的开发人员而言，如果还要自己通过编写XMLHttpRequest代码来直接获得XMLHttpRequest调用，这恐怕有如在饭店点完菜后还得自己去炒菜般的尴尬。想必各位早已经注意到了各种接连不断涌现的Ajax库，以及千方百计吸引各位开发人员的Ajax商业软件或框架。虽然它们都能着力于使开发人员避免手工直接编写Ajax程序，但是如此多的Ajax库，开发人员又何去何从呢？

笔者认为，首先得了解如下两种基本的Ajax库，以及将它们的功能与具体应用程序相结合的途经或方法：

1.         纯JavaScript库，提供核心的、远程的脚本。

2.         服务器端的Ajax库：在应用服务器端生成Ajax代码。

两种类型都有自己独特的应用范围，这主要取决于所应用的具体Web程序。当然开发人员的喜好有时也是首要的选择因素。两种类型有时也会混合使用以便于达到最佳效果。为了帮助读者更好的区分使用这两种类型的Ajax库，表1分析列举了两种类型各自的优缺点。

表1.两种Ajax库的优缺点比较

Ajax库类型	优点	缺点
基于服务器的Ajax库	l         使需要处理的JavaScript代码减少到最小（各种类型的库稍有不同）。 l         能将本地服务端对象如数据库的记录集，映射成JavaScript等价物。	过于紧密的将JavaScript代码绑定到服务端语言。
纯JavaScript的Ajax库	l         可处理多种服务器端语言。 l         使客户端代码与服务器端代码更好的分离。	开发人员需要自行将服务器端的返回值转换成XML或JSON（JavaScript Object Notation）。

 

二、纯JavaScript库

就基于原型的JavaScript而言，每种JavaScipt库的差异表现在于JavaScript语法结构上。从服务器端语言换成JavaScript，如果调用JavaScript库没有语法上的变动的话，这样的任务将变得很艰巨。

在Internet上充满着各种免费的JavaScript库，而且绝大部分是开源的（因为作为脚本，开源似乎是必然的），提供各种强大的功能。就作为脚本而言，各种JavaScript库能完成各种功能，它们最主要的区别在于语法上而已。

根据 Ajaxian.com 2006的调查（尽管这个调查并不十分的科学，因为它并没有总结各种流行库），JavaScript库中最主要的三大库为别是：Dojo、Yahoo！User Interface（YUI）库及Prototype。为了帮助读者更好的对各种库进行取舍，在本文中，将介绍总结这三种库的优缺点，并分别使用三种库来处理“Hello World”，并传递若干的参数至服务器（本例中的服务器为localhost），然后从服务器上下载首页。虽然这样的例子并没在多大的技术利用价值，但可以向读者展示一下使用Ajax库进行Ajax调用的基本语法。

 

1)        Dojo

Dojo是这三种库中最全面的一种库。除了三类库都能提供的Ajax功能及动画外，Dojo还为每个页面的widget提供一个抽象层，并且以开发人员所期待的服务器端语言风格展现。

Dojo不只是提供一些库，一些方法，一些功能，而且让代码更加简洁，保证你的代码只包含所需要的部分。Dojo会让你的生活更加简单，因为他替你链接了很多东西，把你的复杂项目分成一些小问题，让你的代码更简洁，更有效率，并且可以更好的重复使用。

Dojo在正常的DOM调用与Dojo调用之间提供了一个抽象层。有些已经使用DOM很久的用户对这个抽象层并不喜爱，而那些新手，他们太缺乏经验，对DOM的了解并不多，他们反而很喜欢这个抽象层。Dojo提供大量的事件系统和丰富的可定制组件，可以设计出非常美观的用户界面。

与Python相似，Dojo也采用声明式的语法，只是更加的简洁而已。下面的“Hello World”示例展示用Dojo进行Ajax调用，将参数“key=value”传递给服务器端（如localhost）

Dojo.io.bind{

         url:”http://localhost:8088/DojoTest?key=value”,

          load:function{type,data,evt}{

                  alert(‘Responded:’+data);

         },

         Error:function(type,error){

                 alert(‘Error:’+error);

         },

         Mimetype:”text/html”

};

 

2)        Yahoo! User Interface库

Yahoo! User Interface Library（简称YUI）是一个使用JavaScript编写的工具和控件库。它利用DOM脚本、DHTML和Ajax来构造具有丰富交互功能的Web程序。YUI也包含几个核心的CSS文件。YUI中的所有组件已经以开源的形式发布，它们遵循 BSD 协议并且可以免费使用。YUI的组件/窗口框架，相比Dojo而言，要简单很多。

YUI使用声明模型来进行Ajax调用，虽然功能很强大，但也很冗长。下面用YUI库缩写的代码实现了前面用Dojo来实现的功能：

YAHOO.util.Connect.asyncRequest(

‘get’,

‘http://localhost:8088/DojoTest?key=value',

Callback

);

Var callback =

{

         Success:reponseSuccess,

         Failure:responseFailure

};

Function reponseSuccess(r)

{ alert(‘Responded:’+r.responseXML);}

Function responseFailure(r)

{ alert(‘Error:’+r.statusText);}

 

3)        Prototype

Prototype比较像Ruby的语法，因为Prototype的JavaScript代码就是使用Ruby程序生成的，并且它们的编程风格也很相似。Prototype的功能很容易吸引初学者。因为Prototype采用$来代替document.getElementById这样的写法。Prototype包含的库相对少一些，主要有script.aculo.us、Rico、Behaviour等。当然，Prototype也为Ruby on Rails提供了基于服务器端的库，这样就可以在服务器端来处理Prototype了。

对Ajax而言，Prototype提供了多种Ajax调用的方法。当然也有像上述Dojo和YUI一样的只返回数据结果的类似方法。下面的代码展示将返回的HTML结果自动的放在一个名为DivIDToPutResultIn的<DIV>中：

Var ajaxReq = new Ajax.Updater(‘DivIDToPutResultIn’,

‘http://localhost:8088/DojoTest’,

{method: ‘get’,parameters:’key=value’});

相对以往那种在服务器端产生数据，然后在客户端用JavaScript来处理并显示的方式而言，这种在服务器端生成HTML的方式非常地有优势。

 

4)        结果处理

这三种类型的库都支持采用XML和JSON来处理返回的结果（相对于XML，JSON更加易读、更便于代码的检查，同时，JSON能更友好的从服务端传递复杂的数据结构到客户端）。当然，这三种库都需要开发人员自行选择服务器端语言中的数据类型。这意味着，要么需要为服务器端语言寻找一种库，能将结果以XML/JSON的格式返回给客户端，要么开发人员自行编码来完成此工作。可喜的是JSON已经为各种服务器端语言提供了JSON serializers，并在JSON网站上免费下载。但不幸的是，为了能使它与客户端的库能协调工作，还需做一些客户化的工作。

5)        结论

Dojo和YUI都是将开发人员从底层的DOM层解放出来，提供了一个抽象层。对于喜爱此抽象层的开发人员来说，笔者建议使用Dojo。因为Dojo在很多方面都优于YUI，如性能及功能。而对于那些热衷于DOM且不喜欢这个抽象层的开发人员，笔者建议使用Prototype，因为它可以更好的巩固DOM知识，同时对一些常见的功能提供了API，能提高开发效率。从长远来看，笔者认为Prototype是最合适的。

三、服务器端的Ajax库

基于服务器端的Ajax库都有如下的共同点：

1.         可以在服务器端声明某一方法为一个可调用的Ajax；

2.         可为服务器端的API创建JavaSctipt代码。

从主流到非主流的，每种服务器端语言都具有能够Ajax功能化的服务器端API。而这些服务器端Ajax库可以访问服务端对象，并能以JavaScipt的形式在客户端展示。而本文将讨论以下三种服务器端语言：ASP.NET、PHP、Java。

1)        Java

在Java世界，DWR（Direct Web Remoting）和GWT（Google Web Toolkit）是常见具有Ajax功能的框架。

它们都允许将定义在服务器端的对象上的方法直接暴露给Ajax请求。我们常常在这些服务器端的函数中执行那些必须要在服务器端执行的计算（例如，从数据库查询一个值），然后再将有用的结果返回给客户端。这些框架为从Web浏览器中访问这些函数或方法提供了方便的途径，并且也是将服务器端的领域模型暴露给Web浏览器代码的很好方法。

DWR是一个基于Java的框架，它能够将对象的方法暴露出来。DWR不认为浏览器/WEB服务器协议是重要的，而更乐于保证编程界面的简单自然。对此最大的挑战就是把Ajax的异步特性和正常Java方法调用的同步特性相结合。在异步模式下，结果数据在开始调用之后的一段时间之后才可以访问。DWR解决了这个问题，允许WEB开发人员使用一个特殊的方法参数来指定一个函数，以便在数据返回后来回调此函数。

GWT是一个Java软件开发框架，用于开发类似于Google Maps和Gmail的Ajax应用程序。GWT的设计参考Java AWT包设计，类命名规则、接口设计、事件监听等。可以用Java编程语言开发自己的界面，然后用GWT编译器将Java类转换成适合浏览器执行的JavaScript与HTML。

相对而言，使用DWR很容易上手，同时，相对GWT而言，DWR需用编写的代码量更少。但是，GWT的调试功能比较有优势，同时还有一些其它框架所不具有的功能，如自动支持浏览器的后退功能。

2)        ASP.NET

ASP.NET具在Ajax功能的API是Microsoft的ASP.NET AJAX Extensions（以前叫“Atlas”，免费但不开源）以及Michael Schwarz开发的AjaxPro（免费且开源）。ASP.NET AJAX Extensions是100%的在客户端创建Ajax功能的服务最佳选项。它比较适合于想尽量避免客户端脚本的开发人员。

AjaxPro并不像ASP.NET AJAX Extensions那样提供非常丰富的组件，但在创建客户端可调用的服务器端API时，却经验丰富。

AjaxPro提供一个很简单但非常有效的模型：
     （1）   给某一个方法增加一个属性，从而使该方法具有Ajax调用功能。
     （2） 可以在客户端使用JavaSscript像在服务器端一样调用Ajax功能的方法。
     （3） AjaxPro可以将返回值，如DataSets，以JavaSscript返回给客户端。

3)        PHP

xAjax是最广泛的使用的PHP Ajax，它可以像平常一样编写函数，并通过增加少量的几行代码从而使它Ajax化。就市场份额来看（仍然是根据Ajaxian.com调查），xAjax几乎统计了PHP市场。xAjax的语法简单、简洁。

1

四、 结论

如果读者非常想了解应用程序每行代码的运行情况，那么通过直接调用XHLHttpRequest是最好的办法。但如果想把客户端的JavaScript代码开发人员与服务器端的开发人员进行有效的分离，那么使用Ajax库是最好的选择。

下表是笔者对各种Ajax库及其应用场合的总结，希望对读者在众多的Ajax库中选择出适合自己项目的库。

表2.各种Ajax库的应用范围

Ajax库	应用范围
Dojo	1.         适合于客户端开发人员，希望在客户端与浏览器的DOM之间建立一个强健的抽象层。 2.         适合于客户端开发人员，想使用最少的代码取得最令人难忘的页面效果。
Prototype	1.         客户端开发人员，并想将客户端与浏览器的DOM之间的抽象层最小化。 2.         客户端开发人员，通过使用某个库来加速普通DOM操作任务的开发。
Direct Web Remoting（DWR）	适用于Java开发人员，能快速的建立并运行Ajax功能。
Google Web Toolkit（GWT）	适合Java开发人员，能得到一个强健且易于调试的环境，但需要花费比较多的时间。
ASP.NET AJAX Extensions（“Atlas”）	适用于ASP.NET开发人员，通过服务器端组件来创建Ajax功能，而无需编写JavaScript代码。
AjaxPro	适用于ASP.NET开发人员，用来创建充分的客户端用户体验，只是非常有限的使用服务器端的API调用以获取或发送数据。
xAjax	PHP开发人员

 

当然，开发人员可以混合使用以上各种库，也不失为一种明智的选择。例如，可以使用Dojo来创建非常丰富多彩的客户端功能，同时又可使用DWR来处理Ajax功能。这都是可以联合使用，以充分发挥Ajax的强大功能。