Ajax : A New Approach to Web Applications
Ajax : 一種網(wǎng)絡應用的新理念
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.
如果要用“充滿魅力”這樣的詞來形容當前一種流行的交互設計，那么它一定是創(chuàng)建一個網(wǎng)絡應用。畢竟，當你最后一次聽到某人傾倒于的交互體驗，豈非不是在網(wǎng)上？(Okay，我承認iPod 除外。)所有追求酷，追求創(chuàng)新的新項目都盡力 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.
盡管如此，網(wǎng)頁設計師們還是不可避免的對創(chuàng)建桌面應用軟件的同事懷有一絲妒忌。桌面應用所擁有的豐富的資源和支持似乎是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.
但現(xiàn)在，這道鴻溝正被逐漸填平著。讓我們看看Google Suggest。根據(jù)你鍵下的字母相關的關鍵字提示便馬上即時出現(xiàn)。我們再看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 就是這種新型網(wǎng)絡應用的兩個例子，我在Adaptive Path 上把這種理念成為 Ajax。也就是Asynchronous JavaScript + XML 的簡寫，它預示著Web 可能發(fā)生一個重要的變化。
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 并不是一種新技術，它實際上是幾種已經(jīng)在各自領域大行其道的技術的強強結合。Ajax具體的組成部分如下：
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.
經(jīng)典的網(wǎng)絡應用模型工作方式如下： 大多數(shù)的用戶動作在界面上激發(fā)一個HTTP請求到 web 服務器。服務器做一些處理 — 獲取數(shù)據(jù)，搗弄數(shù)字，與現(xiàn)有的應用系統(tǒng)溝通一番 — 最后返回 HTML 到客戶端。這樣的模型適合于以超文本為基礎的Web 應用，但作為一個強調(diào)用戶體驗的狂熱分子(The Elements of User Experience 一書的擁護者)，我們認為超文本造就Web 成功的東西，卻并不一定滿足軟件應用的要求。
Figure 1: The traditional model for web applications (left) compared to the Ajax model (right).
圖1：網(wǎng)絡應用的傳統(tǒng)模型（左圖）與 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.
傳統(tǒng)的網(wǎng)絡應用模型技術上來說意義非凡，但它并不適用于創(chuàng)建完美的用戶體驗。當服務器在做數(shù)據(jù)處理的時候，用戶在干什么呢？ 沒錯，他們在等待。一個任務所需的步驟越多，用戶需要等待的次數(shù)也越多。
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?
顯然，當我們設計網(wǎng)絡應用的時候，我們不應該讓用戶傻等。界面一旦加載完成，為什么還要因為程序需要從服務器傳輸一些東西而中斷用戶的交互？更極端些，用戶為什么要看到程序與服務器的聯(lián)系。
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.
不同于加載一個網(wǎng)頁，用戶會話一旦建立，瀏覽器就加載一個 Ajax引擎 — 由JavaScript 編寫的并通常放置在一個隱藏幀內(nèi)。引擎的責任包括構造用戶操作界面以及與服務器的溝通。Ajax引擎允許用戶與應用的交互異步進行 — 而無須直接訪問服務器。所以用戶永遠不會在服務器處理數(shù)據(jù)期間瞪眼面對一個白屏和沙漏圖標。
Figure 2: The synchronous interaction pattern of a traditional web application (top) compared with the asynchronous pattern of an Ajax application (bottom).
圖2：傳統(tǒng)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.
用戶動作的處理由傳統(tǒng)的通過表單提交來激發(fā)一個HTTP請求，變?yōu)?/SPAN> Javascript 調(diào)用 Ajax引擎。給用戶的回應不用等到服務器處理后返回 — 比如簡單的數(shù)據(jù)校驗，在內(nèi)存中編輯數(shù)據(jù)，甚至一些導航功能 — 都直接由引擎來處理。如果引擎需要從服務器獲取些什么 — 提交數(shù)據(jù)給服務器處理，加載額外的的界面代碼，或者獲取新數(shù)據(jù) — 引擎通常以XML格式激發(fā)一個異步的請求，用戶端完全沒有被中斷的感覺。
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 開發(fā)方式上。去年 Google 推出的幾大產(chǎn)品 — Orkut， Gmail,，Google Groups 最終測試版，Google Suggest， 和 Google Maps — 都是基于Ajax 的應用。(想知道更多實現(xiàn)細節(jié)，可以去看看這些精彩的分析：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 并不是一個技術性的實驗品，它可以實踐在現(xiàn)實世界的應用中。它不是又一種只能在實驗室中工作的技術。Ajax適用于各種規(guī)模的應用，從簡單的一個函數(shù)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，我們已經(jīng)基于Ajax的理念工作了好幾個月，我們意識到我們也僅僅是接觸到Ajax所能帶來的非凡體驗的一點皮毛。Ajax 是Web 應用的一個重要發(fā)展，并且其重要性還在逐步增長。因為許多開發(fā)人員已經(jīng)熟悉Ajax 所包含的技術， 我們期望看到更多的組織能夠象Google那樣通過Ajax獲得更大的競爭優(yōu)勢。
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.
創(chuàng)建Ajax應用所面臨的最大挑戰(zhàn)并不在技術上。Ajax 的核心技術是成熟的，穩(wěn)定的并被廣泛應用著。重新面臨這些挑戰(zhàn)是應用設計師們： 忘掉所有我們所熟知的 Web 的限制，去想像一個更寬廣，更深遠的可能。
It’s going to be fun.
接下來發(fā)生的事會很有趣……
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 發(fā)表了該文章，他就收到了不計其數(shù)的的詢問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 發(fā)明了 Ajax ？ 還是 Google ？ Adaptive Path 是否協(xié)助開發(fā)了 Google 的 Ajax 的應用？
A. Ajax 并不是由Adaptive Path 或者 Google 發(fā)明的。Google 最新的產(chǎn)品是Ajax應用的最具代表性的例子。Adaptive Path 沒有參與 Google 的開發(fā)，但我們在為其他的一些客戶做一些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 并不是一個具體的軟件或程序，它是一種理念 — 關于用合理的技術搭建網(wǎng)絡應用架構的思考。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. 與服務器異步通訊的技術產(chǎn)生很多年了，Ajax 何以稱為新理念？
A. Ajax包含的技術被大量應用在現(xiàn)實世界中以至于改變了 Web 的基礎交互模式是一個新現(xiàn)象。 Ajax 是針對現(xiàn)在而言，因為這些技術離工業(yè)化應用還需要很多時間去開發(fā)。
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 應用還處于初期階段。有時候傳統(tǒng)的網(wǎng)絡應用模型可能更為適合。
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的開發(fā)有哪些安全考慮呢? Ajax能為那些禁止Javascript運行的用戶工作嗎?
A.所有這些問題的答案，我只能說“可能”. 已經(jīng)有很多的開發(fā)者著手這些方面的工作。要測評出Ajax的所有限制我想還需要做很多工作，我們希望 Ajax 開發(fā)社區(qū)能揭示更多的信息。
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作為數(shù)據(jù)交換的載體是支持最為完善的(XMLHttpRequest, DOM支持)。當然，你沒有理由不接受可以達到同樣效果的技術，例如 JavaScript Object Notation 或者其他類似的數(shù)據(jù)交換的格式。
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 應用比傳統(tǒng)的網(wǎng)絡應用方便開發(fā)嗎?
A. 也不盡然. Ajax 的應用不可避免要在客戶端運行復雜的JavaScript 腳本. 編寫復雜同時高效穩(wěn)定的腳本并不是一件容易的事情, 優(yōu)秀的開發(fā)工具和框架能幫助我們接受這一挑戰(zhàn)。
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 的應用總是比傳統(tǒng)的網(wǎng)絡應用更友好嗎？
A. 不一定，Ajax 給交互設計人員更多的靈活性。能力越大，責任也越大：）。我們必須小心使用 Ajax 去改善用戶體驗，而不是把它弄得更糟。