Ajax: A New Approach to Web Applications

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.它會給咱們帶來樂趣。