AJAX異步交互技術淺析

溫立輝

摘 要：針對AJAX在Web編碼開發中的應用問題，討論了AJAX異步交互技術的組件構成以及實現原理，闡述異步技術的適用場景；同時結合實際應用討論了AJAX的語法規則，最后分析了AJAX技術在B/S開發中重要作用。

關鍵詞：AJAX；異步交互；局部刷新；回調

DOI：10.16640/j.cnki.37-1222/t.2017.04.188

1 前言

AJAX是一種前端的動態交互技術，廣泛應用于基于B/S結構的Web應用開發中，其局部刷新的技術既提升用戶的體驗，同時也進一步減輕客戶端與服務器的數據交互量，為應用系統性能的提升創建了良好條件。

2 認識同步異步

在Web應用中，前后端的交互有兩種方式實現：同步及異步。同步是指完成一件任務過程中分若干步驟，每個步驟的先后順序嚴格區分，不能同時并發執行；異步則是指完成一件任務過程雖然分若干步驟，但每個步驟間沒有嚴格的先后順序，多個步驟可以在同一時間并發執行。如圖1所示的喝茶流程，使用同步方式實現從洗茶壺到泡茶，每個環節先后順序明確，整個流程需要30分鐘；如果使用異步的方式實現，在燒開水期間同時進行洗茶具、準備茶葉工作，則整個流程只需20分鐘即。從以上的流程中可以看到使用異步的實現方式明顯優于同步的方式，因而在一般的交互應用中使用異步方式居多，AJAX就是使用異步的交互技術進行前后端通信。

3 AJAX原理分析

AJAX又叫異步的JavaScript與XML，是一種融合了前端腳本、動態HTML、可擴展標記語言與DOM模型的衍生技術。其關鍵核心組件是AJAX引擎，引擎中包含XMLHttpRequest對象與Callback回調函數。在整個交互過程中XMLHttpRequest對象又是核心要點，一般在客戶端瀏覽器本身可以創建該對象，如果客戶端瀏覽器不支持此對象，則須通過DOM方式去創建。

AJAX的交互流程共有5步，如圖2所示。

（1）GUI用戶接口通過JavaScript腳本向AJAX引擎發送數據交互請求，引擎接收到請求后會創建XMLHttpRequest對象。（2）XMLHttpRequest對象通過超文本傳輸協議向Web或XML類型服務器發送業務請求，要求交互數據。（3）服務器端接收到請求后，進行相關業務邏輯處理，一般情況下還會與數據存儲源做相應的數據檢索交互。（4）Web或XML服務器處理完業務邏輯后，即刻向AJAX引擎返回數據，并觸發引擎中的Callback回調函數；返回的數據有兩種格式類型，可以是普通文本類型，也可以是XML類型。（5）Callback回調函數最終向GUI用戶接口返回HTML格式的數據包信息，包括CSS樣式，向用戶進行展示，實現局部刷新的效果。

與傳統的Web交互模式相比，AJAX交互模式中間多了交互引擎。傳統的交互方式是GUI直接向Web服務器發送數據交互請求，之后GUI一直處于等待狀態，一直到服務器端有數據響應后才能進行其它的操作，對用戶來說體驗相對較差；而AJAX交互則是從GUI向引擎發送請求，再由AJAX引擎向Web服務端發數據交互請求，如果Web服務的數據處理時間較長，步驟1完成后可不必等待步驟5響應即可進行其它的操作，因而能夠更好的改善用戶體驗。

4 AJAX實現過程

根據上面的原理分析可知，AJAX技術不是一門新技術，而是幾種前端技術的機組合，要實現一個完整的AJAX應用，大概有如下幾個要點。首先，創建XMLHttpRequest對象，這是關鍵核心所在，一般在瀏覽器中可創建該對象，特殊情況下需使用DOM方式實現。其次，定義回調函數，當Web服務器端有數據響應時會自動觸發該函數，在該函數需判斷數據的響應狀態以及HTTP協議狀態。最后，設置好相關參數、請求URL，使用Open的方法與服務器建立連接，并向服務發送數據，并指定回調函數。

實現以上三個要點，一個AJAX應用即可展現在你的面前，作為開發人員即可感受到征服AJAX技術的成就感。

5 結束語

AJAX不是一種新的編程語言，是一種用于創建快速動態網頁，獨立于Web服務的瀏覽器技術。因其能極好的改善用戶體驗，在1998年提出后立刻吸引了廣大開發人員的關注，并得到了廣泛的應用。AJAX雖然優勢非常明顯，但也有不夠的地方，如兼容性、穩定性相對較弱，當用戶修改瀏覽器安全等級，關閉JavaScript腳本功能后，代碼將無法工作，AJAX功能將喪失。如何進一步提升AJAX的兼容性是未來研究的重點。

參考文獻：

[1]王建國.Ajax技術在網站開發中的應用研究[J].湖南城市學院學報：自然科學版，2016（01）：155-156.

[2]李志偉.基于AJAX的網頁信息交互技術要點及優勢[J].產業與科技論壇，2016（09）：86-86.

[3]靖偉.Ajax技術的研究與應用[J].中國傳媒大學學報：自然科學版，2015，22（06）：50-55.

[4]王玉娟，徐繞山.Ajax技術缺陷及其優化[J].科技傳播，2010（06）：84-84，86.

[5]周柱，郎朗.Ajax技術在B/S架構中的數據傳輸應用研究[J].新余學院學報，2016，21（03）：109-113.