王仁麗+王倩

摘要：通過與傳統(tǒng)Web應(yīng)用程序模型對比，闡述了AjaX技術(shù)的基本原理和關(guān)鍵技術(shù)，給出了應(yīng)用實(shí)例：基于一個(gè)手勢識(shí)別系統(tǒng)，采用Python腳本搭建Web服務(wù)器，實(shí)現(xiàn)并分析AjaX技術(shù)在其Web端數(shù)據(jù)的定時(shí)自動(dòng)刷新效果。實(shí)驗(yàn)結(jié)果表明，AjaX的應(yīng)用減少了用戶等待的時(shí)間和服務(wù)器的壓力，獲得了良好的系統(tǒng)性能和用戶體驗(yàn)。

關(guān)鍵詞：AjaX；Web應(yīng)用；自動(dòng)刷新；Python

引言

隨著互聯(lián)網(wǎng)變得更加成熟，具有響應(yīng)性的用戶界面和交互功能豐富的web應(yīng)用已經(jīng)變得越來越流行，用戶對于Web應(yīng)用也提出了更高的要求。但傳統(tǒng)的web應(yīng)用采用的是同步交互過程，如圖1。服務(wù)器在處理請求時(shí)用戶只能等待，此時(shí)瀏覽器顯示的頁面是空白或無響應(yīng)狀態(tài)，大大降低了用戶體驗(yàn)。直到2005年AjaX的出現(xiàn)。它采用異步交互方式，在用戶和服務(wù)器之間引入了一個(gè)中間媒介，改變了同步交互過程中的“處理-等待-處理-等待”模式。使得Web頁面不用打斷交互流程進(jìn)行重新加裁，就可以動(dòng)態(tài)地更新。因此，AjaX技術(shù)被廣泛應(yīng)用在電子商務(wù)、環(huán)保監(jiān)控系統(tǒng)、網(wǎng)絡(luò)考試系統(tǒng)、校友會(huì)網(wǎng)絡(luò)系統(tǒng)平臺(tái)等其他各個(gè)領(lǐng)域中。

1AjaX工作原理

AjaX是使用客戶端腳本與Web服務(wù)器交換數(shù)據(jù)的Web應(yīng)用開發(fā)方法。AjaX引擎允許用異步的方式實(shí)現(xiàn)用戶與程序的交互，構(gòu)建基于Java技術(shù)的Web應(yīng)用，打破了使用頁面重載的慣例。

AjaX的工作原理就是在瀏覽器和服務(wù)器之間加了一個(gè)中間層，使用戶操作與服務(wù)器響應(yīng)異步化。AjaX引擎通過調(diào)用XMLHttpRequest對象的屬性和方法來與服務(wù)器端進(jìn)行數(shù)據(jù)交互，然后再通過DOM來解析處理XML文檔和部分更新HTML頁面的內(nèi)容。圖2描述了異步Ajax操作的流程。

如圖2，當(dāng)用戶通過瀏覽器提交請求時(shí)，請求數(shù)據(jù)將發(fā)送給AjaX引擎。AjaX引擎捕獲用戶輸入的請求數(shù)據(jù)然后再向服務(wù)器發(fā)送請求，此時(shí)，瀏覽器不用等待服務(wù)器的響應(yīng)，用戶可以繼續(xù)輸入數(shù)據(jù)。服務(wù)器處理完用戶請求之后，返回處理結(jié)果并改變HTTP就緒狀態(tài)，一旦HTTP的就緒狀態(tài)發(fā)生改變，AjaX引擎就會(huì)調(diào)用相對應(yīng)的回調(diào)函數(shù)來接收這些處理結(jié)果并將它們更新到頁面的指定部分，瀏覽器無需刷新整個(gè)頁面就能更新頁面的部分內(nèi)容，使得用戶感覺應(yīng)用程序是立即完成的。

AjaX包括以下五個(gè)關(guān)鍵技術(shù)：

（1）可擴(kuò)展標(biāo)記語言（XML）：XMLHttpRequest對象可以選擇使用XML作為與服務(wù)器端通信的數(shù)據(jù)格式。

（2）XMLHttpRequest對象：負(fù)責(zé)向服務(wù)器發(fā)送請求并對服務(wù)器的響應(yīng)加以處理。通過與DOM和CSS的結(jié)合，就可以實(shí)現(xiàn)局部刷新的效果。

（3）文檔對象模型（DOM）：DOM用來表示顯示在瀏覽器上的整個(gè)文檔對象及其層次結(jié)構(gòu)。

（4）級聯(lián)樣式表技術(shù)（CSS）：可代替JavaSeript來控制外觀。

（5）JavaSeript腳本語言：使DOM、XHTML、XML和CSS可以相互協(xié)作，并控制它們的行為。

2 AjaX技術(shù)應(yīng)用于手勢識(shí)別系統(tǒng)

我們將在一個(gè)艦載機(jī)手勢識(shí)別系統(tǒng)中，實(shí)現(xiàn)分類數(shù)據(jù)在Web頁面上的定時(shí)自動(dòng)刷新。

2.1系統(tǒng)簡介

系統(tǒng)實(shí)現(xiàn)對十類靜態(tài)手勢指令的識(shí)別，接收從服務(wù)器端傳來的分類數(shù)據(jù)并顯示在Web端，并以3秒/次的頻率自動(dòng)刷新。同時(shí)根據(jù)分類數(shù)據(jù)驅(qū)動(dòng)Web頁面上的三維動(dòng)畫模型，真實(shí)表現(xiàn)出在不同手勢指令下艦載機(jī)的不同狀態(tài)。

2.2服務(wù)器搭建

由于Python具有非常簡捷而清晰的語法特點(diǎn)，適合完成各種高層任務(wù)，幾乎可以在所有的操作系統(tǒng)中運(yùn)行，相比于其他編程語言也更易于理解。將采用Python腳本語言搭建Web服務(wù)器。

網(wǎng)絡(luò)通信的基本接口是socket，它擴(kuò)展了操作系統(tǒng)的基本I/O到網(wǎng)絡(luò)通信，用來確定本地和遠(yuǎn)程端點(diǎn)的IP地址和端口號。采用socket接口來建立TCP連接。

服務(wù)器連接過程分為準(zhǔn)備連接和接收連接：

2.3AjaX框架設(shè)計(jì)

AjaX應(yīng)用的特點(diǎn)之一就是無需刷新頁面即可向服務(wù)器傳輸或讀寫數(shù)據(jù)，主要由XMLHttpRequest對象來實(shí)現(xiàn)。XMLHttpRequest用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)，可以在不重新加載整個(gè)網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。

創(chuàng)建XMLHttpRequst對象并向服務(wù)器發(fā)送請求過程如下：

2.4結(jié)果分析

系統(tǒng)實(shí)現(xiàn)平臺(tái)為Linux操作系統(tǒng)，其中PY文件用于搭建系統(tǒng)服務(wù)器；.html用于實(shí)現(xiàn)數(shù)據(jù)自動(dòng)刷新；分類數(shù)據(jù)存放在txt文件中用以傳輸顯示，數(shù)據(jù)刷新周期為3s。內(nèi)容意義如下：

內(nèi)容包括代理用戶的操作系統(tǒng)為linux、使用的瀏覽器為FireFox及接收的格式，語言，連接狀態(tài)等。

實(shí)驗(yàn)結(jié)果表明，Ajax技術(shù)能夠?qū)崿F(xiàn)本系統(tǒng)定時(shí)刷新數(shù)據(jù)的需求，完成了每3s刷新一次數(shù)據(jù)的任務(wù)。

3總結(jié)

Ajax不是一種技術(shù)，而是將多種技術(shù)結(jié)合應(yīng)用。它減少了不必要的數(shù)據(jù)傳輸，實(shí)現(xiàn)了“按需取數(shù)據(jù)”的理念，盡可能減少了冗余請求，從而減少了用戶等待的時(shí)間和服務(wù)器的壓力。通過在艦載機(jī)手勢識(shí)別系統(tǒng)中的應(yīng)用，使得Web端展示的分類數(shù)據(jù)不需要一遍遍刷新頁面而加大用戶等待的時(shí)間，從而大大改善了系統(tǒng)性能，獲得了良好的用戶體驗(yàn)。