第16卷第1期鐵路推廣與應(yīng)用Vol 16 No. 1POPULARIZATION AND APPLICATION文章編號(hào):10058451(2007)01-0027-03Ajax技術(shù)的原理與應(yīng)用柯昌正,黃厚寬(北京交通大學(xué)計(jì)算機(jī)與信息技術(shù)學(xué)院,北京100044)摘要:Ajax( Asynchronous JavaScript and XML)技術(shù)是一種新型的Wcb應(yīng)用開發(fā)技術(shù),通過(guò)適當(dāng)?shù)膽?yīng)用Ajax技術(shù),可以為用戶提供更好的Web休驗(yàn)。介紹Ajax技術(shù)的基本原理和工作流程,列舉Ajax技術(shù)的一些典型應(yīng)用,分析Ajax技術(shù)的優(yōu)劣,并指出Ajax技術(shù)的適用范圍與其發(fā)展趨勢(shì)。關(guān)鍵詞:Ajax; XmlhTtprequEst;KML;DOM;異步交互中圖分類號(hào):U291.52文獻(xiàn)標(biāo)識(shí)碼:APrinciple and application of Ajax technologyKE Chang-zheng, HUANG Hou-kuanSchool of Computer and Information Technology, Beijing Jiaotong University, Beijing 100044, China)Abstract: Ajax(Asynchronous JavaScript and XML)was a new approach to Web applications, it was used appropriately toprovide user with better experience of Web. It was presented basic principle and working process of Ajax, enumeratedsuccessfully applications of Ajax and analyzed the advantages and disadvantages of Ajax. In addition, it was pointed out theapplicability of Ajax and predicted the trend of Ajax developmentKey words Ajax XmlhTtpreqUest; Xml; Dom; asynchronous interaction因特網(wǎng)已經(jīng)經(jīng)歷了翻天覆地的重大變化。最早1.1 XmlhTtpreqUest它只有基于文本的簡(jiǎn)單Web瀏覽器,供科學(xué)家之間XmlhTtprequEst是Ajax當(dāng)中最重要的也是最交流研究心得;如今,它已經(jīng)成為商務(wù)和信息的中核心的技術(shù),它最早是在IE5中通過(guò)一個(gè)名為心,逐漸滲入到人們的日常生活中。隨著Web應(yīng)用 XmlhttP的 ActiveX對(duì)象來(lái)實(shí)現(xiàn)的。 XmlhttP對(duì)技術(shù)的不斷發(fā)展,人們對(duì)于因特網(wǎng)的性能要求也越象使得頁(yè)面中的腳本具有了在不刷新頁(yè)面的情況下來(lái)越高,如今,用戶已經(jīng)不滿足于像以前那樣填寫直接與服務(wù)器端通信的能力。與此對(duì)應(yīng), Mozilla、表單,點(diǎn)擊“提交”按鈕,然后等待頁(yè)面跳轉(zhuǎn)的同 Opera和 Safari等其他瀏覽器也實(shí)現(xiàn)了類似的對(duì)象,步請(qǐng)求/響應(yīng)模式,他們需要的是一種就像任何桌稱作 XmlhTtprequEst對(duì)象。 XmlhTtpreqUest是目面應(yīng)用程序那樣流暢、快捷和人性化的Web體驗(yàn)。前這個(gè)技術(shù)的正式名稱。Ajax技術(shù)正是為了滿足用戶的這種需求而應(yīng)運(yùn)而生1.2XML( eXtensible Markup Language)的,它為瀏覽器提供了與服務(wù)器端異步通信的能XML( eXtensible Markup Language)具有一種力,從而使用戶從請(qǐng)求/響應(yīng)的循環(huán)中解脫出來(lái),這開放的、可擴(kuò)展的和可自描述的語(yǔ)言結(jié)構(gòu),目前,它樣,使得Web瀏覽器看起來(lái)就像是即時(shí)響應(yīng)的桌面已經(jīng)成為因特網(wǎng)上數(shù)據(jù)和文檔傳輸?shù)臉?biāo)準(zhǔn)。在應(yīng)用應(yīng)用程序一樣。Ajax技術(shù)時(shí), XmlhtTprequEst對(duì)象可以選擇使用XML作為與服務(wù)器端通信的數(shù)據(jù)格式。1Ajax簡(jiǎn)介1. 3 DOM(Document Object Model)DOM( Document Object Model)是面向HTML術(shù)語(yǔ)Ajax是 Asynchronous JavaScript and XML和XML文檔的API,它為文檔提供了結(jié)構(gòu)化表示,并的縮寫。實(shí)際上,Aax并不是什么新技術(shù),它是由定義了如何通過(guò)腳本來(lái)訪問(wèn)文檔結(jié)構(gòu)。在應(yīng)用Ajax幾種蓬勃發(fā)展的技術(shù)以新的方式組合而成的,這幾技術(shù)中國(guó)煤化工理XML文檔和更種技術(shù)分別如下。新H1.4HCNMHG收稿日期:20060729作者簡(jiǎn)介:柯昌正,在讀碩士研究生;黃厚寬,教Javascript是一種在瀏覽器端大量使用的編程語(yǔ)推廣與應(yīng)用鐵路計(jì)算機(jī)應(yīng)用第16卷第1期言,它可以使用瀏覽器中的很多對(duì)象,包括 XmlhTtpAjax實(shí)現(xiàn)異步請(qǐng)求/響應(yīng)模式步驟如下:Request。在Ajax中, Javascript通過(guò)調(diào)用 XmlhTtpre(1)創(chuàng)建 XmlhTtp reQuesT對(duì)象。如前所述, Ajaxquest對(duì)象的屬性和方法與服務(wù)器端進(jìn)行數(shù)據(jù)交互,的核心是 JavaScript中的 XmlhTtpreqUest對(duì)象,因同時(shí)還可以利用DOM的APⅠ來(lái)解析從服務(wù)器端返此,首先應(yīng)當(dāng)創(chuàng)建 XmlhTtpreqUest對(duì)象。以下代碼回的XML數(shù)據(jù)和更新HTML頁(yè)面的內(nèi)容。顯示了如何創(chuàng)建一個(gè) XmlhtTp reqUest對(duì)象:if (window. XmlhTtp reQuesT2Ajax技術(shù)的原理和L作流程xmlhttprEquest=newXmlhtTprequeSto2Ajax技術(shù)的原理else if (window. ActiveXObject)Ajax的工作原理就是相當(dāng)于在瀏覽器和服務(wù)器xmlhttprequest=newActivexobject("miCrosOft之間加了一個(gè)中間層,使用戶操作與服務(wù)器響應(yīng)異 XmlhttP");步化。而這一中間層所要做的工作都是由Ajax引擎( Ajax engine)來(lái)完成的。實(shí)際上,Ajax引擎就是一由于各個(gè)廠商的瀏覽器對(duì)于 XmlhtTprequeSt些復(fù)雜的 Javascript程序,這些程序通過(guò)調(diào)用ⅹMLHp對(duì)象的底層實(shí)現(xiàn)不同,因此,在創(chuàng)建時(shí),應(yīng)當(dāng)確保Request對(duì)象的屬性和方法來(lái)與服務(wù)器端進(jìn)行數(shù)據(jù)與瀏覽器的兼容。交互,然后再通過(guò)DOM來(lái)解析處理XML文檔和部(2)向服務(wù)器端發(fā)送請(qǐng)求。在創(chuàng)建了 XmlhTtpre分更新HTML頁(yè)面的內(nèi)容。quest對(duì)象后,就要向服務(wù)器端發(fā)送請(qǐng)求了。 XmlhTtp-st對(duì)象中的open(和 sendo方法可以實(shí)現(xiàn)此功能,如下所示boolean asynchronous)時(shí)間XmlhtTprequEst. sendon(方法的第1個(gè)參數(shù)method是HTTP請(qǐng)求方式,可以為GET和POST。按照HTTP規(guī)范,該參系統(tǒng)處理系統(tǒng)處理系統(tǒng)處理系統(tǒng)處理服務(wù)器端數(shù)要大寫;否則,某些瀏覽器可能無(wú)法處理請(qǐng)求;第2個(gè)參數(shù)是服務(wù)器端請(qǐng)求頁(yè)面的URL;第3個(gè)參圖1Ajax的異步請(qǐng)求/響應(yīng)模式數(shù) asynchronous是布爾類型,如果為true,表示此通過(guò)Ajax引擎這樣一個(gè)中間層,瀏覽器就可以次請(qǐng)求為異步請(qǐng)求模式, JavaScript函數(shù)在發(fā)送完這實(shí)現(xiàn)與服務(wù)器端的異步通信,如圖1。當(dāng)用戶通過(guò)個(gè)請(qǐng)求之后將繼續(xù)執(zhí)行,而不等待服務(wù)器響應(yīng)。如瀏覽器提交請(qǐng)求時(shí),請(qǐng)求數(shù)據(jù)將發(fā)送給Ajax引擎。果為 false,表示此次請(qǐng)求為同步請(qǐng)求模式, JavaScriptAjax引擎捕獲用戶輸入的請(qǐng)求數(shù)據(jù)然后再向服務(wù)器函數(shù)在發(fā)送完這個(gè)請(qǐng)求之后要等待服務(wù)器的響應(yīng)發(fā)送請(qǐng)求,此時(shí),瀏覽器不用等待服務(wù)器的響應(yīng)。因然后再繼續(xù)執(zhí)行。由此可見,Ajax不僅可以提供異此用戶可以繼續(xù)輸入數(shù)據(jù)。同時(shí)用戶屏幕上的表單步請(qǐng)求/響應(yīng)模式,而且也能夠提供一般的同步請(qǐng)也不會(huì)閃爍、消失或延遲。服務(wù)器處理完用戶請(qǐng)求求/響應(yīng)模式。之后,返回處理結(jié)果并改變HTP就緒狀態(tài),一旦sendo方法的參數(shù)是空或是null,調(diào)用 sendo方HTTP的就緒狀態(tài)發(fā)生改變,Ajax引擎就會(huì)調(diào)用相法就會(huì)向服務(wù)器端發(fā)送一次請(qǐng)求對(duì)應(yīng)的回調(diào)函數(shù)來(lái)接收這些處理結(jié)果并將它們更新(3)服務(wù)器處理完請(qǐng)求后,調(diào)用回調(diào)函數(shù);創(chuàng)到頁(yè)面的指定部分,瀏覽器無(wú)需刷新整個(gè)頁(yè)面就能建 XmlhTtprequEst對(duì)象向服務(wù)器發(fā)送一個(gè)HTP請(qǐng)更新頁(yè)面的部分內(nèi)容,這樣,就會(huì)讓用戶感覺到應(yīng)求后,要決定當(dāng)收到服務(wù)器的響應(yīng)后,需要做什么。用程序是立即完成的,表單沒有提交而頁(yè)面的部分這需中國(guó)煤化工象用哪一個(gè)函數(shù)來(lái)內(nèi)容就發(fā)生了改變,使得Web瀏覽器看起來(lái)就像是處理CNMHG理函數(shù)叫做回調(diào)函即時(shí)響應(yīng)的桌面應(yīng)用程序一樣數(shù)。 XmlhTtpreQuesT對(duì)象提供∫ onreadystatechange22Ajax的工作流程屬性來(lái)指定回調(diào)函數(shù),如下所示:16卷第1期Ajax技術(shù)的原理與應(yīng)用推廣與應(yīng)用XmlhTtpreqUest. onreadystatechange= Callback-在這里,正是應(yīng)用了Ajax技術(shù),使得地圖并不是以Function Name s刷新的方式顯示,而是每次都在原有數(shù)據(jù)的基礎(chǔ)上Callback Function Name就是回調(diào)函數(shù)的函數(shù)名。以增量方式顯示。這樣,用戶感覺就好像是在自己(4)回調(diào)函數(shù)解析服務(wù)器端返回處理結(jié)果并將的計(jì)算機(jī)上查看本地的地圖一樣。微軟也在積極開它們更新到頁(yè)面指定部分。發(fā)Ajax應(yīng)用:它將Ajax技術(shù)應(yīng)用到 MSN Space上在檢查完請(qǐng)求的狀態(tài)值后,回調(diào)函數(shù)就可以處面。當(dāng)用戶使用 MSN Space提交回復(fù)評(píng)論時(shí),瀏覽理從服務(wù)器端得到的數(shù)據(jù)了。有兩種方式可以得到器會(huì)暫時(shí)停頓一下,然后在無(wú)刷新的情況下把用戶這些數(shù)據(jù):提交的評(píng)論顯示出來(lái),這個(gè)就是應(yīng)用了Aax的效以文本字符串的方式返回服務(wù)器端的響應(yīng)數(shù)據(jù),果。目前,Ajax應(yīng)用最普遍的領(lǐng)域是GIS-Map方面。如下所示:GIS的區(qū)域搜索強(qiáng)調(diào)快速響應(yīng),Ajax的特點(diǎn)正好符var response= XmlhTtpreqUest. responsetext;合這種要求。以 XMLDocument對(duì)象方式返回服務(wù)器端的響在應(yīng)用Ajax技術(shù)開發(fā)過(guò)程當(dāng)中,處于核心位置應(yīng)數(shù)據(jù),如下所示的Ajax引擎實(shí)際上是一些復(fù)雜的 JavaScript程序。隨var response= XmlhTtprequEst. responsexml;著網(wǎng)絡(luò)應(yīng)用和界面表現(xiàn)的復(fù)雜化,使用面向過(guò)程的在以 XMLDocument對(duì)象方式返回服務(wù)器端的 Javascript語(yǔ)言描述表現(xiàn)邏輯將會(huì)變得很困難。同響應(yīng)數(shù)據(jù)后,需要利用DOM來(lái)解析 XMLDocument時(shí), JavaScript的兼容性和調(diào)試都會(huì)成為使用Ajax技對(duì)象,從中提取出響應(yīng)數(shù)據(jù),如下所示:術(shù)的一個(gè)障礙。為了解決這些問(wèn)題,開發(fā)人員已經(jīng)var result= response. getElementsByTag Name開發(fā)出了一些基于Ajax技術(shù)的框架,方便了開發(fā)人Cnode)[O]. first Child. data員使用,有利于Ajax技術(shù)的進(jìn)一步推廣。以上語(yǔ)句返回了node節(jié)點(diǎn)的數(shù)據(jù)當(dāng)然,任何技術(shù)都是有局限性的,Ajax也不例在得到服務(wù)器端返回的響應(yīng)數(shù)據(jù)后,就可以根外。Ajax更新頁(yè)面無(wú)需刷新重載,這也使傳統(tǒng)的據(jù)響應(yīng)數(shù)據(jù)來(lái)更新頁(yè)面內(nèi)容了,DOM也提供了對(duì)些用戶交互行為變得不可用,如后退、前進(jìn)和刷新頁(yè)面中各個(gè)對(duì)象的讀寫支持,如下所示:等。另外,移動(dòng)設(shè)備(如手機(jī)、PDA等)現(xiàn)在還不document. get Element Byld( message) innerHTML=能很好的支持Ajax,Ajax對(duì)流媒體的支持也沒有resultJava applet和 Flash這樣成熟的技術(shù)好。因此,一些以上語(yǔ)句將頁(yè)面中id為 message的對(duì)象的內(nèi)容輔助的平臺(tái)和插件的開發(fā)也將是Ajax技術(shù)應(yīng)用當(dāng)中更新為變量 result所代表的內(nèi)容。由此可見,通過(guò)重要的一部分DOM,就可以方便地完成對(duì)頁(yè)面內(nèi)容的更新4結(jié)束語(yǔ)3Ajax技術(shù)的應(yīng)用Ajax技術(shù)實(shí)現(xiàn)了無(wú)刷新更新頁(yè)面,它減輕了服因?yàn)锳jax技術(shù)的精髓是用異步交互替代了傳統(tǒng)務(wù)器的負(fù)擔(dān),減少了客戶實(shí)際和心理的等待時(shí)間的同步交互,所以當(dāng)用戶操作時(shí)間大于服務(wù)器響應(yīng)讓客戶獲得桌面程序一般的交互體驗(yàn)。更好的Ajax時(shí)間的時(shí)候,使用Ajax的效果非常明顯。而當(dāng)程序應(yīng)用需要更多的客戶端的開發(fā)和對(duì)當(dāng)前的Web應(yīng)性能的瓶頸在于服務(wù)器響應(yīng)時(shí)間的時(shí)候,Ajax無(wú)法用理念的思考。良好的用戶體驗(yàn)來(lái)源于處處為用戶解決程序運(yùn)行緩慢的問(wèn)題。因此,Ajax更適合應(yīng)用考慮的理念,而不單純是某種技術(shù)。在交互頻繁的輕量級(jí)Web上。在應(yīng)用Ajax開發(fā)方面, Google公司成功地將參考義獻(xiàn)Ajax技術(shù)應(yīng)用到它們的商業(yè)產(chǎn)品中。GoogleMap和BrettMcLaughlin.AJAXI簡(jiǎn)介Eb/oL].http:/blog.csdn.net/litheGoogle Suggest都應(yīng)用了這項(xiàng)技術(shù)。當(dāng)用戶在使用中國(guó)煤化工Google Map瀏覽地圖時(shí)(這里所說(shuō)的瀏覽包括地圖(2]柯CN MHGwW. blog- java. net/.的放大縮小,以及地圖的平移),并沒有向服務(wù)器提(3]李剛、宋偉,邱哲.征服Ajax+ -lucence-構(gòu)建搜索引交什么請(qǐng)求,就可以瀏覽到地圖各個(gè)部分的內(nèi)容。擎M].北京:人民郵電出版社,2006