Ajax開發必須思考的4個基本原則

我們用到的很多框架中都已經固化了基於頁面的傳統應用模式，同時這些應用模式也已經深深進入了我們的思想中。我們花幾分鐘來揭示出哪些核心概念是我們需要重新思考的，以及如何從Ajax的角度來重新思考。
 

一、瀏覽器中的是應用而不是內容

在傳統的基於頁面的Web應用中，瀏覽器扮演著啞終端1的角色。它對使用者處於操作流程哪一階段一無所知。這些資訊全部都儲存在伺服器上，確切地說，就是在使用者會話上。時至今日，伺服器端的使用者會話早已是司空見慣。如果你使用Java 或者.NET 程式設計，伺服器端的使用者會話更是標準API 的一部分——還有Request、Response、MIME 型別——沒有了它們簡直不可想象。

當使用者登入或者以其他方式初始化一個會話時，系統會建立幾個伺服器端的物件。例如，電子商務型別的網站需要建立表示購物車以及使用者身份證明的物件。同時將瀏覽器站點的首頁呈現給使用者，這個HTML 標記的資料流由模板檔案以及特定於該使用者的資料和內容（例如該使用者最近瀏覽的商品列表）組成。

使用者每次和伺服器互動，都會獲得另一個文件。在這個文件中，除了特定於該使用者的資料以外，包含的其他模板檔案和資料都是相同的。瀏覽器總是忠實地丟棄掉老的文件，顯示新的文件，因為它是啞終端，而且也不知道還可以做些什麼。

當使用者選擇退出或者關閉瀏覽器的時候，應用退出，會話消失。這個時候持久層會把使用者下次登入後需要顯示的資訊儲存起來。Ajax則不同，它把一部分應用邏輯從伺服器端移到了瀏覽器端。

傳統Web應用的生命週期。使用者和應用會話的所有狀態都保留在Web伺服器上。使用者在會話中看到的是一系列的頁面，每次頁面切換都不可避免地要到伺服器上走一個來回。

Ajax應用的生命週期。使用者登入後，伺服器交付一個客戶端應用給瀏覽器。這個應用可以獨立處理很多的使用者互動，對於自己無法獨立處理的互動，應用會以後臺方式傳送請求給伺服器，而不會打斷使用者的操作流程。
使用者登入的時候，伺服器交付給瀏覽器一個複雜得多的文件，其中包含大量的JavaScript程式碼。這個文件將會在整個會話的生命週期內與使用者相伴。在這一過程中，隨著使用者與其互動，它的外觀可能會發生相當大的變化。它知道如何響應使用者的輸入，能夠決定對於這些請求，是自行處理還是傳遞給Web伺服器（Web伺服器再去訪問資料庫或者其他資源），或者通過兩者結合的方式進行處理。因為這個文件在整個使用者會話中都存在，所以它可以儲存狀態1。例如，購物車的內容可以儲存在瀏覽器中而不是伺服器的會話中。

二、伺服器交付的是資料而不是內容

我們已經提到，在傳統的Web應用中，伺服器在每個步驟都需要把模板檔案、內容和資料混合傳送給瀏覽器。但實際上，當向購物車中新增一件物品的時候，伺服器真正需要響應的僅僅是更新一下購物車中的價格。
基於Ajax的購物車可以向伺服器發起一個非同步請求來完成這件事，這樣做顯得更聰明。模板檔案、導航列表和頁面佈局上的其他部分已經隨著初始頁面傳送給了瀏覽器，伺服器無需重發，以後每次只需要傳送相關的資料就可以了。Ajax應用可以通過多種方式來做這件事情。例如，返回一段JavaScript程式碼、一段純文字或者一小段XML文件。這些方式各自的優缺點，我們將留到第5 章再詳細考察。但是，毫無疑問的是，無論返回資料採用何種格式，這些方式所傳輸的資料量都要比傳統的Web應用中一股腦返回一個大雜燴的方式少得多。

在Ajax應用中，網路的通訊流量主要是集中在載入的前期，無論如何，使用者登入後是需要一次性地將一個大而複雜的客戶端交付給瀏覽器。但是在此之後，與伺服器的通訊則會有效率得多。對於瞬態應用來說，積累起來的通訊流量要比以前的基於頁面的Web應用少很多。與此同時，平均的互動次數則有所增加。整體而言，Ajax應用的頻寬消耗要比傳統的Web應用低一些。

三、使用者互動變得流暢而連續

瀏覽器提供了兩種輸入機制：超連結和HTML 表單。超連結可以在伺服器上建立，並預載入指向動態伺服器頁面或者servlet 的CGI 引數。可以用圖片或者CSS（層疊樣式表）來裝飾超連結，並且當滑鼠停在上面時還可以提供基本的反饋。經過合理設計，超連結可以變成一個很有想像力的UI 元件。表單則提供了桌面應用的一組基礎UI 元件：輸入文字框、單選按鈕和多選按鈕，還有下拉選單。但仍然缺少很多有用的UI 元件，例如，沒有可用的樹控制元件、可編輯的柵格、組合輸入框等。表單像超連結一樣，也指向伺服器的一個URL 地址。

超連結和表單也可以指向JavaScript函式。這一技術通常用在將資料提交給伺服器之前對錶單輸入進行簡單的校驗，如檢驗是否有空值，數值是否越界等等。這些JavaScript函式的生存期和頁面本身是一致的，當頁面提交之後，這些函式也就不存在了。

當一個頁面已提交而下一個頁面還沒有顯示出來的時候，使用者實際上處於沒人管的狀態。老的頁面還要顯示一會兒，瀏覽器甚至還會允許使用者點選一些連結。但這些點選可能會導致一些不可預料的結果，甚至破壞伺服器端會話的狀態。使用者通常應該等到頁面重新整理完成，當然也可以選擇在重新整理完成之前就在新頁面上做一些操作。例如，當頁面只顯示了一部分時從中選擇一條褲子放進購物車不大可能會造成什麼破壞（例如，不會修改頂級的服裝分類：男裝、女裝、童裝、配飾）。我們繼續看這個購物車的例子。Ajax的購物車是通過非同步方式傳送資料的，使用者可以很快地把東西拖進來，就像點選一樣快。只要客戶端購物車的程式碼足夠健壯，它可以很輕鬆地處理這樣的負載，而使用者則可以繼續做他想做的事。

要知道，在伺服器端並沒有一個真正的購物車等著裝東西，只有會話中的一個物件而已。購物的時候，使用者並不想知道會話物件，購物車對於使用者而言是一個較恰當的比喻，用現實世界中熟悉的概念來描述這裡發生的事情。對於使用者來說，如果強迫他們去理解計算機領域中的術語，只會讓他們遠離網站。等待頁面的重新整理，一下子就把使用者從愉快的使用體驗中拽了出來，讓他感覺到自己所面對的只不過是一臺冰冷的機器罷了。使用Ajax來實現這些應用則可以避免這些令人不快的體驗。當然了，在這個例子中的購物只是一個瞬態活動。考察一下其他的業務領域，例如，一個業務量很大的幫助中心或者一項複雜的工程任務，如果因為需要等待頁面重新整理，而將工作流程打斷幾秒鐘，那肯定是不可接受的。

Ajax的另一個好處是，我們可以對豐富的使用者操作事件進行捕獲。類似於拖拽這樣的複雜UI 概念也不再是遙不可及的。這使得Web應用的UI 體驗可以全面提升到近乎與桌面應用的UI元件相媲美的高度。從可用性的角度來看，這很重要，不僅僅是因為它釋放了我們的想象力，而且也是因為它可以將使用者互動和伺服器端的請求更加充分地混合起來。在傳統的Web應用中，與伺服器互動需要點選超連結或者提交表單，然後等待頁面的重新整理，這打斷了使用者的工作流程。與之相對應的是，讓伺服器響應滑鼠移動、拖拽或者鍵盤輸入這樣的使用者事件，也就是說，伺服器在使用者身邊為使用者服務，而不是擋在使用者前面，打斷他的操作。
google Suggest（www.google.com/webhp?complete=1）就是這樣一個簡單的但是很有說服力的例子。當使用者在搜尋框鍵入一些字元的時候，應用從伺服器取回與使用者已鍵入字串相似的搜尋條目（根據全世界其他人的搜尋），並且顯示在輸入框下方的下拉選單中。

四、有紀律的嚴肅程式設計

現在傳統的Web應用有時候也會用到JavaScript，不過主要是用來給頁面新增一些花哨的東西。基於頁面的模型使得這樣的增強沒有辦法更進一步，限制了使用者可以得到的更加理想的互動。這種類似於第22條軍規的狀況，使得JavaScript很不公平地獲得了一種瑣碎的、自由散漫的程式語言的名聲，為那些嚴肅的開發者1所不屑。

為Ajax應用程式設計的情況則完全不同。提交給使用者執行的應用將會一直執行直到使用者關閉程式為止。不崩潰，不變慢，也沒有記憶體洩漏之類的毛病。如果我們的產品定位於獨佔式應用的市場，這還意味著很多小時的密集使用。要達到這個目標，當然需要高效能的、可維護的程式碼，這與伺服器端應用的要求是一致的。

相比之下，Ajax的程式碼庫會比傳統的Web應用大很多。對程式碼庫進行良好的組織是非常重要的。編寫程式碼不再是單個開發者的職責，而是整個團隊來參與。可維護性、分離關注點、共同的程式設計風格以及設計模式，這些都是需要考慮的問題。

從某個角度來看，Ajax應用就是使用者所使用的一塊複雜的程式碼，它需要高效地與伺服器進行通訊。它顯然來源於傳統的基於頁面的Web應用，但是它們之間的相似性也僅限於此，兩者之間的差別就像是木馬輪和現代自行車之間的差別。在腦海中要記得它們之間的這些差別，因為只有這樣才能創造出真正引人注目的Web應用。

原文:http://www.yiiyaa.net/