DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> 開發保留標准浏覽器功能的AJAX應用程序
開發保留標准浏覽器功能的AJAX應用程序
編輯: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都包含了一些高級控件和交互模塊。可查看Dan Grossman的Top 10 Ajax Applications列表,其中給出了一個讓人印象深刻的功能豐富界面的列表。

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

  首先,最基本的是,只有界面在Web浏覽器中運行的應用程序才是“易於到達”的。Ajax應用程序是基於浏覽器標准的,因此可以通過Web浏覽器來訪問。

  但是,僅僅可以通過Web浏覽器訪問還不夠。Jakob Nielson在他2000年的文章Flash: 99% Bad中指出,Flash“打破了Web的基本交互方式”。終端用戶希望在使用Web應用程序時所面對的是特定的交互方式。應用程序需要遵從傳統的Web交互方式,並提供以下的可用功能:

  • 後退和前進按鈕可以正常工作,以便終端用戶可以導航到歷史記錄頁面。
  • 用戶應該可以創建書簽。
  • 支持深鏈接,以保證終端用戶可以將這個頁面通過電子郵件發送給朋友和同事。
  • 刷新按鈕可以正常工作,以便刷新當前的狀態而不是重新初始化應用程序。
  • 開發人員可以使用“查看源文件”看到源代碼。
  • 終端用戶可以使用“查找”對頁面進行搜索。
  • 搜索引擎可以為頁面做索引並創建到搜索項的深鏈接。

  再看一下Top 10 Ajax Applications列表,我們可以看出,之前討論的大多數Ajax應用程序的確打破了標准的Web交互方式。在下一節中,我們將討論為什麼許多Ajax應用程序會這麼做。

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

  我們所說的Web基於以下三個原則:

  • 使用 (D)HTML來定義界面
  • 使用HTTP實現客戶端與服務器間的通訊
  • 使用URI進行尋址

  Ajax編程突破了由以上原則所帶來的種種限制,使得界面功能更加豐富。正如我在以前的文章A Backbase Ajax Front-end for J2EE Applications(中文版)中所介紹的那樣,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應用程序需要以類似於服

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved