開發保留標準瀏覽器功能的AJAX應用程式(1)

來源:互聯網
上載者:User
ajax|標準|程式|瀏覽器 作者:Mark Schiefelbein出處:bea責任編輯: 方舟 [ 2006-03-15 08:32 ]Ajax應用程式由於其豐富的功能、互動性以及快速的響應能力而得到人們的普遍讚許   Ajax應用程式由於其豐富的功能、互動性以及快速的響應能力而得到人們的普遍讚許。它可以使用XMLHttpRequest對象動態地載入資料,而不是載入新的頁面。在它大肆進行宣傳以及許多人興奮的同時,有評論指出,Ajax應用程式丟失了瀏覽器的一些重要功能,包括對 後退前進按鈕的支援。

  本文將首先闡明為什麼在Ajax應用程式中除非顯式地構建後退/前進按鈕以及其它瀏覽器功能,否則它們將無法啟動並執行原因。然後,我們將簡要介紹開發人員如何解決這些問題。最後,我們將看到有關Backbase Ajax引擎如何支援後退/前進按鈕以及其它標準瀏覽器功能的詳細情況。

  Ajax應用程式是否需要後退按鈕?

  Ajax承諾,可以讓開發人員完全基於標準的Web瀏覽器技術(通常是指DHTML)建立在視覺上迷人的、高度互動Web應用程式。

  以前開發人員不得不在 功能豐富(具有高度互動性的、迷人的使用者介面)和 易於到達(不需要進行用戶端安裝就可以工作在所有Web瀏覽器下的前端)二者之中作出選擇。而Ajax應用程式應該能夠產生既“功能豐富”又“易於到達”的前端。

  但是一個介面怎樣才算是“功能豐富”的,而一個應用程式又怎樣才是“易於到達”的呢?

  很難精確地定義“功能豐富”的含義,但是卻很容易直覺地認識到:當您看到一個介面時,您就會知道它是不是功能豐富的。象Microsoft Office之類的傳統型應用程式就是功能豐富的。功能豐富的介面使用諸如選項卡和操作功能表這樣的進階UI控制項。這樣的介面提供一些進階互動方法。例如,拖放、對關注的UI元素進行高亮顯示等。傳統的瀏覽器應用程式是功能不豐富的。它們僅限於諸如表單之類的簡單控制項,互動主要是由到新頁面的單擊連結組成。我們只要看看微軟的電子郵件用戶端就可以看出功能豐富和功能不豐富的區別:Outlook是功能豐富的,而Hotmail就是功能不豐富的。

  Ajax應用程式已經由於功能豐富而得到人們的普遍讚許。Google的Gmail就是其中最具代表性的例子。Google所開發的其它Ajax應用程式(Google Suggest、 Google Map)、微軟即將推出的名為“Kahuna”的Web郵件用戶端以及Backbase RSS Reader都包含了一些進階控制項和互動模組。

  通過前面的討論,可以說Ajax應用程式很明顯滿足“功能豐富”的標準。那麼它是不是“易於到達”的呢?

  首先,最基本的是,只有介面在Web瀏覽器中啟動並執行應用程式才是“易於到達”的。Ajax應用程式是基於瀏覽器標準的,因此可以通過Web瀏覽器來訪問。

  但是,僅僅可以通過Web瀏覽器訪問還不夠。終端使用者希望在使用Web應用程式時所面對的是特定的互動方式。應用程式需要遵從傳統的Web互動方式,並提供以下的可用功能:
  • 後退和前進按鈕可以正常工作,以便終端使用者可以導航到記錄頁面。
  • 使用者應該可以建立書籤。
  • 支援深連結,以保證終端使用者可以將這個頁面通過電子郵件發送給朋友和同事。
  • 重新整理按鈕可以正常工作,以便重新整理當前的狀態而不是重新初始化應用程式。
  • 開發人員可以使用“查看源檔案”看到原始碼。
  • 終端使用者可以使用“尋找”對頁面進行搜尋。
  • 搜尋引擎可以為頁面做索引並建立到搜尋項的深連結。

  以前討論的大多數Ajax應用程式的確打破了標準的Web互動方式。在下一節中,我們將討論為什麼許多Ajax應用程式會這麼做。

  為什麼Ajax應用程式常常會使後退按鈕無法正常工作?


  我們所說的Web基於以下三個原則:
  • 使用 (D)HTML來定義介面
  • 使用HTTP實現用戶端與伺服器間的通訊
  • 使用URI進行定址

  Ajax編程突破了由以上原則所帶來的種種限制,使得介面功能更加豐富。Ajax廣泛使用了JavaScript(“J”)以建立功能豐富的UI組件和互動性。Ajax還引入了非同步XML通訊(“A”和“X”),也就是使用XMLHttpRequest對象匯入新的資料和表示邏輯而不必重新整理頁面。然而,目前的Ajax模型並沒有解決如何處理URI的問題。

  Ajax應用程式對(D)HTML和HTTP的使用方式做了改變,而這種改變帶來的直接結果就是後退按鈕和Web的基本互動方式的其它元素無法正常工作了。在本節的其餘部分,我將說明如何通過以Ajax的方式處理URI來解決上述問題。首先我們來看看在傳統的Web應用程式中URI是如何與使用者互動相關聯的。

  從技術方面來說,使用者互動是指使用者介面狀態的一次更改。狀態改變由終端使用者發起。瀏覽器用戶端通過向伺服器發出頁面請求來處理狀態更改(REST法則)。伺服器將發送新的頁面和新的URI到用戶端以產生新的介面狀態。
簡單地說,每個使用者互動都是通過會導致如下結果的伺服器往返來處理的:
  • 產生新的頁面
  • 產生新的URI

  這些Web功能之所以能夠被使用,是因為瀏覽器在它的記錄堆棧中記錄了連續的URI,並在地址欄中向終端使用者顯示當前URI,使用者可以通過地址欄複製URI,並將其發送給朋友。當使用者單擊後退按鈕或者向瀏覽器的地址欄中粘貼一個來自於電子郵件的URI時,就會觸發一次到伺服器的往返。因為伺服器負責狀態管理,所以它就可以產生相應的頁面。

  Ajax應用程式與傳統的Web應用程式之間的主要區別在,Ajax應用程式可以處理使用者的互動而無需頁面重新載入。例如,通過XMLHttpRequest對象從伺服器載入資料,或者使用JavaScript來處理拖放用戶端。

  在上面的兩個例子中,狀態改變了,但是卻沒有產生新的URI。因此,單擊後退按鈕或重新整理按鈕會產生意外的結果,在地址欄中也不會有深連結的URI。

  為了提供傳統的Web可用功能,Ajax應用程式需要以類似於伺服器處理傳統的Web應用程式的方式來處理URI用戶端。Ajax應用程式需要實現以下功能:
  • 當用戶端狀態發生改變時,產生一個URI,並將其發送到瀏覽器
  • 當瀏覽器請求新的URI時可以重新建立狀態。

  實現以上功能後,瀏覽器的記錄就可以正常工作,瀏覽器的地址欄就可以顯示URI,當然,您也就可以將它發送給朋友了。

  這裡還有另外一個痛點,那就是如何確定Ajax引擎什麼時候需要實現以上功能(例如,哪一次狀態改變需要建立新的URI)。在傳統的模式中,每一次頁面重新整理都對應著一次URI更新。而在Ajax模式中,每一個用戶端事件都將新的URI添加到瀏覽器堆棧中。互動設計者和開發人員將不得不做出決定:哪一次狀態改變是有意義的。只對有意義的狀態改變才需要產生URI。

  下面我們對提供Web可用功能的Ajax應用程式在用戶端需要實現的功能做一下總結:
  • 建立記錄
    • 儲存有意義的狀態
    • 產生相應的URI
    • 將這個URI添加到瀏覽器的堆棧中
  • 恢複記錄
    • 檢測URI的改變
    • 通過URI重新建立狀態
  • Ajax: 一個建立Web應用的新途徑
  • Ajax的錯誤處理機制探討(2)
  • Ajax的錯誤處理機制探討(1)
  • 初次體驗.NET Ajax無重新整理技術
  • Rails系統中的AJAX開發技術簡析(4)


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.