Ajax技術的研究與應用

靖偉

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

Ajax技術的研究與應用

靖偉

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

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

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

1 引言

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

2 Ajax技術簡述

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

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

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

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

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

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

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

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

3 移動端的時間同步

3.1 Ajax技術與時間同步方式的改變

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

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

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

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

圖1 傳統請求模式

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

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

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

圖2 Ajax請求模式

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

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

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

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

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

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

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

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

(3)網絡延時以及系統效率

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

圖3 時序圖

3.3 差值補償算法

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

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

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

ΔT’=CT2-CT1-T

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

4 Ajax在移動端APP定時搶票系統中的應用

4.1 設計需求

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

圖4 UI

4.2 總體設計

(1)創建XMLHttpRequest對象

要實現網頁的動態化，Ajax的XMLHttpReques對象是最為關鍵的一環，使用XMLHttpReques對象可以方便的實現與服務器的數據交互。

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

if (window.XMLHttpRequest)

{ // code for IE7+，Firefox，Chrome，

//Opera，Safari

xmlhttp=new XMLHttpRequest()；

}

else

{ // code for IE6，IE5

xmlhttp=new

ActiveXObject("Microsoft.XMLHTTP")；

}

(2)發送請求

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

表1 發送模式

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

function GetRTime(){

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

xmlhttp.send()；

}

setInterval(“GetRTime()”，5000)；

(3)端口監聽

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

xmlhttp.onreadystatechange=function()

{ //監聽端口

if(xmlhttp.readyState==4&&

xmlhttp.status==200)

{ //接收數據并處理

var differentSec=xmlhttp.responseText；

manageTime(differentSec)}}

其他屬性如表2所示。

表2 其他屬性

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

(4)服務端

服務器端負責響應Ajax發來的基準時間請求。由于搶票系統要求實現預設時間系統

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

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

4.3 實驗及結果

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

圖5 參加者信息

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

圖6 個人信息

5 總結

Ajax作為一種Web2.0時代重要的技術，在現

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

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

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

[3]周揚.Ajax應用的典型設計模式[J].計算機系統應用，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的網絡時間同步[J].北京化工大學學報，2006，32(2).

[8]馮振興.Ajax技術在Web系統中的應用研究[D].北京林業大學，2008.

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

[10]姜皓文.基于狀態轉換的動態爬蟲系統設計與實現[D].中山大學，2014.

[11]Ajax數據庫實例[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