Ajax改造，第4部分:用jQuery和Ajax表單改造現有網站

Ajax 技術改變了大型商業 Web 應用程式的外觀，但是許多較小的 Web 網站都不具備重新構建整個使用者介面（UI）的資源。Ajax 的一些新特效能夠解決實際中的介面問題並改善使用者體驗。通過本系列文章，您可以瞭解如何使用開源的用戶端庫讓您的使用者介面變得更為時尚。本文將展示如何使用 Ajax 技術將一個多步結帳過程從一系列表單轉變成一個單一螢幕的介面。我們將採用漸進增強方法，從而確保所有使用者代理程式仍然能夠訪問您的網站。

關於本文

本文將逐步引導您使用 Ajax 技術改進一個 Web 1.0 購物網站。您可以下載改進之前和之後的應用程式範例原始碼，也可以在作者的 Web 服務器上查看兩個版本的運行效果。除了 Ajax 技術和最佳實務之外，您還將瞭解 Ajax 如何通過漸進增強原理改善使用者體驗。

本文假設您已經牢固掌握 HTML 和 CSS，基本瞭解 JavaScript 和 Ajax 編程技術。應用程式範例僅使用用戶端代碼構建；本文示範的技術適用於任何伺服器端應用程式架構。對於所有 Ajax 應用程式，您都必須從 Web 服務器而不是從自己案頭上的檔案運行範例程式碼。此外，您也可以僅跟隨原始碼在我的 Web 服務器上查看樣本網站的運行效果。

回顧第 1 和第 2 部分

本系列的 第 1 部分 和 第 2 部分 介紹了應用程式範例 Customize Me Now，並開始將它從 Web 1.0 版本改造成受 Ajax 支援的 Web 2.0 版本。藉助 jQuery JavaScript 架構和其他的開源庫，通過用強制回應對話方塊（modal dialog）、工具提示和 lightbox 分別替換彈出訊息、離站連結和導航側邊欄，流線化了 Customize Me Now 的使用者流。在 第 3 部分，您進行了進一步的改進，將大塊內容放到 Ajax/DHTML 選項卡內並用快捷的映像 carousel 替代了單擊-等待式的圖片頁。

第 4 部分的目標

在本文中，您將學習如何將多頁表單轉變成 Ajax 選項卡來流線化複雜的過程。所使用的用例是樣本購物網站的結帳過程。如果沒有 Ajax，在潛在的客戶看來，多頁表單既冗長又讓人頭疼。進行 Ajax 改造後，即使是一個複雜的結帳過程也可以變得友好和易於操作 — 只要您在如何構造使用者介面方面足夠用心。電子商務網站並不是這些技術的惟一受益者。同樣的原理可以應用於為了完成一個多步過程使用者必須填寫一系列相關表單的任何情況。

要理解本文中的這些概念，請參考 Customize Me Now 1.2（參見 下載，它是對未進行 Ajax 改造的原始樣本網站稍作修改後的版本。如果對 1.2 版再做更改，就會得到 Customize Me Now 2.2，它綜合了在整個系列中所做的全部更改。）

電子商務結帳過程：Web 1.0 版本

即使是喜歡線上購物的客戶通常也會十分討厭結帳的過程。所涉及的問題太多：

結帳過程會涉及多少步驟通常不是很清晰。

每一步需要多少時間也不清晰。

根據使用者如何回答特定的問題，他們有可能被轉到應用程式中不相關的部分，之後還要再回來，走了不必要的彎路。選擇購物選項、應用折扣編號甚至是登入都會讓看起來很直觀的過程花費比預期更長的時間。

除非網站開發人員對該過程的安全性編程十分仔細，否則，莫名其妙的安全警告會讓使用者很惱怒。

含義不明的錯誤訊息和不一致的錯誤標誌都會讓使用者弄不清楚何時發生了錯誤。

編碼糟糕的驗證常式也會導致無休止的問題。這樣的例子有很多，比如伺服器響應之後，信用卡號作廢必須重新輸入，再比如複選框沒有按要求保持選中狀態。

電子商務結帳過程：Web 2.0 版本

在準備使用 Ajax 改造現有的 Web 網站而開始投入時間和開發時，改進使用者體驗應該成為您的首要目標之一。Ajax 雖然不能解決使用者之所以憎恨結帳過程的全部癥結，但它至少能在如下三個方面提供一些協助：

使完成結帳過程所需步驟的數量變得清晰

在步驟間轉換的速度較快

當使用者必須在登入、輸入折扣編號或由於其他原因背離正常的結帳過程時，返回的過程簡單且統一