AJAX開發簡略 (第一部分)

在使用瀏覽器瀏覽網頁的時候，當頁面重新整理很慢的時候，你的瀏覽器在幹什麼。你的螢幕內容是什麼。是的，你的瀏覽器在等待重新整理，而你的螢幕內容是一片空白，而你在螢幕前苦苦的等待瀏覽器的響應。開發人員為了克服這種尷尬的局面，不得不在每一個可能需要長時間等待響應的頁面上增加一個DIV，告訴使用者“系統正在處理您的請求，請稍候……”。

　　現在，有一種越來越流行越熱的“老”技術，可以徹底改變這種窘迫的局面。那就是AJAX。如今，隨著Gmail、Google-maps的應用和各種瀏覽器的支援，AJAX正逐漸吸引全世界的眼球。 一、AJAX定義
　　 AJAX（Asynchronous JavaScript and XML）其實是多種技術的綜合，包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。其中：

　　使用XHTML和CSS標準化呈現，使用DOM實現動態顯示和互動，使用XML和XSTL進行資料交換與處理，使用XMLHttpRequest對象進行非同步資料讀取，使用Javascript綁定和處理所有資料。

　　在AJAX提出之前，業界對於上述技術都只是單獨的使用，沒有綜合使用，也是由於之前的技術需求所決定的。隨著應用的廣泛，AJAX也成為香餑餑了。 二、現狀與需要解決的問題
　　傳統的Web應用採用同步互動過程，這種情況下，使用者首先向HTTP伺服器觸發一個行為或請求的呼求。反過來，伺服器執行某些任務，再向發出請求的使用者返回一個HTML頁面。這是一種不連貫的使用者體驗，伺服器在處理請求的時候，使用者多數時間處於等待的狀態，螢幕內容也是一片空白。如下圖：

　　自從採用超文本作為Web傳輸和呈現之後，我們都是採用這麼一套傳輸方式。當負載比較小的時候，這並不會體現出有什麼不妥。可是當負載比較大，回應時間要很長，1分鐘、2分鐘……數分鐘的時候，這種等待就不可忍受了。嚴重的，超過回應時間，伺服器乾脆告訴你頁面不可用。另外，某些時候，我只是想改變頁面一小部分的資料，那為什麼我必須重新載入整個頁面呢。。當軟體設計越來越講究人性化的時候，這麼糟糕的使用者體驗簡直與這種原則背道而馳。為什麼老是要讓使用者等待伺服器取資料呢。至少，我們應該減少使用者等待的時間。現在，除了程式設計、編碼最佳化和伺服器調優之外，還可以採用AJAX。 三、為什麼使用AJAX
　　與傳統的Web應用不同，AJAX採用非同步互動過程。AJAX在使用者與伺服器之間引入一個中間媒介，從而消除了網路互動過程中的處理—等待—處理—等待缺點。使用者的瀏覽器在執行任務時即裝載了AJAX引擎。AJAX引擎用JavaScript語言編寫，通常藏在一個隱藏的架構中。它負責編譯使用者介面及與伺服器之間的互動。AJAX引擎允許使用者與應用軟體之間的互動過程非同步進行，獨立於使用者與網路伺服器間的交流。現在，可以用Javascript調用AJAX引擎來代替產生一個HTTP的使用者動作，記憶體中的資料編輯、頁面導航、資料校正這些不需要重新載入整個頁面的需求可以交給AJAX來執行。

　　使用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。

作者簡介
	柯自聰，dev2dev ID: educhina, 軟體工程師，聯絡方式eamoi@163.com（技術） zcke0728@hotmail.com（著作權）。 Blog: http://www.blogjava.net/eamoi/