AJAX如何達成非同步運作？

AJAX並非是一個技術（Technology），而是一種網站設計的架構（Architecture），雖然主要以JavaScript與XML為主，但還包括其它成員，也就是CSS、DOM（Document Object Model）與HTML等，特別是XMLHttpRequest元件，使AJAX能達到非同步資料交換的目的。在Jesse Garrett的文章中，對AJAX的定義如下：

● 使用XHTML與CSS作為展現標準
● 使用DOM作為動態顯示與互動
● 使用XML與XSLT作為資料交換與運用
● 使用XMLHttpRequest作為非同步的資料回饋
● 使用JavaScript結合以上所有結果

採用AJAX，用戶端瀏覽或使用網頁時，如同在個人電腦中的應用程式一樣，不會感覺到網頁與後端伺服器交談過程，以及資料刷新的細節，頁面也不需要換頁，資料的交換等動態動作隱藏在背景執行。簡單地說，AJAX網頁有兩種主要特性：向伺服器發出請求，以及回傳結果時，瀏覽器不需要重新載入所有頁面；藉由XML解析傳遞與交換的資料。

使用者在瀏覽傳統的網頁時，背後的流程模型如下面插圖所示：
使用者在網頁的操作時，經由滑鼠或鍵盤動作，觸發一個HTTP的請求（Request）服務，傳給後端的網頁伺服器，伺服器接受到這個請求後，根據資料與程式的設定完成邏輯處理後，例如與其它伺服器運算或交換數據等，最後將結果以HTML網頁的格式回傳到用戶端。這種處理流程對於大量使用HTML撰寫的靜態網頁相當有用，但對於動態網頁卻相當不方便，因為當後端的伺服器在處理數據或資料時，使用者處於等待的狀態，直到伺服器將結果回傳用戶端，使用者才知道結果。

這個問題在於使用者只是為了驗證一筆網頁中的資料，或是單純地想知道更一進的內容，但是，他必須等到伺服器處理完畢後，才知道資料正確與否或是不是他所想要知道的內容。如果每個請求都需要刷新頁面或換頁，使用者會因為冗長的等待，而失去耐性；進而不再造訪該網站。

這種差異，在處理流程圖中的時間軸看出，使用者在傳統網頁中所觸發的每個動作，必須等待伺服器處理完成後回傳，才能操作下一步的瀏覽動作，也就是瀏覽器與伺服器循序地交談，造成兩者的資料處於同步狀態。

但在AJAX網頁中，使用者發出HTTP請求，都經過AJAX引擎與伺服器交談，此時，使用者可以繼續操作頁面中其它動作，因此頁面呈現與處理過程，藉由AJAX層的代理，而能不同步運作。

一般的網頁處理流程，採用循序的方式，但使用者多數時間都在等待處理器回傳結果，也因此瀏覽器與伺服器中的資料是同步的。AJAX則將瀏覽動作與資料處理過程分開，所以瀏覽器與伺服器是處於非同步的運作中。AJAX在相同流程中，使用了AJAX引擎作為伺服器與瀏覽器間的中介層，這個引擎主要以JavaScript撰寫而成。

當一個程序（Session）開始時，瀏覽器會先載入AJAX引擎，負責處理使用者介面，以及與後端的伺服器交換資料。從圖中可以看出，AJAX引擎與伺服器交談時，都是透過XML格式，所以處理完成的資料，不會直接回傳HTML格式的網頁給瀏覽器，而是先回傳XML格式到AJAX引擎，再經由它解析成HTML格式呈現在瀏覽器中。因此，使用者除了不需要等待處理結果回傳才能決定下一個動作外，也不需要刷新頁面才能瀏覽更多的內容，AJAX引擎代理這些動作，並讓所有過程都在同一頁面中完成，所以稱為「非同步」。使用者瀏覽網頁，與瀏覽器和伺服器間交換資料間的動作是分開處理的，最明顯的是，使用者不會看到滑鼠指標呈現沙漏的等待狀態。文⊙張瑞隆