靖偉

(中國傳媒大學 信息工程學院，北京 100024)

Ajax技術(shù)的研究與應用

靖偉

(中國傳媒大學 信息工程學院，北京 100024)

Ajax技術(shù)作為Web2.0時代的重要產(chǎn)物，已經(jīng)越來越多的應用在當今的互聯(lián)網(wǎng)產(chǎn)品中。通過它實現(xiàn)無刷新更新頁面的方式，使用戶能夠方便快捷的訪問應用，增加了互動性，降低了服務器負擔，節(jié)省了帶寬。本文針對移動端Web應用中倒計時的問題展開研究，在介紹了Ajax的關(guān)鍵技術(shù)，分析了引入Ajax技術(shù)的站點相對于傳統(tǒng)Web站點的優(yōu)勢。利用Ajax技術(shù)和差值補償?shù)姆椒ㄟ_到了無刷新同步本地時間，以保證多終端系統(tǒng)計時的同步性。最后通過一個典型的應用：“定時搶票系統(tǒng)”的實現(xiàn)進一步證明了Ajax技術(shù)在時間同步方面的優(yōu)勢。

Ajax；HTML；異步交互；時間同步

1 引言

2004年出版社經(jīng)營者O’Reilly和MediaLive International之間的一場頭腦風暴論壇。為我們帶來了Web2.0這一劃時代的概念。Web2.0的核心思想是用戶參與網(wǎng)站內(nèi)容的創(chuàng)造，注重交互性以及設計符合W3C標準的網(wǎng)站。Ajax作為Web2.0的核心技術(shù)，對于構(gòu)建更有吸引力的交互式網(wǎng)站，起到了不可替代的作用。當前基于Ajax的應用種類繁多，諸如谷哥公司推出的Google Maps能夠提供世界范圍內(nèi)的地圖搜索服務；Amazon的鉆石搜索應用使用戶能夠體驗到快捷的購物方式；Gmail利用Ajax技術(shù)實現(xiàn)了功能豐富的系統(tǒng)應用[1]。與此同時，我國的研究人員也在尋求著Ajax技術(shù)在不同領(lǐng)域應用的新途徑。為確保通信的健全性，肖斌等人對傳統(tǒng)Web 框架的系統(tǒng)存在用戶等待時間長、經(jīng)常出現(xiàn)白頁的問題，提出了采用HTTP壓縮方法和緩存等技術(shù)來提高數(shù)據(jù)傳輸性能的Ajax模型。通過改善Ajax應用程序的性能，提高了網(wǎng)絡反映速度，獲得了高質(zhì)量、快速和健壯的網(wǎng)絡通信[2]。周揚在動態(tài)加載、預見式緩存、內(nèi)容分塊等方面提出了Ajax應用的設計模式。為 AJAX 應用設計提供了較為通用的設計思路和更加規(guī)范、合理的體系結(jié)構(gòu)，在一定程度上簡化了 AJAX 應用開發(fā)的難度，有效改善了程序的性能[3]。在網(wǎng)絡時間同步方面Cristian算法[4]、Berkeley算法[5]、優(yōu)化時鐘同步算法[6]等，在一方面保證了信息在網(wǎng)絡傳遞過程中的時間的同步性。趙英等人將Web Services技術(shù)引入時間同步研究領(lǐng)域，建立了面向網(wǎng)絡時間同步服務的Web Services體系結(jié)構(gòu)，使客戶端利用客戶機發(fā)送查詢請求的時間、服務器收到查詢請求的時間、服務器應答時間信息包的時間以及客戶機收到服務器返回時間信息包的時間這四個時間戳來計算它與服務器間的時間偏移和包交換的往返延遲，然后使用時間偏移來調(diào)整本地時間，讓客戶機與服務器的時間保持同步。這種方法幫助了客戶端拋開各種不同的網(wǎng)絡環(huán)境進行時間同步[7]。在移動客戶端與服務器端，應用層時間同步方面，傳統(tǒng)的應用往往通過頁面定期刷新更新同步時間，或者在頁面加載時獲取一次標準時間而后進行本地計時。這樣經(jīng)過長時間計時往往會造成較大的誤差。隨著Ajax技術(shù)的出現(xiàn)，通過Ajax層請求服務器時間，可以使客戶端頁面在不刷新的情況下快速的取得服務器標準時間，進而進行使本地時間同步，為多終端的精確時間同步帶來了可能性。

2 Ajax技術(shù)簡述

Ajax全稱為“Asynchronous JavaScript and XML”(異步JavaScript和XML)，是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術(shù)。Ajax是目前在瀏覽器中通過JavaScript腳本可以使用的所有技術(shù)的集合。Ajax并沒有創(chuàng)造出某種具體的新技術(shù)，它所使用的都是已經(jīng)存在并且較為成熟的技術(shù)，Ajax通過一種嶄新的方式將這些技術(shù)整合到一起。具體來說包括以下技術(shù)：

(1) XHTML：可擴展超文本標記語言。

(2)CSS：級聯(lián)樣式表，它負責客戶端頁面樣式的展現(xiàn)。

(3)DOM：文檔對象模型，表示和處理一個HTML或XML文檔的常用方法。

(4)JavaScript：一種成熟的客戶端腳本語言，JavaScript通過操縱DOM來改變前端頁面結(jié)構(gòu)。

(5)XML：可擴展標記語言，一種適用于Ajax的語言傳輸格式。

Ajax技術(shù)的核心在于異步通信，不必整體刷新頁面，從而減少了數(shù)據(jù)傳輸量，提高了Web應用的響應速度，給用戶帶來了良好的體驗。Ajax可以在頁面內(nèi)與服務器通信，使得構(gòu)建智能化的客戶端控件成為可能。例如：數(shù)據(jù)表格，樹型控件等各種復雜的控件。智能化的客戶端控件可以通過XMLHttpRequest對象與服務器通信，獲取數(shù)據(jù)，并可緩沖和處理數(shù)據(jù)。這使得許多工作可以在客戶端完成，例如：數(shù)據(jù)效驗、表單驗證等。Ajax技術(shù)極大地改善了Web應用的可用性和用戶的交互體驗，最終得到了用戶和市場的廣泛認可。

Ajax技術(shù)有著眾多不可取代的優(yōu)勢的同時也存在著一些缺點。Ajax中的一個頁面并不僅僅作為一個顯示層表示。作為一個可操作界面，用戶可以點擊頁面上的元素，達到更新局部數(shù)據(jù)的目的。這時一個頁面可以表示為多個狀態(tài)。那么問題就出現(xiàn)了，雖然頁面改變了多個狀態(tài)，但是他的URL沒有改變，所以致使瀏覽器的前進后退功能失敗[8]。

3 移動端的時間同步

3.1 Ajax技術(shù)與時間同步方式的改變

早在Web1.0時代，頁面應用相對較少，主要為門戶網(wǎng)站，而用戶對于互聯(lián)網(wǎng)的需求也主要以瀏覽信息為主。那時候應用的頁面計時方式只是在頁面加載時獲取一次服務器時間進行計時，而由于網(wǎng)絡系統(tǒng)的傳輸延時、受客戶端影響的腳本運行時間誤差等都會影響計時精度，也無法進行后續(xù)的時間同步。隨著Web2.0時代的到來，Ajax技術(shù)的出現(xiàn)為許多新的應用提供了必要的條件，同時也為客戶端精準計時提供了可能性。

(1) Web1.0模式下的時間同步方式

在傳統(tǒng)的Web1.0模式下，計時方式主要采取同步方式，當頁面加載后，客戶端會從服務器獲得服務器端標準時間，來同步一次本地時間，后面的計時會在本地完成，通過腳本語言設置時間間隔來使標準時間改變。但由于腳本的本地運行會受到終端設備的影響長時間會有積累誤差，造成計時不準。要想消除誤差只能通過控制頁面強制刷新。其過程如下：

如圖1所示，腳本控制頁面刷新，客戶端會發(fā)出一個HTTP請求，在這期間它會一直等待服務器響應。而服務器在收到請求后，將處理好的數(shù)據(jù)返回客戶端。瀏覽器在收到返回的HTML、CSS、JavaScript等文件數(shù)據(jù)，再進行渲染，呈現(xiàn)出頁面。當前大多數(shù)Web頁面含有大量圖片、JavaScript制作的動態(tài)插件等，而我們需要的僅僅是服務器的時間數(shù)據(jù)，頁面也會再次刷新，這些文件會被無意義的再次請求與傳輸。這無疑增加了用戶等待時間，影響體驗，也造成了空間上多余的數(shù)據(jù)傳輸，影響帶寬。

圖1 傳統(tǒng)請求模式

對于時間精度要求不高的應用來說可以采取這種方式。加載時同步一次時間，后續(xù)進行本地計算，不再進行與服務器的時間同步。

(2)基于Ajax的時間同步方式

與傳統(tǒng)的Web技術(shù)不同，Ajax采用的是異步交互處理技術(shù)。使用其可以方便的獲取服務器基準時間而無需刷新頁面。如圖2所示，為了改變傳統(tǒng)的Web客戶端和服務器的“請求——等待——請求——等待”的模式，在用戶瀏覽器和服務器之間設計一個中間層——即Ajax層。

圖2 Ajax請求模式

Ajax的工作原理是：客戶端瀏覽器在運行時首先加載一個Ajax引擎(該引擎由JavaScript編寫)；Ajax引擎創(chuàng)建一個異步調(diào)用的對象XMLHttpRequest，向Web服務器發(fā)出一個HTTP請求并監(jiān)聽端口動態(tài)；服務器收到請求后，從數(shù)據(jù)庫中取出數(shù)據(jù)。由于Ajax支持三種數(shù)據(jù)傳輸格式即Json，XML和Text，所以服務器將數(shù)據(jù)打包成的所需要格式返回客戶端；當Ajax所監(jiān)聽的端口，發(fā)現(xiàn)數(shù)據(jù)傳輸完畢后，通過Ajax引擎接收返回的結(jié)果，最后交由JavaScript對數(shù)據(jù)作相應的處理。

上述過程可以看出，客戶端發(fā)出的對于服務器時間的HTTP請求和數(shù)據(jù)的接收全部承接給了Ajax層，再由腳本語言對時間數(shù)據(jù)進行處理達到本地時間的同步化，通過DOM使頁面結(jié)構(gòu)部分改變，而非整個頁面的重載。在這個處理過程中頁面處于相對靜止的狀態(tài)，用戶在這期間可以進行其他操作。異步交互時序如圖3所示。這也就是Ajax技術(shù)在客戶端時間同步方面的魅力所在。

3.2 移動端時間同步要考慮的問題

移動端應用以其方便快捷輕巧的優(yōu)勢，為用戶所喜愛，但同時移動終端在時間同步方面在考慮到普通Web應用共有特點的同時，也要顧及其特殊性。具體要考慮以下幾個方面：

(1)手機鎖屏后系統(tǒng)休眠

一般倒計時系統(tǒng)當用戶第一次登陸時獲取一次服務器時間，再與本地時間計算差值。這樣當手機鎖屏后系統(tǒng)處于休眠狀態(tài)，屏幕再次開啟，前端頁面會保持原有狀態(tài)，JavaScript腳本不會重新加載并運行。這時倒計時系統(tǒng)還是會從鎖屏前一時刻繼續(xù)計時，從而產(chǎn)生了問題。這對于倒計時系統(tǒng)而言，會有致命的缺陷。

(2)客戶端修改本地時間

由于計時要部分依賴于客戶端本地時間，如果在計時過程中人為的修改本地系統(tǒng)時間，則可能會對計時系統(tǒng)產(chǎn)生影響。

(3)網(wǎng)絡延時以及系統(tǒng)效率

由于計時系統(tǒng)需要精確的計時基準，但是系統(tǒng)運行時的網(wǎng)絡狀況難以確定，若采取進入頁面后一次讀取服務器時間作為基準，可能會出現(xiàn)計時偏差。而若過于頻繁的通過服務器同步本地時間又會影響系統(tǒng)運行效率。

圖3 時序圖

3.3 差值補償算法

移動端帶有倒計時的應用最重要的是實現(xiàn)多終端時間同步，確保所有用戶使用的是同一基準時間。目前比較常用的方法就是根據(jù)基準時間使用周期函數(shù)并設置時間間隔來計算最新的時間，這樣的問題在于函數(shù)周期運行的時間精度比較低，經(jīng)測試一分鐘大概能相差幾秒，這與電腦性能以及運行的任務也相關(guān)，這樣的誤差在某些需求下是無法滿足的。

因而通過Ajax定期取得服務器時間來更新基準時間，是十分便捷的辦法。但是為了保證系統(tǒng)的運行效率，獲取時間的間隔不能過長。同時為了保證手機鎖屏或用戶修改客戶端系統(tǒng)時間而帶來的時間不一致問題，采用一種改良的時間差值補償方式。

設客戶端時間為CT，服務器時間為ST，在頁面加載的時候計算出客戶端與服務器的時間差值為ΔT。當客戶端時間被用戶修改或手機鎖屏造成的停止計時，一旦出現(xiàn)這樣的狀況，計算出來的服務器時間也將隨之發(fā)生變化。這就需要檢測出客戶端時間的變化并消除這個變化。檢測的方法是，即在每個計算周期(T)都將當時的客戶端時間(CT2)與上一個周期的客戶端時間(CT1)做比較，一旦兩個周期的差值：

ΔT’=CT2-CT1-T

大于某個預設值S時就將差值ΔT’加入到ΔT中，即此時的ΔT = ΔT + ΔT’。之所以需要設置一個預設值，是因為每個周期的時間本身不是固定的，它要依賴于周期函數(shù)的運行情況，因此ΔT’并不會等于0，如果每次都將周期函數(shù)造成的誤差作為CT與ST之間的誤差將會造成計算不準確。而通過Ajax定期獲取服務器時間來更新基準時間是對周期函數(shù)的累積誤差進行消除。經(jīng)過以上的計算，用戶修改時間或手機鎖屏后將不會對計算結(jié)果產(chǎn)生影響。

4 Ajax在移動端APP定時搶票系統(tǒng)中的應用

4.1 設計需求

搶票系統(tǒng)要求設置一個基準搶票時間，客戶端應用實時的將倒計時顯示給用戶，如圖4所示，到達基準時間系統(tǒng)開放可以搶票。由于搶票系統(tǒng)為多終端大并發(fā)量的系統(tǒng)，要求倒計時精準無誤，設計系統(tǒng)時要考慮到3.2節(jié)所涉及的問題。

圖4 UI

4.2 總體設計

(1)創(chuàng)建XMLHttpRequest對象

要實現(xiàn)網(wǎng)頁的動態(tài)化，Ajax的XMLHttpReques對象是最為關(guān)鍵的一環(huán)，使用XMLHttpReques對象可以方便的實現(xiàn)與服務器的數(shù)據(jù)交互。

首先判斷瀏覽器類型，因為瀏覽器版本類型不同，支持的標準不同，要先進行兼容性測試。IE6、IE5支持創(chuàng)建的Ajax對象為ActiveXObject(“Microsoft.XMLHTTP”)，IE7以上以及 Firefox、Chrome、Opera、Safari瀏覽器都是支持標準規(guī)范創(chuàng)建XMLHttpReques對象。

if (window.XMLHttpRequest)

{ // code for IE7+，F(xiàn)irefox，Chrome，

//Opera，Safari

xmlhttp=new XMLHttpRequest()；

}

else

{ // code for IE6，IE5

xmlhttp=new

ActiveXObject("Microsoft.XMLHTTP")；

}

(2)發(fā)送請求

通過XMLHttpRequest對象的open()和send()方法發(fā)送HTTP請求。其中open(Method，Url，Synch)方法有三個參數(shù)，Method 參數(shù)提供HTTP方法，如POST、GET等，見表1。 Url參數(shù)提供請求的URL地址，可以為絕對地址也可以為相對地址。Async參數(shù)為布爾型，指定此請求是否為異步方式，默認為true。如果為真，當狀態(tài)改變時會調(diào)用onreadystatechange屬性指定的回調(diào)函數(shù)。

表1 發(fā)送模式

設置5000ms鐘讀取一次服務器時間，用以消除本地計時帶來的誤差。

function GetRTime(){

xmlhttp.open(“GET”，“timeNew.asp”，true)；//

xmlhttp.send()；

}

setInterval(“GetRTime()”，5000)；

(3)端口監(jiān)聽

通過監(jiān)聽XMLHttpRequest對象的屬性onreadystatechange得出何時數(shù)據(jù)傳輸完畢，當狀態(tài)碼為4時表示服務器已經(jīng)傳回所有的信息，Status值為200表示頁面正常，當符合這兩個條件則接受數(shù)據(jù)。

xmlhttp.onreadystatechange=function()

{ //監(jiān)聽端口

if(xmlhttp.readyState==4&&

xmlhttp.status==200)

{ //接收數(shù)據(jù)并處理

var differentSec=xmlhttp.responseText；

manageTime(differentSec)}}

其他屬性如表2所示。

表2 其他屬性

最后接受到的數(shù)據(jù)通過manageTime()函數(shù)進行處理，算法采用3.3節(jié)介紹的時間補償方法。該方法消除了因修改客戶端時間或手機鎖屏而帶來的計時問題。

(4)服務端

服務器端負責響應Ajax發(fā)來的基準時間請求。由于搶票系統(tǒng)要求實現(xiàn)預設時間系統(tǒng)

開放，需要在后臺設置標記文件。當票已搶光，標記文件修改。

采用Ajax技術(shù)的定時搶票系統(tǒng)，實現(xiàn)了客戶端與服務器進行異步交互進行時間同步的目的。由于采用異步交互的方法，Ajax在進行數(shù)據(jù)傳輸過程中不會影響用戶的其他操作，頁面無需刷新即可準確的更新時間。通過設置時間差值補償措施，避免了因手機鎖屏或客戶端時間修改而造成的倒計時錯誤。

4.3 實驗及結(jié)果

客戶端采用10臺不同型號的IOS和安卓系統(tǒng)手機，系統(tǒng)開放時間為下午4：00，后臺記錄的搶票者信息，順序為搶票時間，如圖5所示。

圖5 參加者信息

第一個進入系統(tǒng)號碼為12211435832的終端成功搶到票，如圖6所示。

圖6 個人信息

5 總結(jié)

Ajax作為一種Web2.0時代重要的技術(shù)，在現(xiàn)

代互聯(lián)網(wǎng)應用中的使用空間越來越大。本文介紹了Ajax的主要技術(shù)，分析了它的優(yōu)勢與不足之處。通過對Ajax技術(shù)的一個典型應用，客戶端服務器時間同步問題展開研究，并提出了解決方案。最后通過一個實例應用——“定時搶票系統(tǒng)”的設計，證明了Ajax技術(shù)的易用性。Ajax技術(shù)終將在現(xiàn)代互聯(lián)網(wǎng)發(fā)展中綻放出璀璨的光芒。

[1]丁娜.基于Ajax的WEB2.0技術(shù)研究[D].浙江大學.2007.

[2]肖斌，汪敏.基于Ajax通信的數(shù)據(jù)傳輸優(yōu)化[J].通信技術(shù)，2011，34(3).

[3]周揚.Ajax應用的典型設計模式[J].計算機系統(tǒng)應用，2011，20(1).

[4]Cristian F.Probabilistic clock synchronization[J].Distributed Computing，1989，3(3)：146-158.

[5]Gusella R，Zatti S.The accuracy of clock synchronization achieved by TEMPO in Berkeley Unix 4.3 BSD[J].IEEE Trans Software Engineering，1989，15(7)：847-853.

[6]Anceaume E，Puaut I.A taxonomy of clock synchronization algorithms[R].Washington：IRISA，1997.

[7]趙英，史莉，張瑩瑩.基于Web Services的網(wǎng)絡時間同步[J].北京化工大學學報，2006，32(2).

[8]馮振興.Ajax技術(shù)在Web系統(tǒng)中的應用研究[D].北京林業(yè)大學，2008.

[9]柯昌正，黃厚寬.Ajax技術(shù)的原理與應用[J].鐵路計算機應用，2007，16(1)：27-29.

[10]姜皓文.基于狀態(tài)轉(zhuǎn)換的動態(tài)爬蟲系統(tǒng)設計與實現(xiàn)[D].中山大學，2014.

[11]Ajax數(shù)據(jù)庫實例[EB/OL].http：//www.w3school.com.cn/ajax/ajax_database.asp，2015.03.

(責任編輯：王謙)

The Research and Application of Ajax Technology

JING Wei

(School of Information and Engineering，Communication University of China，Beijing 100024，China)

As an important technology which comes from Web2.0 era，Ajax has been used more and more in today’s Internet products.By implementing the way without refreshing updates page，Ajax brings to the users of good experience at the same time reduces the burden of the server and saves bandwidth.The paper concentrates on the problem of countdown in mobile Web application and introduces the key technology of Ajax and analyzes the advantages of the Web site which uses the Ajax technology compared with the traditional Web site.By using the method of Ajax technology and the compensation of time difference in order to update local time without refresh the web page.Through this we can ensure the synchronism of multi terminal system.The design of rob ticket system proves the advantage of Ajax technology further.

Ajax；HTML；asynchronous interaction；time synchronization

2015-04-27

靖偉(1989-)，男(漢族)，天津人，中國傳媒大學碩士研究生.E-mail：jingwei610032626@sina.com

TP311

A

1673-4793(2015)06-0050-06