王仁麗+王倩
摘要:通過與傳統(tǒng)Web應(yīng)用程序模型對(duì)比,闡述了AjaX技術(shù)的基本原理和關(guān)鍵技術(shù),給出了應(yīng)用實(shí)例:基于一個(gè)手勢(shì)識(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)變得越來越流行,用戶對(duì)于Web應(yīng)用也提出了更高的要求。但傳統(tǒng)的web應(yīng)用采用的是同步交互過程,如圖1。服務(wù)器在處理請(qǐng)求時(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對(duì)象的屬性和方法來與服務(wù)器端進(jìn)行數(shù)據(jù)交互,然后再通過DOM來解析處理XML文檔和部分更新HTML頁面的內(nèi)容。圖2描述了異步Ajax操作的流程。
如圖2,當(dāng)用戶通過瀏覽器提交請(qǐng)求時(shí),請(qǐng)求數(shù)據(jù)將發(fā)送給AjaX引擎。AjaX引擎捕獲用戶輸入的請(qǐng)求數(shù)據(jù)然后再向服務(wù)器發(fā)送請(qǐng)求,此時(shí),瀏覽器不用等待服務(wù)器的響應(yīng),用戶可以繼續(xù)輸入數(shù)據(jù)。服務(wù)器處理完用戶請(qǐng)求之后,返回處理結(jié)果并改變HTTP就緒狀態(tài),一旦HTTP的就緒狀態(tài)發(fā)生改變,AjaX引擎就會(huì)調(diào)用相對(duì)應(yīng)的回調(diào)函數(shù)來接收這些處理結(jié)果并將它們更新到頁面的指定部分,瀏覽器無需刷新整個(gè)頁面就能更新頁面的部分內(nèi)容,使得用戶感覺應(yīng)用程序是立即完成的。
AjaX包括以下五個(gè)關(guān)鍵技術(shù):
(1)可擴(kuò)展標(biāo)記語言(XML):XMLHttpRequest對(duì)象可以選擇使用XML作為與服務(wù)器端通信的數(shù)據(jù)格式。
(2)XMLHttpRequest對(duì)象:負(fù)責(zé)向服務(wù)器發(fā)送請(qǐng)求并對(duì)服務(wù)器的響應(yīng)加以處理。通過與DOM和CSS的結(jié)合,就可以實(shí)現(xiàn)局部刷新的效果。
(3)文檔對(duì)象模型(DOM):DOM用來表示顯示在瀏覽器上的整個(gè)文檔對(duì)象及其層次結(jié)構(gòu)。
(4)級(jí)聯(lián)樣式表技術(shù)(CSS):可代替JavaSeript來控制外觀。
(5)JavaSeript腳本語言:使DOM、XHTML、XML和CSS可以相互協(xié)作,并控制它們的行為。
2 AjaX技術(shù)應(yīng)用于手勢(shì)識(shí)別系統(tǒng)
我們將在一個(gè)艦載機(jī)手勢(shì)識(shí)別系統(tǒng)中,實(shí)現(xiàn)分類數(shù)據(jù)在Web頁面上的定時(shí)自動(dòng)刷新。
2.1系統(tǒng)簡介
系統(tǒng)實(shí)現(xiàn)對(duì)十類靜態(tài)手勢(shì)指令的識(shí)別,接收從服務(wù)器端傳來的分類數(shù)據(jù)并顯示在Web端,并以3秒/次的頻率自動(dòng)刷新。同時(shí)根據(jù)分類數(shù)據(jù)驅(qū)動(dòng)Web頁面上的三維動(dòng)畫模型,真實(shí)表現(xiàn)出在不同手勢(shì)指令下艦載機(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地址和端口號(hào)。采用socket接口來建立TCP連接。
服務(wù)器連接過程分為準(zhǔn)備連接和接收連接:
2.3AjaX框架設(shè)計(jì)
AjaX應(yīng)用的特點(diǎn)之一就是無需刷新頁面即可向服務(wù)器傳輸或讀寫數(shù)據(jù),主要由XMLHttpRequest對(duì)象來實(shí)現(xiàn)。XMLHttpRequest用于在后臺(tái)與服務(wù)器交換數(shù)據(jù),可以在不重新加載整個(gè)網(wǎng)頁的情況下,對(duì)網(wǎng)頁的某部分進(jìn)行更新。
創(chuàng)建XMLHttpRequst對(duì)象并向服務(wù)器發(fā)送請(qǐng)求過程如下:
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ù)”的理念,盡可能減少了冗余請(qǐng)求,從而減少了用戶等待的時(shí)間和服務(wù)器的壓力。通過在艦載機(jī)手勢(shì)識(shí)別系統(tǒng)中的應(yīng)用,使得Web端展示的分類數(shù)據(jù)不需要一遍遍刷新頁面而加大用戶等待的時(shí)間,從而大大改善了系統(tǒng)性能,獲得了良好的用戶體驗(yàn)。