溫立輝

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

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

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

1 前言

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

2 認(rèn)識(shí)同步異步

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

3 AJAX原理分析

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

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

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

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

4 AJAX實(shí)現(xiàn)過(guò)程

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

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

5 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

[3]靖?jìng)?Ajax技術(shù)的研究與應(yīng)用[J].中國(guó)傳媒大學(xué)學(xué)報(bào)：自然科學(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é)報(bào)，2016，21（03）：109-113.