AJAX初探

一、AJAX是什么

尽管我对Web技术不甚熟悉，但还是对近年来红红火火的AJAX有所耳闻。今天，由于工作原因，我对其了解了一番。

AJAX是Asynchronous JavaScript + XML的缩写，它并不是一种新技术，而是一系列原有Web技术的集合，主要包括以下几个方面的内容：

1. 使用XHTML和CSS(Cascading Style Sheet)等处理页面显示；
2. 使用DOM(Document Object Model)处理页面动态显示和交互；
3. 使用XML(eXtensible Markup Language)和XSLT(eXtensible Stylesheet Language Transformations)进行数据交换和操作；
4. 使用XMLHttpRequest组件实现数据的异步获取；
5. 使用JavaScript将以上各项技术融合在一起；

可以看出，AJAX所依赖的都是为人熟知的技术，但为什么这一两年来才变得如此流行呢？这一方面要得益于Jesse James Garrett对AJAX的命名，有了名字，才便于交流和推广，而另一方面则要归咎于Google在Gmail以及Maps等项目中对AJAX的大量使用。

AJAX与传统Web应用的差别如下图所示：

个人认为AJAX所要达到的目的主要有两个：

1. 丰富的界面
2. 良好的交互

实际上，针对这两点有个宽泛的名词：RIA（Rich Internet Application），即我们通常所说的Internet富客户端，它使Web页面看上去更像桌面程序，让用户有更好的体验。而AJAX可以看作是RIA的一种实现方式，RIA还有另外的实现方式，比如Adobe/Macromedia的Flex技术。现在，人们在某些情况下已经将AJAX的外延扩大到了RIA。

从CS到BS，再到RIA，这让我们看到了事物的变化与轮回，我将另外攥文探讨一下CS与BS的关系与差异。

二、AJAX开发资源

虽然AJAX并不难，但由于涉及的技术点比较多，在实现时难免有些繁杂，为此诞生了很多库或者框架来减轻人们开发AJAX的负担，像Microsoft、Google、Yahoo这样的大公司都加入了开发者的行列，其火热程度可见一斑。

AJAX/RIA相关的开发资源如下：

1. JavaScript基础类库

这类类库都比较小巧，主要是对JavaScript进行封装，使其更好用。

1) prototype

说明：较早的一个JavaScript基础类库，提供一个70K左右的单一文件，比较简洁，适合熟悉JS的人员在其上构建更高级的应用。

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

2) jQuery

说明：在prototype之后的JavaScript基础类库，比prototype更小巧，不到60K，压缩版本只有20K。允许通过CSS选择器和XPath来获取网页元素，使事件处理代码可以与界面完全脱离开来，受到不少人的青睐。

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

2. JavaScript高级类库

这类类库拥有比较完整的体系，提供了界面控件、事件处理等方面的内容，适合开发大型项目。

3) Dojo

说明：较早出现，提供了丰富的窗体部件以及事件处理、拖放操作、RPC等机制，可以按需下载所需的JS代码。

Dojo is an Open Source DHTML toolkit written in JavaScript. It builds on several contributed code bases (nWidgets, Burstlib, f(m)), which is why we refer to it sometimes as a "unified" toolkit. Dojo aims to solve some long-standing historical problems with DHTML which prevented mass adoption of dynamic web application development.

4) YUI(Yahoo User Interface)

说明：同Dojo很类似，但开发资源更丰富，发展更迅速。

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.

3. 依赖其它语言的AJAX框架

这类框架跳出了单一使用JavaScript的范畴，需要在开发或者运行时用到其他语言。

1) GWT(Google Web Toolkit)

说明：通过Java开发Web程序，GWT将Java代码转换成JavaScript和HTML，优点是便于调试，缺点是定制个性化的界面比较麻烦。这对于熟悉Java的开发人员可能有用，但则让原有的Web开发人员感觉别扭。

Google Web Toolkit (GWT) is an open source Java software development framework that makes writing AJAX applications like Google Maps and Gmail easy for developers who don't speak browser quirks as a second language. Writing dynamic web applications today is a tedious and error-prone process; you spend 90% of your time working around subtle incompatibilities between web browsers and platforms, and JavaScript's lack of modularity makes sharing, testing, and reusing AJAX components difficult and fragile.

GWT lets you avoid many of these headaches while offering your users the same dynamic, standards-compliant experience. You write your front end in the Java programming language, and the GWT compiler converts your Java classes to browser-compliant JavaScript and HTML.

2) Atlas(MicroSoft ASP.NET Ajax)

说明：位于ASP.NET体系内的AJAX框架。微软总是后来居上，其“优势”是可以把东西做得很庞大，并且有较好的参考资料。

ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.

With ASP.NET AJAX, you can:

Create next-generation interfaces with reusable AJAX components.
Enhance existing Web pages using powerful AJAX controls with support for all modern browsers.
Continue using Visual Studio 2005 to take your ASP.NET 2.0 sites to the next level.
Access remote services and data directly from the browser without writing a ton of complicated script.

3) DWR(Direct Web Remoting)

说明：类似于RPC，客户端的JavaScript调用被映射到服务器端的Java Servlet程序。

DWR is a Java open source library which allows you to write Ajax web sites.

It allows code in a browser to use Java functions running on a web server just as if it was in the browser.

DWR consists of two main parts:

A Java Servlet running on the server that processes requests and sends responses back to the browser.
JavaScript running in the browser that sends requests and can dynamically update the webpage.
DWR works by dynamically generating Javascript based on Java classes. The code does some Ajax magic to make it feel like the execution is happening on the browser, but in reality the server is executing the code and DWR is marshalling the data back and forwards.

This method of remoting functions from Java to JavaScript gives DWR users a feel much like conventional RPC mechanisms like RMI or SOAP, with the benefit that it runs over the web without requiring web-browser plug-ins.

4) Wt

说明：面向C++的Web应用开发框架，跟GWT/DWR有些类似，它提供了一套C++的Web控件库，使得开发Web应用就像跟开发桌面应用一样，开发后的程序以Fast CGI方式运行。

Wt (pronounced 'witty'), is a C++ library to develop web applications.

The API is widget-centric, and inspired by existing C++ Graphical User Interface APIs. To the developer, it offers complete abstraction of any web-specific implementation details.

The responsibility of writing browser-portable web applications is transferred to the library implementation. For example, if available, Wt will maximally use JavaScript and AJAX, but applications developed with Wt will also function correctly when AJAX is not available, or when JavaScript is disabled, reverting to a different methods for communication between browser and server. An application developed with Wt is technology-agnostic. In addition, by having complete control over the generated HTML/JavaScript, Wt checks that no XSS attacks are inserted into the web page.

4. 下一代RIA技术

1) Flex

说明：Adobe公司推出的与Flash结合的RIA技术，它采用MXML描述界面，使用Flash对界面进行呈现。

Adobe implemented Flex as an ActionScript class library. That class library contains components (containers and controls), manager classes, data-service classes, and classes for all other features. You develop applications by using the MXML and ActionScript languages with the class library.

MXML is an XML language that you use to lay out user-interface components for Adobe Flex applications. You also use MXML to declaratively define nonvisual aspects of an application, such as access to server-side data sources and data bindings between user-interface components and data sources.

2) WPF/E(Windows Presentation Foundation Everywhere)

说明：WPF是微软在Vista中引入的新的UI技术，它采用XAML(eXtensible Application Markup Lanuage)来描述界面，通过专门的引擎来渲染，使UI更易开发和维护。而WPF/E为WPF的一个子集，用于创建丰富的、具有绚丽视觉效果的Web交互式体验，并且可以随处实现：无论是在浏览器内、在多个设备上还是在桌面操作系统。

WPF/E is a browser plug-in that augments the set of functionality provided by HTML to provide media, animation and vector graphics with the same programming model that the HTML DOM exposes.  This CTP of WPF/E is not a UI technology that replaces HTML, it augments the capabilities.

5. AJAX开发工具

1) Aptana

The Aptana IDE is a free, open-source, cross-platform, JavaScript-focused development environment for building Ajax applications. It features code assist on JavaScript, HTML, and CSS languages, FTP/SFTP support and a JavaScript debugger to troubleshoot your code.

三、参考资料

1. Ajax: A New Approach to Web Applications
2. Watch this: Ajax, YUI and Web 2.0
3. What is WPF/E really?