Ajax技術全解之二

術語Ajax用來描述一組技術，它使瀏覽器可以為使用者提供更為自然的瀏覽體驗。在Ajax之前，Web網站強制使用者進入提交/等待/重新顯示範例，使用者的動作總是與伺服器的“考慮時間”同步。Ajax提供與伺服器非同步通訊的能力，從而使使用者從請求/響應的迴圈中解脫出來。藉助於Ajax，可以在使用者單擊按鈕時，使用JavaScript和DHTML立即更新UI，並向伺服器發出非同步請求，以執行更新或查詢資料庫。當請求返回時，就可以使用JavaScript和CSS來相應地更新UI，而不是重新整理整個頁面。最重要的是，使用者甚至不知道瀏覽器正在與伺服器通訊：Web網站看起來是即時響應的。

雖然Ajax所需的基礎架構已經出現了一段時間，但直到最近非同步請求的真正威力才得到利用。能夠擁有一個響應極其靈敏的Web網站確實激動人心，因為它最終允許開發人員和設計人員使用標準的HTML/CSS/JavaScript堆棧建立“案頭風格的（desktop-like）”可用性。

與傳統的web應用比較

傳統的web應用允許使用者填寫表單(form)，當提交表單時就向web伺服器發送一個請求。伺服器接收並處理傳來的表單，然後返回一個新的網頁。這個做法浪費了許多頻寬，因為在前後兩個頁面中的大部分HTML代碼往往是相同的。由於每次應用的互動都需要向伺服器發送請求，應用的回應時間就依賴於伺服器的回應時間。這導致了使用者介面的響應比本地應用慢得多。

與此不同，AJAX應用可以僅向伺服器發送並取回必需的資料，它使用SOAP或其它一些基於XML的web service介面，並在用戶端採用JavaScript處理來自伺服器的響應。因為在伺服器和瀏覽器之間交換的資料大量減少，結果我們就能看到響應更快的應用。同時很多的處理工作可以在發出請求的用戶端機器上完成，所以Web伺服器的處理時間也減少了。

Ajax的工作原理

 

Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支援非同步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向伺服器提出請求並處理響應，而不阻塞使用者。

在建立Web網站時，在用戶端執行螢幕更新為使用者提供了很大的靈活性。下面是使用Ajax可以完成的功能：

• 動態更新購物車的物品總數，無需使用者單擊Update並等待伺服器重新發送整個頁面。
• 提升網站的效能，這是通過減少從伺服器下載的資料量而實現的。例如，在Amazon的購物車頁面，當更新籃子中的一項物品的數量時，會重新載入整個頁面，這必須下載32K的資料。如果使用Ajax計算新的總量，伺服器只會返回新的總量值，因此所需的頻寬僅為原來的百分之一。
• 消除了每次使用者輸入時的頁面重新整理。例如，在Ajax中，如果使用者在分頁列表上單擊Next，則伺服器資料只重新整理列表而不是整個頁面。
• 直接編輯表格式資料，而不是要求使用者導航到新的頁面來編輯資料。對於Ajax，當使用者單擊Edit時，可以將靜態表格重新整理為內容可編輯的表格。使用者單擊Done之後，就可以發出一個Ajax請求來補救伺服器，並重新整理表格，使其包含靜態、唯讀資料。

 

Ajax的優勢

1、減輕伺服器的負擔。因為Ajax的根本理念是“按需取資料”，所以最大可能在減少了冗餘請求和響影對伺服器造成的負擔；

2、無重新整理更新頁面，減少使用者實際和心理等待時間；

首先，“按需取資料”的模式減少了資料的實際讀取量，打個很形象的比方，如果說重載的方式是從一個終點回到原點再到另一個終點的話，那麼Ajax就是以一個終點為基點到達另一個終點；

圖5－1

圖5－2

其次，即使要讀取比較大的資料，也不用像RELOAD一樣出現白屏的情況，由於Ajax是用XMLHTTP發送請求得到服務端應答資料，在不重新載入整個頁面的情況下用Javascript操作DOM最終更新頁面的，所以在讀取資料的過程中，使用者所面對的也不是白屏，而是原來的頁面狀態（或者可以加一個LOADING的提示框讓使用者瞭解資料讀取的狀態），只有當接收到全部資料後才更新相應部分的內容，而這種更新也是瞬間的，使用者幾乎感覺不到。總之使用者是很敏感的，他們能感覺到你對他們的體貼，雖然不太可能立竿見影的效果，但會在使用者的心中一點一滴的積累他們對網站的依賴。

 

3、更好的使用者體驗；
4、也可以把以前的一些伺服器負擔的工作轉嫁到用戶端，利於用戶端閑置的處理能力來處理，減輕伺服器和頻寬的負擔，節約空間和頻寬租用成本；
5、Ajax由於可以調用外部資料；
6、基於標準化的並被廣泛支援和技術，並且不需要外掛程式或下載小程式；
7、Ajax使WEB中的介面與應用分離（也可以說是資料與呈現分離）；
8、對於使用者和ISP來說是雙盈的。

Ajax的問題

1、一些手持功能（如手機、PDA等）現在還不能很好的支援Ajax；
2、用JavaScript作的Ajax引擎，JavaScript的相容性和DeBug都是讓人頭痛的事；

3、Ajax的無重新整理重載，由於頁面的變化沒有重新整理重載那麼明顯，所以容易給使用者帶來困擾――使用者不太清楚現在的資料是新的還是已經更新過的；現有的解決有：在相關位置提示、資料更新的地區設計得比較明顯、資料更新後給使用者提示等；

4、對流媒體的支援沒有FLASH、Java Applet好；