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

Ajax: A New Approach to Web Applications