軟體專案實訓及課程設計指導——應用AJAX技術提高Web應用系統的整體響應效能
1、軟體應用系統的效能指標是衡量軟體應用系統優劣程度的一個重要指標
Web應用系統由於是基於HTTP協議產生請求、並由Web伺服器端程式處理對應的請求、最後再次透過HTTP響應向Web瀏覽器端輸出處理後的結果，該過程一般要經過多個不同的環節和由不同的程式加工處理——參看如下示例圖所示。
這將導致對請求處理的最終響應的效能是比較低效的，因此，有必要提高Web應用系統的整體響應效能。在Web應用系統的開發實現中，效能指標是衡量應用系統本身優劣程度的一個主要指標——但提高軟體應用系統的整體效能是一個"系統工程"，需要設計和開發實現人員共同努力並從各個不同的層次和方面對軟體應用系統進行效能最佳化。
作者將在本文及後續幾篇文章中為讀者詳細介紹提高Web應用系統響應效能的主要方法，如利用AJAX技術減少客戶端和伺服器端互動的資料量、應用Web頁面靜態化技術以及應用FreeMarker靜態模板框架技術實現對不同型別的Web應用系統中的頁面靜態化等。
這些技術都是提高Web應用系統響應效能的行之有效的良策。當然，讀者不僅要了解和掌握如何提高軟體應用系統性能的各種方法，也還應該要掌握如何對Web應用系統的效能進行測試和監控，以客觀地評估所採用的效能最佳化方法的最終效果。
因此，在本系列文章中作者還要介紹開源的JMeter效能測試工具、和如何利用JProfiler工具監控軟體應用系統的效能等方面的內容。
2、應用AJAX技術能夠減少客戶端和伺服器端互動的資料量
（1）AJAX代表非同步JavaScript和XML技術
AJAX技術的全稱為Asynchronus JavaScript And XML——非同步JavaScript和XML技術，應用AJAX技術能夠讓Web應用的操作介面產生出應用程式客戶端視窗介面的效果。另外也不需要重新整理整個Web頁面就可以實現提交——因為AJAX技術能夠提供客戶端瀏覽器程式與Web伺服器端程式進行非同步通訊的能力，從而使Web使用者從請求/響應中解脫出來並提高了Web應用系統的響應效率。
（2）應用AJAX技術能夠減輕Web伺服器的負擔
由於AJAX技術在返回響應輸出的資料時的基本原則是"按需獲得目標資料"，從而最大程度地減少了請求響應輸出的資料量，當然也就減少了對Web伺服器所造成的效能消耗——因為在Web應用系統的各個頁面中基本上都存在有相同的HTML標籤內容，比如頁面結構、格式、頁面頂部的Logo影象、頁面底部的版權和聯絡方式資訊等，而不同的只是頁面中所需要更新顯示的一小部分變化的資料內容。在傳統的Web應用系統請求響應的應用中，每次Web伺服器都要生成一個獨立而又完整的Web頁面檔案內容，再返回給客戶端的Web瀏覽器程式。
目前在Google Maps站點、Google Suggest站點和Gmail郵件系統中都大量地應用了AJAX技術來改進使用者的介面操作效果。在示例專案銀行賬戶資訊管理系統中也大量地應用了AJAX技術改進軟體應用系統的使用者介面操作體驗——比如，在使用者註冊功能頁面中應用AJAX技術實現實時檢測使用者輸入的使用者名稱稱是否存在重名現象，請見如下示圖所示的註冊頁面的區域性截圖——當用戶輸入"admin"使用者名稱稱時，軟體應用系統後臺程式及時查詢和報告出該"admin"使用者名稱稱已經被其它使用者佔用的提示資訊。
3、應用AJAX技術的Web應用系統所具有的技術特性
（1）實現Web介面向桌面應用程式介面轉化
Ajax技術可以使Web應用系統儘管是執行在Web瀏覽器的環境中，但操作使用卻具有類似於桌面應用程式的介面互動效果，從而給基於Web瀏覽器環境中的應用系統在載入動態化和操作客戶端化兩方面帶來了革命性的突破。
（2）不需要重新整理整個頁面就可以實現提交
因為Ajax能夠提供讓客戶端程式與伺服器端程式進行非同步通訊的能力，從而使使用者從請求/響應中解脫出來並提高了響應的效率。
如下示圖為某個線上編輯軟體實現類似於微軟Word辦公應用程式排版操作效果，使用者並沒有感覺到是在Web瀏覽器中操作Web應用，而更多的是採用桌面應用程式的介面互動效果，每次編輯文件和文件資料儲存都沒有出現螢幕閃爍的現象，而且響應速度快和效能高。
（3）減輕伺服器的負擔（只返回必須的有效資料），最終提高了系統的響應速度
（4）AJAX是標準化的並被廣泛支援的技術 不需要再下載外掛或者其它的小程式等安裝到客戶端，而其它的RIA（Rich Internet Applications，富因特網應用程式）技術實現如Web Start和MS ClickOnce、Flash FLEX 等都需要安裝客戶端的外掛。
4、為什麼應用AJAX技術後能夠提高Web應用系統的響應速度
（1）基於AJAX技術的請求響應的原則是"按需取資料"
使用者在Web頁面中產生資料改變的請求提交操作後，Web應用系統程式都只返回客戶端所需要的資料而不是整個Web頁面。因此，可以最大程度地減少HTTP請求響應過程中的資料量，也就相應地降低了對Web伺服器端系統所造成的負擔。
（2）在大多數Web網站的頁面中至少90%都是重複一樣的
比如結構、格式、頁頭、頁尾、廣告等，所不同的只是一小部分的內容；但每次Web伺服器都會生成完整的頁面資料再返送給Web客戶端瀏覽器，這無形之中是一種浪費。
5、為什麼要提出AJAX技術和為什麼要應用AJAX技術
（1）B/S體系架構改進了C/S體系架構在技術應用方面的不足
基於C/S（Client/Serve，客戶機/伺服器模式）體系架構的胖客戶端的軟體應用系統所存在的主要問題：
1）部署問題
2）升級困難
3）維護困難
4）安全問題等等。
為了解決上述這些問題，在軟體體系架構設計中相應地產生了B/S（Browser/Server，瀏覽器/伺服器模式）體系架構技術及基於B/S體系架構的廋客戶端的軟體應用系統。
（2）隨著應用的深入和技術不斷地更新，B/S體系架構同樣也面臨如下的一些問題
2）響應速度等效能方面，不斷地處於請求/響應的迴圈中；
3）HTTP協議是一個無狀態的協議，需要進行狀態跟蹤以識別多次請求是同一使用者產生的還是多個不同使用者產生的；
4）伺服器負載加重，由於採用了集中式的後臺業務處理，Web瀏覽器客戶端只發送請求和顯示請求處理的結果。而大量的業務邏輯、資料訪問、資料儲存和更新等功能都在Web伺服器端完成。
（3）常規的B/S方式中的同步請求處理的方式將導致客戶機會處於漫長的等待中——如下的"一片空白"，讀者應該會有深刻體會！
（4）AJAX技術實現中所體現出的三大技術特徵
1）非同步互動，無需重新整理整個頁面內容；
2）JavaScript指令碼處理互動，JavaScript指令碼程式繫結和處理所有的資料；
3）XML封裝資料，利用DOM進行資料交換，不僅每個支援 Ajax 的瀏覽器都支援XML，許多Web伺服器端技術也都支援XML。
因此，在Web應用系統開發實現中為了能夠提高系統的響應效能，有必要應用AJAX技術。如下示例中的資料邊輸入邊查詢，是透過應用非同步互動而無需重新整理整個頁面內容所產生的應用效果。
6、Ajax 中的第一個"A"代表"非同步（Asynchronous）"
（1）什麼是非同步通訊
非同步通訊技術其實在Java技術中早就提供有技術支援，比如Java語言對多執行緒併發應用技術的支援等。
Ajax 中的第一個"A"所代表的"非同步（Asynchronous）"，其更準確的理解應該是Web狀態下的非同步請求和響應。而所謂的Web非同步請求也就是不需要等待Web伺服器響應完畢，傳送請求後Web應用系統程式可以完成其它的任務（比如使用者仍然可在Web表單中進行操作等）。
（2）常規的Web應用實現的過程是同步互動過程
傳統的Web應用實現的過程是同步互動過程，也就是一直處於請求與響應的迴圈過程中（參看如下示例圖所示）。下一個HTTP請求必須要在前一個HTTP請求已經被處理完畢後，才能送發出去；而且Web頁面在實際更新時，使用者會看到Web頁面閃爍或抖動。
7、AJAX技術中的非同步實現是藉助於XMLHttpRequest物件
（1）Ajax中的最核心的技術就是XMLHttpRequest（常規的請求是HttpRequest）
XmlHttpRequest物件其實是在IE5（Internet Explorer 5）版本中首次被引入，它是一種支援非同步請求的技術。簡而言之，Web開發人員透過應用XmlHttpRequest物件可以使用JavaScript指令碼程式向Web伺服器傳送請求並處理從Web伺服器返回的響應結果，而不阻塞使用者的繼續請求和訪問。
如下示例圖說明了XMLHttpRequest物件的主要作用和在整個請求和響應的過程中的工作原理。
（2）XMLHttpRequest物件能夠非同步地在後臺執行並且可以與Web伺服器進行互動
XMLHttpRequest物件能夠非同步地（多執行緒）向後臺傳送請求，並且非同步地獲得Web伺服器返回的資料（互動），這樣將使得JavaScript可以在不重新整理頁面的情況下獲得Web伺服器端所返送回的資料，或者向Web伺服器端提交請求資料。
因此，當Web伺服器收到一個來自於Web瀏覽器的請求時，它就進行相應的處理，然後把處理後的XML格式的結果資料返送回Web瀏覽器端。JavaScript引擎系統程式將接收這個處理後的XML格式的結果資料，並且使用支援DOM（Document Object Model，文件物件模型）介面的解析器程式來操作相應的Web頁面元素。而在整個過程中，不必過載整個Web頁面。
8、體驗和了解應用AJAX技術的軟體應用系統人機互動效果
（1）百度地圖站點
使用者可以點選地圖、放大、縮小地圖，並且可以根據使用者瀏覽的需要來回拖動地圖。其實使用者在百度地圖中移動滑鼠的過程中，客戶端程式（百度地圖）非同步地向伺服器端傳送使用者滑鼠的位置（該座標位置經過資料轉換最終代表地理位置）請求並更新當前的Web頁面的顯示內容，使用者就能夠實時地看到對應的地區地理資訊。但Web頁面很平滑地移動、並且沒有任何的閃爍現象
地圖頁面似乎跟同類的其它的網站頁面沒有太大的區別。不過，一旦使用者輸入了某個地址，地圖系統馬上帶著使用者進入一個城市，穿越一條又一條街道，而在此過程中使用者會發覺事情非常美妙。
使用者不會見到沙漏圖示，而且頁面會無縫地一下子轉換到新的一頁，使用者的電腦在等待下載更多資料時，螢幕不會出現任何的間斷。
而使用者的瀏覽器繼續使用來自於Web伺服器的資料，同時使用者的瀏覽器卻不需要重新整理。地圖系統沒有使用Java Applet程式技術，當然也沒有采用類似於Flash的技術。地圖系統的行為更象是一個桌面應用程式而不是一個Web應用程式。
（2）Google Suggest站點
當用戶在輸入框輸入相關的查詢關鍵字時，Google Suggest系統獲取使用者的輸入並實時地傳送到後臺Web伺服器查詢出對應匹配的結果——這在技術實現上稱為"自動補全"，請讀者注意"自動補全"其實是AJAX技術的一個典型的應用。
其實，在Web系統的後臺，針對使用者的每一次鍵擊，向Web伺服器傳送了若干次呼叫。使用者基本上沒有被它所幹擾，因為它們的互動並沒有中斷，只有Web頁面的一部分得到重新整理。所有這些都可以被有效地實現，因為只有一小部分Web頁面資料被傳送回頁面中，而不是整個Web頁面。
（3）Web方式的進度條
對於"進度條"相信讀者並不會感覺到陌生，讀者在應用各種Windows或者手機App等應用程式時，相關的系統程式透過"進度條"來反映當前的操作進度，這在應用程式環境中很容易實現，但在沒有應用AJAX技術的傳統Web應用系統中是很難實現的。
（4）深層次、內容動態的樹形導航選單的設計實現
對於軟體應用系統中的樹形選單，讀者也並不陌生，在Windows應用系統中有很多程式都提供有樹形結構的資料表示。但在傳統的Web應用系統程式中實現樹形結構顯示，其實現技術就已經比較複雜，而且樹節點中的資料都是動態獲得和隨時改變，則更不容易。
（5）對資料進行過濾和操縱相關資料和實時重新整理資料的應用場景
在很多Web應用系統中會實時地顯示當前線上人數或者某種業務的實時資料（如股票、溫度、PM2.5資料等），這些都是透過應用AJAX技術實現的應用效果。
（6）快速的使用者與使用者間的交流響應——IM（Instant Messaging，即時通訊）系統
儘管商業化的Web版本的獨立的IM系統產品很少，但在很多其它Web應用系統中都提供有線上通訊和傳送、接收資訊的功能（比如各種自媒體平臺、Web版的電子郵件）。
（7）自動補全
自動補全其實是AJAX最擅長的一種應用方式，在許多搜尋引擎系統中都應用了自動補全的技術。也就是在使用者輸入相關的資訊過程中，系統的頁面程式不斷地獲得使用者當前的輸入字串，並實時地傳送到後臺伺服器系統進行查詢，並根據查詢的結果無重新整理地在使用者輸入框下面顯示輸出匹配的其它資訊，如下示例圖所示。
（8）實時重新整理資料（如地圖、地理資訊系統、導航系統）
相信讀者都應用過不同廠家的Web模式的地圖系統，如百度地圖、高德地圖等產品，或者提供更復雜功能的地理資訊系統（Geographic Information System，GIS）。使用者透過移動滑鼠從而觸發當前檢視的經緯度，頁面系統程式不斷地向後臺伺服器傳送請求，伺服器同樣採用無重新整理方式返回新的地理資訊資料，頁面系統程式區域性更新地圖狀況。