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

科技信息博士·專(zhuān)家論壇Ajax技研我與回用中國地質(zhì)大學(xué)(北京)信息工程學(xué)院臨沂師范學(xué)院張峰中國地質(zhì)大學(xué)(北京)信息工程學(xué)院宋莉[摘要]Ajx( Asynchronous JavaScript and xML)技術(shù)是Web2.0的核心之一本質(zhì)上是一種RIA( Rich Internetapplication)技術(shù)。它主要提供丁客戶(hù)端與服務(wù)器間異步通信的能力,可以實(shí)現客戶(hù)端從服務(wù)按需獲取數據,從而可以降低網(wǎng)絡(luò )傳鏞的數據量,提高客戶(hù)端的響應速度;使用的動(dòng)態(tài)頁(yè)面技術(shù)豐富丁客戶(hù)端的表現能力極大改善丁用戶(hù)的使用體驗。[關(guān)鍵詞] Ajax riA XmlhTtpreqUest異步交互模式1引宮JavaScript語(yǔ)言首先是在網(wǎng)景公司的 NetScape瀏覽器中被隨著(zhù)互聯(lián)網(wǎng)應用的普及,Web應用以其良好的擴展性、易使用,一直被定位為一種客戶(hù)端腳本語(yǔ)言它一般用來(lái)完成客戶(hù)于部署維護方便等優(yōu)點(diǎn)逐漸成為軟件開(kāi)發(fā)的主流。早期的端的表單數據校驗等功能,現在很多網(wǎng)頁(yè)中的特效也都是web應用采用的是同步交互過(guò)程,即用戶(hù)首先向Web服務(wù)器 JavaScript的功勞提交一個(gè)請求或行為呼叫服務(wù)器接收到客戶(hù)請求后執行相應在A(yíng)jx中, Javascript從幕后走到了前臺,并發(fā)揮了巨大的處理操作,最后向用戶(hù)返回處理結果。服務(wù)器在處理請求時(shí),用作用可以說(shuō) JavaScript是粘合劑,它綜合了DOM、 XHTML(或戶(hù)處于等待狀態(tài),有時(shí)如果超過(guò)了服務(wù)器響應時(shí)間,甚至返回HTML)XML(或SON)以及CSS等技術(shù),并控制它們的行“頁(yè)面不可用”等提示。另外,當我們只想改變頁(yè)面的部分數據為操作 XmlhTtprequEst對象來(lái)跟數據打交道時(shí),用戶(hù)的請求會(huì )導致服務(wù)器重新返回整個(gè)頁(yè)面內容,包括那些(2) XmlhTtprequEst xhr)對象沒(méi)有改變的數據這不但增加了網(wǎng)絡(luò )傳輸的數據量,還影響了客XmlhTtprequEst對象是Ajx技術(shù)的核心。它時(shí)XML戶(hù)端的響應速度,為什么我們不能“按需”獲取數據呢?Ajax技Htt組件的對象,該對象在 Internet Explorer5中首次引入,該對象可以使用 JavaScript向服務(wù)器提出請求并處理響應,而不AjBx技術(shù)是web20的核心之一,本質(zhì)上是一種RIA(kRch阻塞用戶(hù)。通過(guò)這個(gè)對象Ajx可以像桌面應用程序一樣只同Internet Application)技術(shù)。RIA是指具有高度互動(dòng)性和豐富用服務(wù)器進(jìn)行數據層面的交換,而不用每次都刷新整個(gè)頁(yè)面,也不戶(hù)體驗的網(wǎng)絡(luò )應用程序,它既具有消息確認、無(wú)刷新頁(yè)面之下提用每次將數據處理的工作都交給服務(wù)器來(lái)做,這樣既減輕了服供快捷的界面響應拖放式等桌面應用程序的特點(diǎn)同時(shí)又具有務(wù)器負擔又加快了響應速度、縮短了用戶(hù)等待的時(shí)間部署簡(jiǎn)單、跨平臺等Web應用程序的特點(diǎn)。Ajax技術(shù)提供了客(3)DOM戶(hù)端與服務(wù)器異步通信的能力,從而使用戶(hù)從請求一響應DOM( Document Object Model)全稱(chēng)為文檔對象模型,它提請求的循環(huán)中解脫出來(lái),同時(shí)降低了網(wǎng)絡(luò )傳輸的數據量,提高了供了操作如HTML、XML等文檔對象的接口,DOM模型更像客戶(hù)端的響應速度,改善了用戶(hù)使用體驗使得Web應用可以一個(gè)對象模型,它不依賴(lài)于對象的結構,常見(jiàn)的樹(shù)形結構只是它接近甚至達到類(lèi)似“桌面應用”的效果。其中的一個(gè)實(shí)現,DOM只是提供了操作每種文檔對象的接口2Ajax技術(shù)簡(jiǎn)介在A(yíng)jx中, JavaScript腳本語(yǔ)言通過(guò)DOM才可以跟頁(yè)面進(jìn)行2.1Ajax技術(shù)定義交互,包括改變文檔的內容和狀態(tài),從而達到改變頁(yè)面的目的Ajax的名字是 Asynchronous JavaScript and XML的縮(4)XML和JSON寫(xiě)。它并不是一門(mén)新的語(yǔ)言或技術(shù),實(shí)際上它是把現有的幾項成Ajx中可以通過(guò) XmlhTtpreqUest對象讀取Text文熟技術(shù)按一定的方式組合在一起,通過(guò)相互協(xié)作發(fā)揮出特殊的本、XML數據和JSON等數據Text文本數據是最簡(jiǎn)單的數據作用。2005年2月Web設計咨詢(xún)企業(yè) Adaptive Path公司用戶(hù)格式不做過(guò)多介紹體驗總監耶西·j小加勒特發(fā)表了名為《Ajx: A New AXML( Extensible Markup language)擴展標記語(yǔ)言,可roach to Web application)的文章,文中加勒特闡述了Web應規范的定義結構化數據,是目前網(wǎng)上傳輸的數據和文檔廣泛使用程序可以更接近于傳統的桌面應用程序的觀(guān)點(diǎn),他引用用的數據標準。用XML表述的數據和文檔,可以很容易的讓所些新技術(shù)和 google項目( GoogleMap、 Google Suggest等)作為有程序共享例子來(lái)說(shuō)明傳統的基于桌面的用戶(hù)交互模型現在如何應用于JSON全名為 JavaScript Object Notation,是Web上,討論了如何消除胖客戶(hù)(或桌面)應用與瘦客戶(hù)(或數據交換格式基于 JavaScript規范開(kāi)發(fā)出來(lái)的,可以與Web)應用之間的界限,并給出了基于這種思想的交互模型,同 JavaScript完美結合。它實(shí)際上結構化的數據,在時(shí)將實(shí)現這種應用的技術(shù)命名為:Ax。由此Ax迅速成為了 Javascript中無(wú)需額外的解析就可以直接使用,JSON數據與當今Web開(kāi)發(fā)中最為熱門(mén)的詞匯,Web開(kāi)發(fā)掀開(kāi)了嶄新的XML相比有如下優(yōu)點(diǎn):瀏覽器解析JSON的速度比XML快JSON構造是友好的編程語(yǔ)言,并容易轉換為后端編程語(yǔ)言(如Jesse James Garrett是這樣定義Ajax技術(shù)的:Java)JSON相當穩定,其附加內容將成為超集(1)基于 XHTML和CSS技術(shù)的標準化呈現3Ajx的工作流程與應用實(shí)例(2)使用DOM( Document Object Mod)實(shí)現動(dòng)態(tài)顯示和3.1Ajx的工作流Ajx實(shí)質(zhì)上也是遵循 Request/ Server模式, Javascript調(3)使用XML和XSLT進(jìn)行數據交換與處理用Ax引來(lái)代替產(chǎn)生的一個(gè)Htt的用戶(hù)動(dòng)作,只不過(guò)這個(gè)(4)使用 XmlhTtprequEst對象與服務(wù)器進(jìn)行異步通信獲過(guò)程是異步的,Ajx程序工作流程如取數據;(1)初始化對象:在 Javascript腳本代碼中聲明異步通訊對5)最后用 Javascript腳本綁定和處理所有數據,整合以上象,如果是瀏覽器,就初始化為 XmlhTtp Activex,如果是mozilla或 NetScape瀏覽器就初始化為 XmlhTtprequEst對統的Web應用不同,Ajx采用異步交互過(guò)程。Ajx在象JavaScript語(yǔ)言編寫(xiě),它通常藏在藏得框架中,負貴實(shí)現函數及相關(guān)傳輸參數然后向服務(wù)器端發(fā)送異步et的處理用戶(hù)和服務(wù)器之間引入一個(gè)中間媒介一Ajx引擎,Ajx引用(2)設置參數并發(fā)送請求:設置 XmlhtTprequEst的處理傳統的客戶(hù)端與服務(wù)器間的交流,從而一定程度上解(3)服務(wù)器接收請求并進(jìn)行處理:服務(wù)器收到客戶(hù)端請求后絡(luò )進(jìn)行響應處理,生成相應處理結交互過(guò)程中的處理一等待一處理一等待的缺點(diǎn)。同時(shí)也可以把(4)服務(wù)器返回服務(wù)器端把處理結果封裝成XML等格式以前服務(wù)器負擔的作轉移到客戶(hù)端,利用客戶(hù)端閑置的的數擁處理能力來(lái)處理,從而減輕服務(wù)器的負擔和網(wǎng)絡(luò )的傳輸壓力中國煤化工eques對象接收服務(wù)器2Ajax使用的關(guān)鍵技術(shù)返回CNMHAjax中用到的主要技術(shù)有 JavaScript、 XmlhTtprequEstDOMXML等技術(shù),下面做簡(jiǎn)要介紹:頁(yè)面的勃地以口項圓門(mén)訂x煙四數中利用腳本語(yǔ)言修改(1)JavaScript3.2Ajx應用實(shí)例作者簡(jiǎn)介:張峰,男臨沂師范學(xué)院教師,中國地質(zhì)大學(xué)(北家)06碩磺士宋莉,女中國地質(zhì)大學(xué)(北家)信息工程學(xué)院,副教授,項士生導師。一數據科技信息博士·專(zhuān)家論壇在A(yíng)jx的應用方面,Goge無(wú)疑是當仁不讓的表率(1)技術(shù)相對成熟穩定:AjBx使用的都是基于標準化的并Orkut, Gmail, Google Groups, Google Maps, google. Suggest都被廣泛支持的技術(shù)而且大都經(jīng)過(guò)實(shí)踐檢驗相對穩定可靠,適應用了這項技術(shù),微軟也在積極開(kāi)發(fā)更為完善的Ajx應用,目用性強。使用Ajx時(shí)不需要下載插件或者小程序,與其它RIA下面通過(guò)一個(gè)從服務(wù)器獲取X紅文件數據的程序實(shí)例來(lái)可以相對快捷地將該技術(shù)應用到已有的實(shí)際項目而不懵要改變現有Web內容(2)更快的響應速度,更好的用戶(hù)體驗:Ajx實(shí)現了按需獲Ajx測試程序取數據,并異步的更新頁(yè)面,使得用戶(hù)請求處理時(shí)間大大減少同時(shí)在處理一個(gè)請求的時(shí)候可以處理其它的請求,這種體驗就像將以前c/S模式下開(kāi)發(fā)的產(chǎn)品遷移到Web平臺上,加上/初始化 XmlhTtpreqUest對象Web自身的部署、維護方便等優(yōu)點(diǎn),Ajax應用的體驗性和可用性自然不言而喻了3)減少了網(wǎng)絡(luò )數據傳輸,節省了服務(wù)器帶寬,平衡functioncreatxmlhttpreQuesTo(器端與客戶(hù)端的負載:Ajax將以前服務(wù)器負擔的一部分移到客戶(hù)端完成,利用客戶(hù)端閑置的資源處理,從而減輕xmlhttp-newActivexobject("MsxM112.XmlhTtp*)1器端處理和帶寬的負擔,節約了空間和成(4)良好的擴展性:Ajax利用XML或JSON可以方便讀取外部數據,并且可以與其它RIA技術(shù)如 Flash、XUL等聯(lián)合x(chóng)mht= new ActiveXObject( Microsoft使用,從而開(kāi)發(fā)出功能更強大的web應用XmlhTtp),)catch(e)try(Ajax不是完美的技術(shù),使用Aijx時(shí)它的一些缺陷不得不xmlhttpnewxmlhTtpreqUest權衡)catch(e)(1)兼容性問(wèn)題:Ajax使用了 JavaScript腳本語(yǔ)言和Ajx引華,而這個(gè)取決于瀏覽器的支持。IE5.0及以上、 mozilla1.0NetScape7及以上版本才支持,而且不同瀏覽器提供的xMLif(!xmlhttpHttprequest的方式也不一樣,所以使用Ajx的程序必須考慮到對各種瀏覽器的兼容性如果客戶(hù)端瀏覽器對象改變,有可能lert(不能創(chuàng )建 XmlhTtprequEst對象實(shí)例);會(huì )造成頁(yè)面無(wú)法顯示甚至整個(gè)系統都無(wú)法使用return falser(2)頁(yè)面定位問(wèn)題:由于A(yíng)jx將大量頁(yè)面狀態(tài)信息存儲在//從服務(wù)器獲取XML數據調用的主函數“后退按當用戶(hù)部分劇新頁(yè)面時(shí)會(huì )導致惻覽器的“前進(jìn)”、客戶(hù)端變量用戶(hù)有時(shí)搞不清楚現在的頁(yè)面數據是舊的還是已經(jīng)更新過(guò)的,這就需要在適當位置標示數據的狀態(tài)。creatxmlhttpreQuesTo;3)對搜索引擎不友好:通過(guò)搜索引華獲取信息是人們//設置參數并發(fā)送異步請求互聯(lián)網(wǎng)的重要原因,但傳統的搜索引擎對數據的分析和處理都xmihtTp. open(get. a nge = process request!是基于頁(yè)面工作的,而Ajx則是基于數據工作的,兩者無(wú)法很好的協(xié)調,Ajx中傳輸的數據都是一些數據片段,不是完整的,truexmlhttp.sendGnull),Htm文檔,而且是后臺異步獲取,不能被搜索引擎很好的發(fā)現} catch〔e){并緩存,最終可能導致用戶(hù)無(wú)法搜素到指定的內容。alert(”您訪(fǎng)問(wèn)的資源不存在!)(4)性能問(wèn)題:Ajax把大算從服務(wù)器轉移到了客戶(hù)端瀏覽器,這意味著(zhù)瀏覽器將承受更大的負擔,而不再是簡(jiǎn)單的文檔顯示功能。由于A(yíng)jx的核心語(yǔ)言 JavaScript是解釋型腳本回數據XmlhTtprequEst對象處理函數,在頁(yè)面顯示服務(wù)器返能上找到一個(gè)平衡點(diǎn),并盡可能的實(shí)現按需下載5)對流媒體的支持沒(méi)有 Flash、 Java Applet好,一些手持設m6(/斷狀態(tài)是否請求發(fā)選備(知手機的等現信不很好的支持A技術(shù)成功f(mlhttp.statu==200){//判斷狀態(tài)是否返回數據成想據Ajx技術(shù)的特點(diǎn),它的適用范圍主要有以下一些方//接收數據并顯示(1)數據驗證:校驗用戶(hù)注冊、登錄等信息;forml.showvalue=xmlhttp.responsetext(2)按需獲取數據:按用戶(hù)的要求只需要部分改變頁(yè)面內容else(3)讀取外部數據:可以讀取XMN等格式的外部數lert("請求處理返回數據異?！?;據5結束語(yǔ)Ajx技術(shù)能夠實(shí)現瀏覽器與服務(wù)器間的異步數據交互以及頁(yè)面內容的局部刷新,從而達到“按需”獲取數據的目的,顯著(zhù)</script>改善Web應用的用戶(hù)體驗。同時(shí)它也可以把一些服務(wù)器負擔的工作轉移到客戶(hù)端處理,平衡了服務(wù)器與客戶(hù)端的負載。一般說(shuō)是一個(gè)Aja
來(lái),Ax技術(shù)主要應用在交互較多頻繁讀數據和數據分類(lèi)良好的Web應用中,在具體運用過(guò)程中,應具體情況具體分析Input type-value=”Ajx測試” onclick才能達到較好的效果隨著(zhù)Web應用的快速發(fā)展,相信Ajax技startRequest,/>術(shù)一定會(huì )得到更廣泛的應用,帶給我們更多的驚喜
中國煤化工 論文截圖