Ajax : A New Approach to Web Applications
Ajax : 一種網(wǎng)絡(luò)應(yī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.
如果要用“充滿魅力”這樣的詞來形容當(dāng)前一種流行的交互設(shè)計，那么它一定是創(chuàng)建一個網(wǎng)絡(luò)應(yīng)用。畢竟，當(dāng)你最后一次聽到某人傾倒于的交互體驗，豈非不是在網(wǎng)上？(Okay，我承認(rèn)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)頁設(shè)計師們還是不可避免的對創(chuàng)建桌面應(yīng)用軟件的同事懷有一絲妒忌。桌面應(yīng)用所擁有的豐富的資源和支持似乎是Web目前無法達(dá)到的。簡單讓Web應(yīng)用迅速蔓延，但糟糕的用戶體驗相較于桌面應(yīng)用也仿佛有著一道鴻溝。
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ù)你鍵下的字母相關(guān)的關(guān)鍵字提示便馬上即時出現(xiàn)。我們再看Google Maps。操作你的鼠標(biāo)在刻度線上移動來放大地圖或者縮小，所有的一切幾乎都是即時的，完全不用等待頁面的刷新。
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)絡(luò)應(yīng)用的兩個例子，我在Adaptive Path 上把這種理念成為 Ajax。也就是Asynchronous JavaScript + XML 的簡寫，它預(yù)示著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 并不是一種新技術(shù)，它實際上是幾種已經(jīng)在各自領(lǐng)域大行其道的技術(shù)的強(qiáng)強(qiáng)結(jié)合。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)絡(luò)應(yīng)用模型工作方式如下： 大多數(shù)的用戶動作在界面上激發(fā)一個HTTP請求到 web 服務(wù)器。服務(wù)器做一些處理 — 獲取數(shù)據(jù)，搗弄數(shù)字，與現(xiàn)有的應(yīng)用系統(tǒng)溝通一番 — 最后返回 HTML 到客戶端。這樣的模型適合于以超文本為基礎(chǔ)的Web 應(yīng)用，但作為一個強(qiáng)調(diào)用戶體驗的狂熱分子(The Elements of User Experience 一書的擁護(hù)者)，我們認(rèn)為超文本造就Web 成功的東西，卻并不一定滿足軟件應(yīng)用的要求。
Figure 1: The traditional model for web applications (left) compared to the Ajax model (right).
圖1：網(wǎng)絡(luò)應(yī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)絡(luò)應(yīng)用模型技術(shù)上來說意義非凡，但它并不適用于創(chuàng)建完美的用戶體驗。當(dāng)服務(wù)器在做數(shù)據(jù)處理的時候，用戶在干什么呢？ 沒錯，他們在等待。一個任務(wù)所需的步驟越多，用戶需要等待的次數(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?
顯然，當(dāng)我們設(shè)計網(wǎng)絡(luò)應(yīng)用的時候，我們不應(yīng)該讓用戶傻等。界面一旦加載完成，為什么還要因為程序需要從服務(wù)器傳輸一些東西而中斷用戶的交互？更極端些，用戶為什么要看到程序與服務(wù)器的聯(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 的應(yīng)用摒棄了 開-關(guān)-開-關(guān) 的交互形式，引入了一個中間件 — Ajax 引擎 — 在用戶與服務(wù)器之間。看上去好像在操作上加一個層面會減少響應(yīng), 實際上恰好相反
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)。引擎的責(zé)任包括構(gòu)造用戶操作界面以及與服務(wù)器的溝通。Ajax引擎允許用戶與應(yīng)用的交互異步進(jìn)行 — 而無須直接訪問服務(wù)器。所以用戶永遠(yuǎn)不會在服務(wù)器處理數(shù)據(jù)期間瞪眼面對一個白屏和沙漏圖標(biāo)。
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應(yīng)用（上）的同步交互模型與 Ajox 應(yīng)用（下）的異步模型的比較
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引擎。給用戶的回應(yīng)不用等到服務(wù)器處理后返回 — 比如簡單的數(shù)據(jù)校驗，在內(nèi)存中編輯數(shù)據(jù)，甚至一些導(dǎo)航功能 — 都直接由引擎來處理。如果引擎需要從服務(wù)器獲取些什么 — 提交數(shù)據(jù)給服務(wù)器處理，加載額外的的界面代碼，或者獲取新數(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 的應(yīng)用。(想知道更多實現(xiàn)細(xì)節(jié)，可以去看看這些精彩的分析：Gmail, Google Suggest, 和 Google Maps。)其他還包括： 有著很多備受人們贊譽(yù)的特性的Flickr基于Ajax，Amazon 的 A9.com 搜索引擎也使用了類似的技術(shù)。
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 并不是一個技術(shù)性的實驗品，它可以實踐在現(xiàn)實世界的應(yīng)用中。它不是又一種只能在實驗室中工作的技術(shù)。Ajax適用于各種規(guī)模的應(yīng)用，從簡單的一個函數(shù)Google Suggest 到 非常復(fù)雜的項目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所能帶來的非凡體驗的一點(diǎn)皮毛。Ajax 是Web 應(yīng)用的一個重要發(fā)展，并且其重要性還在逐步增長。因為許多開發(fā)人員已經(jīng)熟悉Ajax 所包含的技術(shù)， 我們期望看到更多的組織能夠象Google那樣通過Ajax獲得更大的競爭優(yōu)勢。
Moving Forward
更進(jìn)一步
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應(yīng)用所面臨的最大挑戰(zhàn)并不在技術(shù)上。Ajax 的核心技術(shù)是成熟的，穩(wěn)定的并被廣泛應(yīng)用著。重新面臨這些挑戰(zhàn)是應(yīng)用設(shè)計師們： 忘掉所有我們所熟知的 Web 的限制，去想像一個更寬廣，更深遠(yuǎn)的可能。
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 回復(fù)了其中有代表性的問題并整理成 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 的應(yīng)用？
A. Ajax 并不是由Adaptive Path 或者 Google 發(fā)明的。Google 最新的產(chǎn)品是Ajax應(yīng)用的最具代表性的例子。Adaptive Path 沒有參與 Google 的開發(fā)，但我們在為其他的一些客戶做一些Ajax 相關(guān)的工作。
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 這個商標(biāo)嗎，我從哪里可以下載到它？
A. Ajax 并不是一個具體的軟件或程序，它是一種理念 — 關(guān)于用合理的技術(shù)搭建網(wǎng)絡(luò)應(yīng)用架構(gòu)的思考。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 讓客戶端與服務(wù)器的異步通訊成為可能； Ajax 是本文描述的一個整體理念, 它不僅依賴于 XMLHttpRequest， 還包括 CSS，DOM和其他技術(shù)等等。
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. 與服務(wù)器異步通訊的技術(shù)產(chǎn)生很多年了，Ajax 何以稱為新理念？
A. Ajax包含的技術(shù)被大量應(yīng)用在現(xiàn)實世界中以至于改變了 Web 的基礎(chǔ)交互模式是一個新現(xiàn)象。 Ajax 是針對現(xiàn)在而言，因為這些技術(shù)離工業(yè)化應(yīng)用還需要很多時間去開發(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是一個技術(shù)平臺或者架構(gòu)嗎？
A. 都是. Ajax 是一系列技術(shù)的無縫集合。
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 最適合于什么樣的應(yīng)用？
A. 我也不知道。因為這是一個相當(dāng)新的理念， 就我們的理解Ajax 應(yīng)用還處于初期階段。有時候傳統(tǒng)的網(wǎng)絡(luò)應(yī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 技術(shù)做技術(shù)支持。 待Ajax成熟后，我以為對于具體的問題， Ajax有時候會是一個更好的解決方案， 同樣有時候Flash 也許做得更好。 我們也有興趣探討兩者的結(jié)合。(比如 Flickr ，它結(jié)合了兩者)。
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(雷達(dá)電子掃描技術(shù)?)兼容嗎? Ajax的開發(fā)有哪些安全考慮呢? Ajax能為那些禁止Javascript運(yùn)行的用戶工作嗎?
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 的一些應(yīng)用中實際上并沒有使用 XML。我一定要在 Ajax 應(yīng)用中使用 XML 或者XSLT嗎？
A. 不是，對于Ajax客戶端，XML作為數(shù)據(jù)交換的載體是支持最為完善的(XMLHttpRequest, DOM支持)。當(dāng)然，你沒有理由不接受可以達(dá)到同樣效果的技術(shù)，例如 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 應(yīng)用比傳統(tǒng)的網(wǎng)絡(luò)應(yīng)用方便開發(fā)嗎?
A. 也不盡然. Ajax 的應(yīng)用不可避免要在客戶端運(yùn)行復(fù)雜的JavaScript 腳本. 編寫復(fù)雜同時高效穩(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 的應(yīng)用總是比傳統(tǒng)的網(wǎng)絡(luò)應(yīng)用更友好嗎？
A. 不一定，Ajax 給交互設(shè)計人員更多的靈活性。能力越大，責(zé)任也越大：）。我們必須小心使用 Ajax 去改善用戶體驗，而不是把它弄得更糟。