Ajax技术的研究与应用

第22卷,第6期中国传媒大学学报自然科学版Vol 22. No 62015F 12 H JOURNAL OF COMMUNICATION UNIVERSITY OF CHINA(SCIENCE AND TECHNOLOGY)Dec,2015Ajax技术的研究与应用靖伟(中国传媒大学信息工程学院,北京100024)摘要:Aa技术作为Web2.0时代的重要产物,已经越来越多的应用在当今的互联网产品中。通过它实现无刷新更新页面的方式,使用户能够方便快捷的访问应用,增加了互动性,降低了服务器负担,节省了带宽。本文针对移动端Web应用中倒计时的问题展开研究,在介绍了Ajax的关键技术,分析了引入Ajax技术的站点相对于传统Web站点的优势。利用Aja技术和差值补偿的方法达到了无刷新同步本地时间,以保证多终端系统计时的同步性。后通过一个典型的应用:“定时抢票系统”的实现进一步证明了Ajax技术在时间同步方面的优势关键词:Ajax;HTML;异步交互;时间同步中图分类号:TP31文献标识码:A文章编号:1673-4793(2015)06-0050-06The Research and Application of Ajax TechnologyJING WeiSchool of Information and Engineering, Communication University of China, Beijing 100024, China)Abstract: As an important technology which comes from Web2.0 era, Ajax has been used more and moretoday s Internet products. By implementing the way without refreshing updates page, Ajax brings to theusersexperience 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 technolo-gy of Ajax and analyzes the advantages of the Web site which uses the Ajax technology compared with thetraditional Web site. By using the method of Ajax technology and the compensation of time differenceorder to update local time without refresh the web page. Through this we can ensure the synchronism ofmulti terminal system. The design of rob ticket system proves the advantage of Ajax technology furtherKeywords: Ajax; HTML; asynchronous interaction; time synchronization不可替代的作用。当前基于Ajax的应用种类繁多引言诸如谷哥公司推出的 Google Maps能够提供世界范围内的地图搜索服务; Amazon的钻石搜索应用使用2004年出版社经营者ORel和 MediaLive In-户能够体验到快捷的购物方式; gmail利用Ajax技ternational之间的一场头脑风暴论坛。为我们带来术实现了功能丰富的系统应用。与此同时,我国了Web2.0这一划时代的概念。Web2.0的核心思的在击养A灬技术在不同领域应用想是用户参与网站内容的创造,注重交互性以及设的中国煤化工全性,肖斌等人对传统计符合W3C标准的网站。Ajax作为web2.0的核weCNMHG待时间长、经常出现白心技术,对于构建更有吸引力的交互式网站,起到了页的问题,提出了采用HTP压缩方法和缓存等技收稿日期:2015-04-2作者简介:靖伟(1989-),男(汉族),天津人,中国传媒大学硕士研究生.E-mil: Jinghe610032626@sina,com第6期靖伟:Ajax技术的研究与应用术来提高数据传输性能的Ajax模型。通过改善3)DOM:文档对象模型,表示和处理一个HTAjax应用程序的性能,提高了网络反映速度,获得ML或XML文档的常用方法。了高质量、快速和健壮的网络通信2。周扬在动态(4) JavaScript:一种成熟的客户端脚本语言加载、预见式缓存、内容分块等方面提出了Ajax应 JavaScript通过操纵DOM来改变前端页面结构。用的设计模式。为AJAX应用设计提供了较为通用(5)XML:可扩展标记语言,一种适用于Ajax的的设计思路和更加规范、合理的体系结构,在一定程语言传输格式度上简化了AJAX应用开发的难度,有效改善了程Ajax技术的核心在于异步通信,不必整体刷新序的性能③。在网络时间同步方面 Cristian算页面,从而减少了数据传输量,提高了Web应用的法4、 Berkeley算法、优化时钟同步算法6等,在响应速度,给用户带来了良好的体验。Ajax可以在方面保证了信息在网络传递过程中的时间的同步页面内与服务器通信,使得构建智能化的客户端控性。赵英等人将 Web services技术引入时间同步研件成为可能。例如:数据表格,树型控件等各种复杂究领域,建立了面向网络时间同步服务的 Web Serv-的控件。智能化的客户端控件可以通过 XMLHtces体系结构,使客户端利用客户机发送査询请求 reQuest对象与服务器通信,获取数据,并可缓冲的时间、服务器收到查询请求的时间、服务器应答时和处理数据。这使得许多工作可以在客户端完成,间信息包的时间以及客户机收到服务器返回时间信例如:数据效验、表单验证等。Ajax技术极大地改息包的时间这四个时间戳来计算它与服务器间的时善了Web应用的可用性和用户的交互体验,最终得间偏移和包交换的往返延迟,然后使用时间偏移来到了用户和市场的广泛认可。调整本地时间,让客户机与服务器的时间保持同步。Ajax技术有着众多不可取代的优势的同时也这种方法帮助了客户端抛开各种不同的网络环境进存在着一些缺点。Aja中的一个页面并不仅仅作行时间同步。在移动客户端与服务器端,应用层为一个显示层表示。作为一个可操作界面,用户可时间同步方面,传统的应用往往通过页面定期刷新以点击页面上的元素,达到更新局部数据的目的更新同步时间,或者在页面加载时获取一次标准时这时一个页面可以表示为多个状态。那么问题就出间而后进行本地计时。这样经过长时间计时往往会现了,虽然页面改变了多个状态,但是他的URL没造成较大的误差。随着Ax技术的出现,通过Ajax有改变,所以致使浏览器的前进后退功能失败8层请求服务器时间,可以使客户端页面在不刷新的情况下快速的取得服务器标准时间,进而进行使本3移动端的时间同步地时间同步,为多终端的精确时间同步带来了可能性3.1Ajax技术与时间同步方式的改变2Ajax技术简述早在Webl.0时代,页面应用相对较少,主要为门户网站,而用户对于互联网的需求也主要以浏览Ajax全称为“ Asynchronous JavaScript and XML”信息为主。那时候应用的页面计时方式只是在页面(异步 JavaScript和XML),是指一种创建交互式网加载时获取一次服务器时间进行计时,而由于网络页应用的网页开发技术。Aax是目前在浏览器中系统的传输延时、受客户端影响的脚本运行时间误通过 JavaScript脚本可以使用的所有技术的集合。差等都会影响计时精度,也无法进行后续的时间同Aax并没有创造出某种具体的新技术,它所使用的步。随着Web2.0时代的到来,Ajax技术的出现为都是已经存在并且较为成熟的技术,Ajax通过一种许中国煤化工条件,同时也为客户端崭新的方式将这些技术整合到一起。具体来说包括精浦CNMHG下技术(1)Webl.0模式下的时间同步方式(1) XHTML:可扩展超文本标记语言。在传统的Web1.0模式下,计时方式主要采取(2)CSS:级联样式表,它负责客户端页面样式同步方式,当页面加载后,客户端会从服务器获得服的展现。务器端标准时间,来同步一次本地时间,后面的计时52中国传媒大学学报自然科学版第22卷会在本地完成,通过脚本语言设置时间间隔来使标准客户端浏览器时间改变。但由于脚本的本地运行会受到终端设备的影响长时间会有积累误差,造成计时不准。要想消Jav Script Call时间数据响应除误差只能通过控制页面强制刷新。其过程如下如图1所示,脚本控制页面刷新,客户端会发出个HTTP请求,在这期间它会一直等待服务器响HTTP请求时间数据响应应。而服务器在收到请求后,将处理好的数据返回客户端。浏览器在收到返回的HTML、CSS、 JavaS-Wb服务器cript等文件数据,再进行渲染,呈现出页面。当前图2Ajax请求模式大多数Web页面含有大量图片、 JavaScript制作的动 cript对数据作相应的处理态插件等,而我们需要的仅仅是服务器的时间数据,上述过程可以看出,客户端发出的对于服务器页面也会再次刷新,这些文件会被无意义的再次请时间的HTTP请求和数据的接收全部承接给了Ajax求与传输。这无疑增加了用户等待时间,影响体验,层,再由脚本语言对时间数据进行处理达到本地时也造成了空间上多余的数据传输,影响带宽。间的同步化,通过DOM使页面结构部分改变,而非客户端浏览器整个页面的重载。在这个处理过程中页面处于相对静止的状态,用户在这期间可以进行其他操作。异步交互时序如图3所示。这也就是Ajax技术在客户端时间同步方面的魅力所在。HTTP请求HTML+CSS响应3.2移动端时间同步要考虑的问题移动端应用以其方便快捷轻巧的优势,为用户web服务器所喜爱,但同时移动终端在时间同步方面在考虑到图1传统请求模式普通Web应用共有特点的同时,也要顾及其特殊对于时间精度要求不高的应用来说可以采取这性。具体要考虑以下几个方面种方式。加载时同步一次时间,后续进行本地计算,(1)手机锁屏后系统休眠不再进行与服务器的时间同步。般倒计时系统当用户第一次登陆时获取一次(2)基于Ajax的时间同步方式服务器时间,再与本地时间计算差值。这样当手机与传统的Web技术不同,Ajax采用的是异步交锁屏后系统处于体眠状态,屏幕再次开启,前端页面互处理技术。使用其可以方便的获取服务器基准时会保持原有状态, JavaScript脚本不会重新加载并运间而无需刷新页面。如图2所示,为了改变传统的行。这时倒计时系统还是会从锁屏前一时刻继续计Web客户端和服务器的“请求——等待——请时,从而产生了问题。这对于倒计时系统而言,会有求——等待”的模式,在用户浏览器和服务器之间致命的缺陷。设计一个中间层—即Ajax层2)客户端修改本地时间Ajax的工作原理是:客户端浏览器在运行时首由于计时要部分依赖于客户端本地时间,如果先加载一个Ax引擎(该引擎由 JavaScript编写);在计时过程中人为的修改本地系统时间,则可能会Ajax引擎创建一个异步调用的对象 XmlhTtpre对计时系统产生影响quest,向Web服务器发出一个HTP请求并监听端中国煤化工率口动态;服务器收到请求后,从数据库中取出数据。CNMHG的计时基准,但是系统由于Ajax支持三种数据传输格式即Json,XML和运行时的冈络状况难以确定,若采取进入页面后Text,所以服务器将数据打包成的所需要格式返回次读取服务器时间作为基准,可能会出现计时偏差。客户端;当Ax所监听的端口,发现数据传输完毕而若过于频繁的通过服务器同步本地时间又会影响后,通过Aax引擎接收返回的结果,最后交由 Javas-系统运行效率。第6期靖伟:Ajax技术的研究与应用Ajax web application model(asynchronousclientbrowser UIser acivity二二二Ajax engine非timeserver-sideserver图3时序图中,即此时的ΔT=ΔT+ΔT’。之所以需要设置3.3差值补偿算法个预设值,是因为每个周期的时间本身不是固定移动端带有倒计时的应用最重要的是实现多终的,它要依赖于周期函数的运行情况,因此△T’并不端时间同步,确保所有用户使用的是同一基准时间。会等于0,如果每次都将周期函数造成的误差作为目前比较常用的方法就是根据基准时间使用周期函CT与ST之间的误差将会造成计算不准确。而通过数并设置时间间隔来计算最新的时间,这样的问题Ajax定期获取服务器时间来更新基准时间是对周在于函数周期运行的时间精度比较低,经测试一分期函数的累积误差进行消除。经过以上的计算,用钟大概能相差几秒,这与电脑性能以及运行的任务户修改时间或手机锁屏后将不会对计算结果产生影也相关,这样的误差在某些需求下是无法满足的。因而通过Ajax定期取得服务器时间来更新基准时间,是十分便捷的办法。但是为了保证系统的4Ajax在移动端APP定时抢票系统运行效率,获取时间的间隔不能过长。同时为了保证手机锁屏或用户修改客户端系统时间而带来的时中的应用间不一致问题,采用一种改良的时间差值补偿方式设客户端时间为CT,服务器时间为sT在页面41设计需求加载的时候计算出客户端与服务器的时间差值为抢票系统要求设置一个基准抢票时间,客户端ΔT。当客户端时间被用户修改或手机锁屏造成的应用实时的将倒计时显示给用户,如图4所示,到达停止计时,一旦出现这样的状况,计算出来的服务器基准时间系统开放可以抢票。由于抢票系统为多终时间也将随之发生变化。这就需要检测出客户端时间的变化并消除这个变化。检测的方法是,即在每端大并发量的系统,要求倒计时精准无误,设计系统个计算周期(T)都将当时的客户端时间(CT2)与上时要中国煤化工可题个周期的客户端时间(Cm)做比较,一旦两个周.24 CNMHG期的差值AT’=CT2-CT1-T(1)创建 XmlhTtp Request对象大于某个预设值S时就将差值△T’加入到△T要实现网页的动态化,Ajax的 XmlhTtpreqUes对象是最为关键的一环,使用 XmlhTtp Reques对象中国传媒大学学报自然科学版第22卷距本次开抢还剩设置5000ms钟读取一次服务器时间,用以消l园图园国除本地计时带来的误差。function GetRTime()xmlp.open(“GET",“ time new.ap",mue);//青填写真实手机号码xmlhttpsend()图4UIsetInterval(“ Getrtime()”,5000可以方便的实现与服务器的数据交互。(3)端口监听首先判断浏览器类型,因为浏览器版本类型不通过监听 XmlhTtpreqUest对象的属性 unread同,支持的标准不同,要先进行兼容性测试。IE6、 tatechange得出何时数据传输完毕,当状态码为4时IF5支持创建的Ax对象为 Active OBject(“M-表示服务器已经传回所有的信息, Status值为200表crosoft. XmlhtTp”),IE7以上以及 Firefox、 Chrome、示页面正常,当符合这两个条件则接受数据。Opera、 Safari浏览器都是支持标准规范创建 XMLHt-xmlhttponreadystatechange=function()reques对象。/监听端口if(window. XmlHttpreQueStif(xmlhttp.readyState==4&&3// code for IE7 + Firefox, Chromexmlhttpstatus==200)//O/接收数据并处理xmlhttp=newXmlhTtpreQuesT()vardifferentsec=xmlhttpresponsetextmanage Time( different Secel其他属性如表2所示。/ code for Ie6.Ie5表2其他属性Activexobject("mIcroSoft. XmlhTtp)性onreadystat当Ajax事件状态发生改变时触该事件ech(2)发送请求通过 XmlHttpreQuesT对象的open()和send()该属性有五个值分别代表了五种状态方法发送HTTP请求。其中open(Method,Url,UNSENT Open尚未调用Synch)方法有三个参数,Method参数提供HTTP方OPENED Open已调用HEADERS RECEIVED接受到头信息法,如POST、GET等,见表1。Unl参数提供请求的 ready StateOADING接收到响应主体URL地址,可以为绝对地址也可以为相对地址。DONE响应完成Async参数为布尔型,指定此请求是否为异步方式理论上每次 ready State属性改变都会触发默认为tue。如果为真,当状态改变时会调用on-readystatechange事件readystatechange属性指定的回调函数。以数字形式返回HTP状态码表1发送模式例如200表示请求成功,404表示URL不能传输方式匹配服务器上的任何资源中国煤化工般用于传输少量数据,请求的数据会附在TP状态,它与 status相statGet URL之后。安全性能较差,传送的数据量不能CNMHG大于2KB般传送的数据量较大,被默认为不受限最后接受到的数据通过 managetime()函数进Pat制。安全性能高,提交的数据放置在H包行处理,算法采用3.3节介绍的时间补偿方法。该的包体中。方法消除了因修改客户端时间或手机锁屏而带来的第6期靖伟:Ajax技术的研究与应用计时问题代互联网应用中的使用空间越来越大。本文介绍了(4)服务端Ajax的主要技术,分析了它的优势与不足之处。通服务器端负责响应Aux发来的基准时间请求。过对Ajax技术的一个典型应用,客户端服务器时间由于抢票系统要求实现预设时间系统同步问题展开研究,并提出了解决方案。最后通过开放,需要在后台设置标记文件。当票已抢光个实例应用—“定时抢票系统”的设计,证明了标记文件修改。Ajax技术的易用性。Ajax技术终将在现代互联网采用Aja技术的定时抢票系统,实现了客户端发展中绽放出璀璨的光芒。与服务器进行异步交互进行时间同步的目的。由于采用异步交互的方法,Ajax在进行数据传输过程中不参考文献会影响用户的其他操作,页面无需刷新即可准确的更新时间。通过设置时间差值补偿措施,避免了因手机[1]丁娜.基于Ajax的WEB2.0技术研究[D].浙江锁屏或客户端时间修改而造成的倒计时错误。大学.2007[2]肖斌,汪敏.基于 Ajax通信的数据传输优化4.3实验及结果[J].通信技术,2011,34(3)客户端采用10台不同型号的1OS和安卓系统[3]周扬.Aja应用的典型设计模式[J].计算机系手机,系统开放时间为下午4:00,后台记录的抢票统应用,2011,20(1)者信息,顺序为抢票时间,如图5所示[4 Cristian F. Probabilistic clock synchronization[JI2014-8-1916:00:0113311435832Distributed Computing, 1989, 3(3): 146-1582014-8-1916:00:0118911215336[5 Gusella R, Zatti S. The accuracy of clock synchro2014-8-1916:00:01189108180102014-8-1916:00:0118001106702nization achieved by TEMPO in Berkeley Unix 4.32014-8-1916:00:0113311596802BSD[ J. IEEE Trans Software Engineering, 19892014-8-1916:00:011891038994715(7):847-8532014-8-1916:00:01153300400062014-8-1916:00:0113370159538[6 Anceaume E, Puaut I. a taxonomy of clock syn2014-8-1916:00:0218911219263chronization algorithms[R]. Washington IRISA2014-8-1916:00:02133013708061997图5参加者信息7]赵英,史莉,张莹莹.基于 Web services的网络时第一个进入系统号码为12211435832的终端成间同步[J].北京化工大学学报,2006,32(2功抢到票,如图6所示。[8]冯振兴Ajax技术在Web系统中的应用研究2014-8-1916:00:01D].北京林业大学,2008Sam[9]柯昌正,黄厚宽.Aax技术的原理与应用[J].铁phone:13311435832路计算机应用,2007,16(1):27-29adress:北京市朝阳区定福庄东街一号10]姜皓文.基于状态转换的动态爬虫系统设计与图6个人信息实现[D].中山大学,2014[l1]Ajax数据库实例[EB/OL].htp://ww.5总结w3school. com. cn/ajax/ajax_ database. asp,Ajax作为一种Web2.0时代重要的技术,在现THa中国煤化工(责任编辑:王谦)CNMHG