Ajax技術(shù)的原理與應用

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