Ajax技術全解之二
2024-09-01 08:30:36
供稿：網友
術語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好；
