Ajax: A New Approach to Web Applications

Ajax: 开发web应用的新方法

by Jesse James Garrett

February 18, 2005
原文网址：http://adaptivepath.com/ideas/essays/archives/000385.php

阅读这篇首创 Ajax 这个术语的文章。这是所有 Ajax 开发人员的必读文章。

——————————————————————————————————————————————————
If anything about current interaction design can be called “glamorous,” it’s creating Web applications. After all, when was the last time you heard someone rave about the interaction design of a product that wasn’t on the Web? (Okay, besides the iPod.) All the cool, innovative new projects are online.

如果当今开发交互式功能还有值得吸引人的魅力的话，那么应该是其产生了web应用服务。

想想看，你最后一次听到有人抱怨一个产品的交互操作没有基于web是什么时候？现在流行的，有创新味道的项目都开始具有在线功能了。

Despite this, Web interaction designers can’t help but feel a little envious of our colleagues who create desktop software. Desktop applications have a richness and responsiveness that has seemed out of reach on the Web. The same simplicity that enabled the Web’s rapid proliferation also creates a gap between the experiences we can provide and the experiences users can get from a desktop application.

虽然如此，可是web交互功能开发人员不得不有点羡慕那些开发桌面应用软件的同事，因为桌面应用软件具有的更为丰富和有效的交互性，似乎是web应用难以达到的高度。这也就是简单性带来的利弊，它使得web应用得到快速普及的同时也产生了一个代沟：web应用所能提供的操作体验与用户从桌面应用所能获得的体验之间的代沟。

That gap is closing. Take a look at Google Suggest. Watch the way the suggested terms update as you type, almost instantly. Now look at Google Maps. Zoom in. Use your cursor to grab the map and scroll around a bit. Again, everything happens almost instantly, with no waiting for pages to reload.

代沟正在消失。看看Google Suggest，观察一下当我们输入一个词语过程中，提示词语几乎是同时在更新的；再看一下GoogleMaps，用鼠标点住在地图上的一点，稍微滚动一下滑轮进行缩放操作，你能看到它几乎是同时在缩放，不需要我们等待任何页面更新操作。

Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.

Google Suggest 和Google Maps是两个采用了web应用新技术的例子，这个技术我们在Adaptive Path里面称之为Ajax，其是Asynchronous JavaScript +XM的缩写。Ajax可能会代表着web技术上的一次根本转变。

Defining Ajax

Ajax定义

Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:

Ajax不是一门新技术，它由多个在其自身领域已经威名显赫的技术以一种新的更有力的方式组合而成。Ajax包含如下方面：

 

standards-based presentation using XHTML and CSS;

dynamic display and interaction using the Document Object Model;

data interchange and manipulation using XML and XSLT;

asynchronous data retrieval using XMLHttpRequest;

and JavaScript binding everything together.

采用XHTML和CSS进行基于标准的表示方式；

采用DOM(document object model)动态显示和交互操作；

采用XML和XSLT进行数据交换和操作；

采用XMLHttpRequest进行异步数据获取；

采用JavaScript绑定上述技术应用；

 

The classic web application model works like this: Most user actions in the interface trigger an HTTP request back to a web server. The server does some processing — retrieving data, crunching numbers, talking to various legacy systems — and then returns an HTML page to the client. It’s a model adapted from the Web’s original use as a hypertext medium, but as fans of The Elements of User Experience know, what makes the Web good for hypertext doesn’t necessarily make it good for software applications.

经典的web应用模型是这样工作的：通过客户端web界面（网页），用户的动作触发一个HTTP请求到后端的web服务器。服务器做一系列事情：获取数据，分析数据，与各种遗产系统交互，然后返回一个HTML页到客户端。这个web应用模型来源于早期超文本的web应用，但是正如欣赏《the elements of user experience》的读者都知道，能使web更好的发挥超文本功能的特性却不一定也能对应用软件同样有效。


 

Figure 1: The traditional model for web applications (left) compared to the Ajax model (right).

图1，传统的web应用模型（左）与Ajax模型（右）的比较

This approach makes a lot of technical sense, but it doesn’t make for a great user experience. While the server is doing its thing, what’s the user doing? That’s right, waiting. And at every step in a task, the user waits some more.

传统的web工作模式在技术上是可行的，但是它对于用户却没有更大的帮助。当服务器正在处理事情的时候，用户能干什么？对了，就是等待，在每个任务的每一步都需要等待。

Obviously, if we were designing the Web from scratch for applications, we wouldn’t make users wait around. Once an interface is loaded, why should the user interaction come to a halt every time the application needs something from the server? In fact, why should the user see the application go to the server at all?

很显然，如果能够一开始就按照应用软件的模式来设计web，我们就不会让用户在操作中有更多的等待响应。当加载一个页面后，为什么需要让用户在每次的交互操作中当需要从服务器获取东西的时候就要等待呢？事实上，为什么要让用户觉察到web应用与服务器的之间的通信呢？

How Ajax is Different

Ajax有什么不同？

An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true.

Ajax应用将会消除“运行-等待-运行-等待”---web页面交互的固有特性。这种应用是通过引入一个中间媒介来做到的。此中间媒介又称为Ajax引擎，它介于用户层和服务器层之间，似乎看来多增加一层到应用程序将会使得响应更慢，事实却恰恰相反。

Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine — written in JavaScript and usually tucked away in a hidden frame. This engine is responsible for both rendering the interface the user sees and communicating with the server on the user’s behalf. The Ajax engine allows the user’s interaction with the application to happen asynchronously — independent of communication with the server. So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something.

在开始一个任务开始的时候，浏览器不再是加载页面，而是加载一个用JavaScript编写，折叠在隐藏结构里的Ajax引擎。这个引擎负责给用户展示界面和以用户的身份与服务器通信。Ajax引擎允许用户与应用界面之间进行异步交互，其独立于应用界面与服务器之间的通信。因此用户再也不会看到当一个操作发送后为了等待服务器的响应而出现的空白浏览器窗口和沙漏。


 

Figure 2: The synchronous interaction pattern of a traditional web application (top) compared with the asynchronous pattern of an Ajax application (bottom).

图2：传统web应用的同步交互模式（上）与Ajax应用的异步模式（底）比较

Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn’t require a trip back to the server — such as simple data validation, editing data in memory, and even some navigation — the engine handles on its own. If the engine needs something from the server in order to respond — if it’s submitting data for processing, loading additional interface code, or retrieving new data — the engine makes those requests asynchronously, usually using XML, without stalling a user’s interaction with the application.

每一个用户动作，通产会产生一个HTTP请求，这个请求转而采用javascript形式去调用Ajax引擎。对于一些可以不需要服务器响应的用户动作，比如简单的数据验证，在内存里编辑数据，甚至一些导航操作等，Ajax引擎就自己处理了。如果需要从服务器获得数据来响应客户，比如引擎向服务器提交需要处理的数据，加载其它界面代码，或者获取新的数据等，这时引擎会使用XML来异步地提出这些请求的，而不会阻塞用户与应用之间的交互操作。

Who’s Using Ajax

谁来用Ajax？

Google is making a huge investment in developing the Ajax approach. All of the major products Google has introduced over the last year — Orkut, Gmail, the latest beta version of Google Groups, Google Suggest, and Google Maps — are Ajax applications. (For more on the technical nuts and bolts of these Ajax implementations, check out these excellent analyses of Gmail, Google Suggest, and Google Maps.) Others are following suit: many of the features that people love in Flickr depend on Ajax, and Amazon’s A9.com search engine applies similar techniques.

Google正为Ajax技术运用进行大量的投入，去年至今Google推出的几个重要产品都是采用了Ajax技术，如Orkut,Gmail,最新的beta版本Google Groups，Google Suggest 和Google Maps。（想获得更多关于这些Ajax产品运用的技术细节，可以查看关于Gmail,Google Suggest和Google Maps的一些分析。）还有一些其它的工具包例子，比如Flickr许多让人着迷的特性也是采用Ajax开发的，还有Amazon（亚马逊）的A9.com搜索引擎也采用了类似的技术。

These projects demonstrate that Ajax is not only technically sound, but also practical for real-world applications. This isn’t another technology that only works in a laboratory. And Ajax applications can be any size, from the very simple, single-function Google Suggest to the very complex and sophisticated Google Maps.

这些事例表明Ajax不只是纯粹的技术术语，而是能够实实在在地用于真实的世界。它不是那种仅仅存在于实验室的技术。Ajax的应用广阔，从功能非常简单的Google Suggest到非常复杂和智能的Google Maps，无所不可。

At Adaptive Path, we’ve been doing our own work with Ajax over the last several months, and we’re realizing we’ve only scratched the surface of the rich interaction and responsiveness that Ajax applications can provide. Ajax is an important development for Web applications, and its importance is only going to grow. And because there are so many developers out there who already know how to use these technologies, we expect to see many more organizations following Google’s lead in reaping the competitive advantage Ajax provides.

在Adaptive Path（公司），我们接触Ajax已经有几个月了，并且意识到目前我们只是使用了它能够为应用所提供的非常丰富的交互和响应功能的一小部分而已。Ajax是web应用的重要发展，而其重要性才刚刚显现。随着越来越多的开发人员熟悉如何使用Ajax，我们期望着更多的组织能够在Google的领导下收获Ajax所带来的巨大收益。

Moving Forward

向前看

The biggest challenges in creating Ajax applications are not technical. The core Ajax technologies are mature, stable, and well understood. Instead, the challenges are for the designers of these applications: to forget what we think we know about the limitations of the Web, and begin to imagine a wider, richer range of possibilities.

开发Ajax应用的最大挑战不是技术本身，Ajax的核心技术已经是成熟的，稳定的，易于理解的。其挑战是来自于开发者，因为在开发Ajax应用的时候，需要开发者抛开以前老式的关于web种种不足的观念，开始去利用web来构思功能更加强大，交互性更好的各种可能的应用。

It’s going to be fun.它会给我们带来乐趣。