Ajax : A New Approach to Web Applications(Ajax : 一种网络应用的新理念)

(FROM:http://www.javayou.com/showlog.jspe?log_id=743)
Ajax : A New Approach to Web Applications

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. 

如果要用“充满魅力”这样的词来形容当前一种流行的交互设计，那么它一定是创建一个网络应用。毕竟，当你最后一次听到某人倾倒于的交互体验，岂非不是在网上？(Okay，我承认iPod 除外。)所有追求酷，追求创新的新项目都尽力 Online。

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应用迅速蔓延，但糟糕的用户体验相较于桌面应用也仿佛有着一道鸿沟。

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。根据你键下的字母相关的关键字提示便马上即时出现。我们再看Google Maps。操作你的鼠标在刻度线上移动来放大地图或者缩小，所有的一切几乎都是即时的，完全不用等待页面的刷新。

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 就是这种新型网络应用的两个例子，我在Adaptive Path 上把这种理念成为 Ajax。也就是Asynchronous JavaScript + XML 的简写，它预示着Web 可能发生一个重要的变化。

Defining Ajax

Ajax 的定义

and 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. 

经典的网络应用模型工作方式如下： 大多数的用户动作在界面上激发一个HTTP请求到 web 服务器。服务器做一些处理 — 获取数据，捣弄数字，与现有的应用系统沟通一番 — 最后返回 HTML 到客户端。这样的模型适合于以超文本为基础的Web 应用，但作为一个强调用户体验的狂热分子(The Elements of User Experience 一书的拥护者)，我们认为超文本造就Web 成功的东西，却并不一定满足软件应用的要求。

Figure 1: The traditional model for web applications (left) compared to the Ajax model (right).
图1：网络应用的传统模型（左图）与 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.

传统的网络应用模型技术上来说意义非凡，但它并不适用于创建完美的用户体验。当服务器在做数据处理的时候，用户在干什么呢？ 没错，他们在等待。一个任务所需的步骤越多，用户需要等待的次数也越多。

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?

显然，当我们设计网络应用的时候，我们不应该让用户傻等。界面一旦加载完成，为什么还要因为程序需要从服务器传输一些东西而中断用户的交互？更极端些，用户为什么要看到程序与服务器的联系。

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 的应用摒弃了 开-关-开-关 的交互形式，引入了一个中间件 — 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.

不同于加载一个网页，用户会话一旦建立，浏览器就加载一个 Ajax引擎 — 由JavaScript 编写的并通常放置在一个隐藏帧内。引擎的责任包括构造用户操作界面以及与服务器的沟通。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应用（上）的同步交互模型与 Ajox 应用（下）的异步模型的比较

 

 

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引擎。给用户的回应不用等到服务器处理后返回 — 比如简单的数据校验，在内存中编辑数据，甚至一些导航功能 — 都直接由引擎来处理。如果引擎需要从服务器获取些什么 — 提交数据给服务器处理，加载额外的的界面代码，或者获取新数据 — 引擎通常以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 推出的几大产品 — Orkut， Gmail,，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所能带来的非凡体验的一点皮毛。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 的核心技术是成熟的，稳定的并被广泛应用着。重新面临这些挑战是应用设计师们： 忘掉所有我们所熟知的 Web 的限制，去想像一个更宽广，更深远的可能。

It’s going to be fun.

接下来发生的事会很有趣……  

Ajax Q&A

March 13, 2005: Since Jesse’s essay was first published, he received an enormous amount of correspondence from readers with questions about Ajax . In this Q&A, Jesse responds to some of the most common queries.

自从 Jesse’s 发表了该文章，他就收到了不计其数的的询问Ajax问题的信件，Jesse 回复了其中有代表性的问题并整理成 Q&A。 

Q. Did Adaptive Path invent Ajax ? Did Google? Did Adaptive Path help build Google’s Ajax applications?
A. Neither Adaptive Path nor Google invented Ajax . Google’s recent products are simply the highest-profile examples of Ajax applications. Adaptive Path was not involved in the development of Google’s Ajax applications, but we have been doing Ajax work for some of our other clients.  

Q 是Adaptive Path 发明了 Ajax ？ 还是 Google ？ Adaptive Path 是否协助开发了 Google 的 Ajax 的应用？ 
A. Ajax 并不是由Adaptive Path 或者 Google 发明的。Google 最新的产品是Ajax应用的最具代表性的例子。Adaptive Path 没有参与 Google 的开发，但我们在为其他的一些客户做一些Ajax 相关的工作。 

 

Q. Is Adaptive Path selling Ajax components or trademarking the name? Where can I download it? 
A. Ajax isn’t something you can download. It’s an approach — a way of thinking about the architecture of web applications using certain technologies. Neither the Ajax name nor the approach are proprietary to Adaptive Path.  

Q. Adaptive Path 会销售 Ajax 组件或者注册 Ajax 这个商标吗，我从哪里可以下载到它？ 
A. Ajax 并不是一个具体的软件或程序，它是一种理念 — 关于用合理的技术搭建网络应用架构的思考。Ajax 这个名称和它的理念都不是Adaptive Path 私有的。 

Q. Is Ajax just another name for XMLHttpRequest?
A. No. XMLHttpRequest is only part of the Ajax equation. XMLHttpRequest is the technical component that makes the asynchronous server communication possible; Ajax is our name for the overall approach described in the article, which relies not only on XMLHttpRequest, but on CSS, DOM, and other technologies.

Q. Ajax 只不过是XMLHttpRequest 的别名吗？
A. 不是. XMLHttpRequest 只是 Ajax的一个组成部分. XMLHttpRequest 让客户端与服务器的异步通讯成为可能； Ajax 是本文描述的一个整体理念, 它不仅依赖于 XMLHttpRequest， 还包括 CSS，DOM和其他技术等等。

Q. Why did you feel the need to give this a name? 
A. I needed something shorter than “Asynchronous JavaScript+CSS+DOM+XMLHttpRequest” to use when discussing this approach with clients.  

Q. 为什么你会起这么个名字?
A. 我需要一个简短的表示 “Asynchronous JavaScript+CSS+DOM+XMLHttpRequest” 的新词来与客户谈我的理念。

 

Q. Techniques for asynchronous server communication have been around for years. What makes Ajax a “new” approach? 
A. What’s new is the prominent use of these techniques in real-world applications to change the fundamental interaction model of the Web. Ajax is taking hold now because these technologies and the industry’s understanding of how to deploy them most effectively have taken time to develop.  

Q. 与服务器异步通讯的技术产生很多年了，Ajax 何以称为新理念？ 
A. Ajax包含的技术被大量应用在现实世界中以至于改变了 Web 的基础交互模式是一个新现象。 Ajax 是针对现在而言，因为这些技术离工业化应用还需要很多时间去开发。

Q. Is Ajax a technology platform or is it an architectural style? 
A. It’s both. Ajax is a set of technologies being used together in a particular way.  

Q. Ajax是一个技术平台或者架构吗？ 
A. 都是. Ajax 是一系列技术的无缝集合。  

Q. What kinds of applications is Ajax best suited for?
A. We don’t know yet. Because this is a relatively new approach, our understanding of where Ajax can best be applied is still in its infancy. Sometimes the traditional web application model is the most appropriate solution to a problem. 

Q. Ajax 最适合于什么样的应用？
A. 我也不知道。因为这是一个相当新的理念， 就我们的理解Ajax 应用还处于初期阶段。有时候传统的网络应用模型可能更为适合。 

Q. Does this mean Adaptive Path is anti-Flash? 
A. Not at all. Macromedia is an Adaptive Path client, and we’ve long been supporters of Flash technology. As Ajax matures, we expect that sometimes Ajax will be the better solution to a particular problem, and sometimes Flash will be the better solution. We’re also interested in exploring ways the technologies can be mixed (as in the case of Flickr, which uses both). 

Q. 是否可以理解为Adaptive Path 反对 Flash？ 
A. 完全不是。 Macromedia 是 Adaptive Path 的客户之一， 并且我们长期为 Flash 技术做技术支持。 待Ajax成熟后，我以为对于具体的问题， Ajax有时候会是一个更好的解决方案， 同样有时候Flash 也许做得更好。 我们也有兴趣探讨两者的结合。(比如 Flickr ，它结合了两者)。

Q. Does Ajax have significant accessibility or browser compatibility limitations? Do Ajax applications break the back button? Is Ajax compatible with REST? Are there security considerations with Ajax development? Can Ajax applications be made to work for users who have JavaScript turned off? 
A. The answer to all of these questions is “maybe”. Many developers are already working on ways to address these concerns. We think there’s more work to be done to determine all the limitations of Ajax, and we expect the Ajax development community to uncover more issues like these along the way. 

Q. Ajax在易用性和浏览器兼容性上是否有限制? Ajax是否会与后退按钮冲突? Ajax 与 REST(雷达电子扫描技术?)兼容吗? Ajax的开发有哪些安全考虑呢? Ajax能为那些禁止Javascript运行的用户工作吗? 
A.所有这些问题的答案，我只能说“可能”. 已经有很多的开发者着手这些方面的工作。要测评出Ajax的所有限制我想还需要做很多工作，我们希望 Ajax 开发社区能揭示更多的信息。

Q. Some of the Google examples you cite don’t use XML at all. Do I have to use XML and/or XSLT in an Ajax application?
A. No. XML is the most fully-developed means of getting data in and out of an Ajax client, but there’s no reason you couldn’t accomplish the same effects using a technology like JavaScript Object Notation or any similar means of structuring data for interchange. 

Q. 你所提到的Google 的一些应用中实际上并没有使用 XML。我一定要在 Ajax 应用中使用 XML 或者XSLT吗？ 
A. 不是，对于Ajax客户端，XML作为数据交换的载体是支持最为完善的(XMLHttpRequest, DOM支持)。当然，你没有理由不接受可以达到同样效果的技术，例如 JavaScript Object Notation 或者其他类似的数据交换的格式。

Q. Are Ajax applications easier to develop than traditional web applications? 
A. Not necessarily. Ajax applications inevitably involve running complex JavaScript code on the client. Making that complex code efficient and bug-free is not a task to be taken lightly, and better development tools and frameworks will be needed to help us meet that challenge. 

Q. Ajax 应用比传统的网络应用方便开发吗? 
A. 也不尽然. Ajax 的应用不可避免要在客户端运行复杂的JavaScript 脚本. 编写复杂同时高效稳定的脚本并不是一件容易的事情, 优秀的开发工具和框架能帮助我们接受这一挑战。

Q. Do Ajax applications always deliver a better experience than traditional web applications? 
A. Not necessarily. Ajax gives interaction designers more flexibility. However, the more power we have, the more caution we must use in exercising it. We must be careful to use Ajax to enhance the user experience of our applications, not degrade it.

Q. Ajax 的应用总是比传统的网络应用更友好吗？ 
A. 不一定，Ajax 给交互设计人员更多的灵活性。能力越大，责任也越大：）。我们必须小心使用 Ajax 去改善用户体验，而不是把它弄得更糟。