天天看點

Ajax技術全解(5)

Ajax技術全解

之五

一、AJAX定義

AJAX(Asynchr JavaScript and XML)其實是多種技術的綜合,包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。其中:

使用XHTML和CSS标準化呈現,使用DOM實作動态顯示和互動,使用XML和XSTL進行資料交換與處理,使用XMLHttpRequest對象進行異步資料讀取,使用Javascript綁定和處理所有資料。

在AJAX提出之前,業界對于上述技術都隻是單獨的使用,沒有綜合使用,也是由于之前的技術需求所決定的。随着應用的廣泛,AJAX也成為香饽饽了。

二、現狀與需要解決的問題

傳統的Web應用采用同步互動過程,這種情況下,使用者首先向HTTP伺服器觸發一個行為或請求的呼求。反過來,伺服器執行某些任務,再向送出請求的使用者傳回一個HTML頁面。這是一種不連貫的使用者體驗,伺服器在處理請求的時候,使用者多數時間處于等待的狀态,螢幕内容也是一片空白。如下圖:

Ajax技術全解(5)
Ajax技術全解(5)

自從采用超文本作為Web傳輸和呈現之後,我們都是采用這麼一套傳輸方式。當負載比較小的時候,這并不會展現出有什麼不妥。可是當負載比較大,響應時間要很長,1分鐘、2分鐘……數分鐘的時候,這種等待就不可忍受了。嚴重的,超過響應時間,伺服器幹脆告訴你頁面不可用。另外,某些時候,我隻是想改變頁面一小部分的資料,那為什麼我必須重新加載整個頁面呢?!當軟體設計越來越講究人性化的時候,這麼糟糕的使用者體驗簡直與這種原則背道而馳。為什麼老是要讓使用者等待伺服器取資料呢?至少,我們應該減少使用者等待的時間。現在,除了程式設計、編碼優化和伺服器調優之外,還可以采用AJAX。

三、為什麼使用AJAX

與傳統的Web應用不同,AJAX采用異步互動過程。AJAX在使用者與伺服器之間引入一個中間媒介,進而消除了網絡互動過程中的處理—等待—處理—等待缺點。使用者的浏覽器在執行任務時即裝載了AJAX引擎。AJAX引擎用JavaScript語言編寫,通常藏在一個隐藏的架構中。它負責編譯使用者界面及與伺服器之間的互動。AJAX引擎允許使用者與應用軟體之間的互動過程異步進行,獨立于使用者與網絡伺服器間的交流。現在,可以用Javascript調用AJAX引擎來代替産生一個HTTP的使用者動作,記憶體中的資料編輯、頁面導航、資料校驗這些不需要重新載入整個頁面的需求可以交給AJAX來執行。

Ajax技術全解(5)
Ajax技術全解(5)
使用AJAX,可以為ISP、開發人員、終端使用者帶來可見的便捷:

  • 減輕伺服器的負擔。AJAX的原則是“按需取資料”,可以最大程度的減少備援請求,和響應對伺服器造成的負擔。
  • 無重新整理更新頁面,減少使用者心理和實際的等待時間。特别的,當要讀取大量的資料的時候,不用像Reload那樣出現白屏的情況,AJAX使用XMLHTTP對象發送請求并得到伺服器響應,在不重新載入整個頁面的情況下用Javascript操作DOM最終更新頁面。是以在讀取資料的過程中,使用者所面對的不是白屏,是原來的頁面内容(也可以加一個Loading的提示框讓使用者知道處于讀取資料過程),隻有當資料接收完畢之後才更新相應部分的内容。這種更新是瞬間的,使用者幾乎感覺不到。
  • 帶來更好的使用者體驗。
  • 可以把以前一些伺服器負擔的工作轉嫁到用戶端,利用用戶端閑置的能力來處理,減輕伺服器和帶寬的負擔,節約空間和寬帶租用成本。
  • 可以調用外部資料。
  • 基于标準化的并被廣泛支援的技術,不需要下載下傳插件或者小程式。
  • 進一步促進頁面呈現和資料的分離。

四、誰在使用AJAX

在應用AJAX開發上面,Google當仁不讓是表率。Orkut、Gmail、Google Groups、Google Maps、Google Suggest都應用了這項技術。Amazon的A9.com搜尋引擎也采用了類似的技術。

微軟也在積極開發更為完善的AJAX應用:它即将推出代号為Atlas的AJAX工具。Atlas的功能超越了AJAX本身,包括整合Visual Studio的調試功能。另外,新的ASP.NET控件将使用戶端控件與伺服器端代碼的捆綁更為簡便。Atlas客戶腳本架構(Atlas Clent Script Framework)也使與網頁及相關項目的互動更為便利。但Visual Studio 2005中并不包含此項功能。

微軟最近宣布Atlas客戶腳本架構将包含如下内容(詳細資料請通路Atlas計劃網站):

  • 一個可擴充的核心架構,它添加了JavaScript功能:如生命同時期管理、繼承管理、多點傳送處理器和界面管理。
  • 一個常見功能的基本類庫,有豐富的字元串處理、計時器和運作任務。
  • 為HTML附加動态行為的使用者界面架構。
  • 一組用來簡化伺服器連通和網絡通路的網絡堆棧。
  • 一組豐富的使用者界面開發控件,如:自動完成的文本框、動畫和拖放。
  • 處理浏覽器腳本行為差異的浏覽器相容層面。

典型的,微軟将AJAX技術應用在MSN Space上面。很多人一直都對MS Space服務感到很奇怪,當送出回複評論以後,浏覽器會暫時停頓一下,然後在無重新整理的情況下把我送出的評論顯示出來。這個就是應用了AJAX的效果。試想,如果添加一個評論就要重新重新整理整個頁面,那可真費事。

目前,AJAX應用最普遍的領域是GIS-Map方面。GIS的區域搜尋強調快速響應,AJAX的特點正好符合這種需求。

五、用AJAX改進你的設計

AJAX雖然可以實作無重新整理更新頁面内容,但是也不是什麼地方都可以用,主要應用在互動較多、頻繁讀資料、資料分類良好的Web應用中。現在,讓我們舉兩個例子,看看如何用AJAX改進你的設計。

例子1:資料校驗

在輸入form表單内容的時候,我們通常需要確定資料的唯一性。是以,常常在頁面上提供“唯一性校驗”按鈕,讓使用者點選,打開一個校驗小視窗;或者等form送出到伺服器端,由伺服器判斷後在傳回相應的校驗資訊。前者,window.open操作本來就是比較耗費資源的,通常由window. showModalDialog代替,即使這樣也要彈出一個對話框;後者,需要把整個頁面送出到伺服器并由伺服器判斷校驗,這個過程不僅時間長而且加重了伺服器負擔。而使用AJAX,這個校驗請求可以由XMLHttpRequest對象發出,整個過程不需要彈出新視窗,也不需要将整個頁面送出到伺服器,快速又不加重伺服器負擔。

例子2:按需取資料—級聯菜單

以前,為了避免每次對菜單的操作引起的重載頁面,不采用每次調用背景的方式,而是一次性将級聯菜單的所有資料全部讀取出來并寫入數組,然後根據使用者的操作用JavaScript來控制它的子集項目的呈現,這樣雖然解決了操作響應速度、不重載頁面以及避免向伺服器頻繁發送請求的問題,但是如果使用者不對菜單進行操作或隻對菜單中的一部分進行操作的話,那讀取的資料中的一部分就會成為備援資料而浪費使用者的資源,特别是在菜單結構複雜、資料量大的情況下(比如菜單有很多級、每一級菜又有上百個項目),這種弊端就更為突出。

現在應用AJAX,在初始化頁面時我們隻讀出它的第一級的所有資料并顯示,在使用者操作一級菜單其中一項時,會通過Ajax向背景請求目前一級項目所屬的二級子菜單的所有資料,如果再繼續請求已經呈現的二級菜單中的一項時,再向後面請求所操作二級菜單項對應的所有三級菜單的所有資料,以此類推……這樣,用什麼就取什麼、用多少就取多少,就不會有資料的備援和浪費,減少了資料下載下傳總量,而且更新頁面時不用重載全部内容,隻更新需要更新的那部分即可,相對于背景處理并重載的方式縮短了使用者等待時間,也把對資源的浪費降到最低。

例子3:讀取外部資料

AJAX可以調用外部資料,是以,可以對一些開發的資料比如XML文檔、RSS文檔進行二次加工,實作資料整合或者開發應用程式。

六、AJAX的缺陷

AJAX不是完美的技術。使用AJAX,它的一些缺陷不得不權衡一下:

  • AJAX大量使用了Javascript和AJAX引擎,而這個取決于浏覽器的支援。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支援,Mozilla雖然也支援AJAX,但是提供XMLHttpRequest的方式不一樣。是以,使用AJAX的程式必須測試針對各個浏覽器的相容性。
  • AJAX更新頁面内容的時候并沒有重新整理整個頁面,是以,網頁的後退功能是失效的;有的使用者還經常搞不清楚現在的資料是舊的還是已經更新過的。這個就需要在明顯位置提醒使用者“資料已更新”。
  • 對流媒體的支援沒有FLASH、Java Applet好。
  • 一些手持裝置(如手機、PDA等)現在還不能很好的支援Ajax。

銘銘 收集

資料來源: Ajax技術開發應用

繼續閱讀