Ajax改造,第1部分:使用Ajax和jQuery改進現有網站

來源:互聯網
上載者:User

Ajax 技術改變了大型商業 Web 應用程式的外觀,但是許多較小的 Web 網站都不具備足夠的資源重新構建完整的使用者介面(UI)。Ajax 的一些新特效能夠解決實際中的介面問題並改善使用者體驗。本文將展示如何使用簡單的強制回應視窗消除快顯視窗和導航死角。通過應用漸進增強(progressive enhancement)這一理念,能夠保證這些增強 UI 特性不會損害網站的可訪問性,並且嚴格遵守 Web 標準。

本文假設您已經牢固掌握超文字標記語言 (HTML)(Hypertext Markup Language,HTML)和階層式樣式表(Cascading Style Sheet,CSS),基本瞭解 JavaScript 編程和 Ajax。應用程式範例僅使用用戶端代碼構建;本文示範的技術適用於任何伺服器端應用程式架構。要運行樣本網站,您至少需要在本地主機上運行一個基本的 Web 服務器。此外,您也可以僅跟隨原始碼並在我的 Web 服務器上查看運行中的樣本網站(參見 參考資料 中的連結)。

概念介紹:使用 Ajax 改進您的網站

引導使用者跟隨特定路徑 — 即,從產品搜尋到付款購買 — 這種需求與 Web 本身的曆史一樣久。它一直都充滿著風險:讓使用者迷失方向。您的導航路徑越長、越複雜,使用者經曆的內容就越多。您需要為使用者提供足夠的資訊,以防止他們在導航過程中失去興趣。

在 Web 1.0 世界,購物網站通過構造一條流暢的路徑(從搜尋和結果到選擇和購買)流線化使用者體驗。當購買路徑提供的資訊無法滿足使用者需求時,他們需要通過導航找到提供更多資訊的產品細節或比較頁面。這種方法存在的問題是,它們使使用者離開了購買路徑,增加了使用者放棄購買的機會。而且還難以維護,因為您的導航邏輯必須儲存與使用者如何到達此死角相關的資訊。

快顯視窗似乎提供了一個解決方案。通過快顯視窗提供補充資訊,主視窗中直接的分布路徑不會受到幹擾。然而,不幸的是,快顯視窗容易使人混淆和反感。它們可能比上面的導航彎路更容易維護,但是它們很可能使使用者退出您希望其完成的購買流程。

幸運的是,開源 JavaScript 庫提供了一種簡單方式,可以徹底擺脫導航彎路和快顯視窗。本文將示範如何使用 Ajax 和 Dynamic HTML (DHTML) 技術在工具提示、lightbox 和其他強制回應視窗中呈現補充資訊。由於這些元素可以動態地插入任何頁面,它們能夠保持從首頁到購買的快速、分步路徑。

應用程式介紹:Customize Me Now

本文中的應用程式範例主要針對電子商務。我已經構造了一個虛構的購物應用程式 Customize Me Now,允許使用者定製和購買一組不同的產品:批薩、旅行包或有價證券。當然,在實際中,這些產品類別絕不會出現在同一個網站上。但是,將它們放在一起可以示範許多網站面對的複雜、真實的導航難題。

本文首先提供一個 Web 1.0 版的 Customize Me Now,然後將其改進為 Web 2.0 版,當您瞭解到補充資訊只是通過一個 Ajax 調用提供時,就能想象到導航路徑有多麼的流暢。此處涉及的技術適合於任何需要保持簡單性並能引導使用者的流程。配置產品、做一個調查、註冊一些服務,或者只是完成一個註冊表單 — 所有這些流程都可以使用 Ajax 實現流線化。

技術介紹:Ajax、工具提示、強制回應視窗和 lightbox

現在,也許不再需要介紹 Ajax 了:在 Web 開發領域到處都是它身影。這些年來,聰明的編程人員一直使用 JavaScript 代碼逐步更新 Web 頁面,而不再與伺服器往返通訊。但僅僅是因為 xmlHttpRequest 對象的採用 — 最初是一個 Windows® Internet Explorer® 擴充,但現在支援許多不同的瀏覽器 — 才使 Ajax 流行起來的。無論何時,只要您看到一個與傳統型應用程式非常相似的 Web 應用程式,那麼它很可能採用了 Ajax。本文無意討論 Ajax 編程的基礎知識,但是您將使用到許多使用 Ajax 技術的開源庫。

Ajax UI 通常使用工具提示、lightbox 和強制回應視窗。它們都是指一個瀏覽器視區(viewport)的彈出螢幕,而不是在一個獨立的視窗中運行。工具提示(Tooltips)通常是一些提供上下文內容的小型視窗,將滑鼠移至上方在一個觸發器元素上就會顯示。強制回應視窗(Modal windows)通常比較大,而且通過一個單擊事件觸發。Lightbox 是一種特殊的強制回應視窗,它通過半透明的重疊將視窗的原始內容和模式內容分隔開。任何一種這類容器都可以填充各種內容:使用 DHTML 技術隱藏的內聯內容;通過 Ajax 調用從伺服器拉取的新內容;或者拉入 iframe 中的完整的獨立文檔。流行的 DVD 租賃服務 Netflix 提供了一個關於這些介面元素的出色樣本。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.