溫立輝

摘 要：針對AJAX在Web編碼開發(fā)中的應(yīng)用問題，討論了AJAX異步交互技術(shù)的組件構(gòu)成以及實現(xiàn)原理，闡述異步技術(shù)的適用場景；同時結(jié)合實際應(yīng)用討論了AJAX的語法規(guī)則，最后分析了AJAX技術(shù)在B/S開發(fā)中重要作用。

關(guān)鍵詞：AJAX；異步交互；局部刷新；回調(diào)

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

1 前言

AJAX是一種前端的動態(tài)交互技術(shù)，廣泛應(yīng)用于基于B/S結(jié)構(gòu)的Web應(yīng)用開發(fā)中，其局部刷新的技術(shù)既提升用戶的體驗，同時也進一步減輕客戶端與服務(wù)器的數(shù)據(jù)交互量，為應(yīng)用系統(tǒng)性能的提升創(chuàng)建了良好條件。

2 認識同步異步

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

3 AJAX原理分析

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

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

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

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

4 AJAX實現(xiàn)過程

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

實現(xiàn)以上三個要點，一個AJAX應(yīng)用即可展現(xiàn)在你的面前，作為開發(fā)人員即可感受到征服AJAX技術(shù)的成就感。

5 結(jié)束語

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

參考文獻：

[1]王建國.Ajax技術(shù)在網(wǎng)站開發(fā)中的應(yīng)用研究[J].湖南城市學(xué)院學(xué)報：自然科學(xué)版，2016（01）：155-156.

[2]李志偉.基于AJAX的網(wǎng)頁信息交互技術(shù)要點及優(yōu)勢[J].產(chǎn)業(yè)與科技論壇，2016（09）：86-86.

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

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

[5]周柱，郎朗.Ajax技術(shù)在B/S架構(gòu)中的數(shù)據(jù)傳輸應(yīng)用研究[J].新余學(xué)院學(xué)報，2016，21（03）：109-113.