當前位置:首頁 > 嵌入式 > 嵌入式教程
[導讀]基于Ajax技術的Web 2.0開發(fā)應用

0  引言

隨著互聯(lián)網(wǎng)的不斷發(fā)展和信息量的劇增,如何使Web響應更加靈敏,數(shù)據(jù)傳輸更加快捷,已成為當今關注的熱點。應用系統(tǒng)所采用的技術也由早期的C/S(Client/Server)模式向基于B/S(Browser/Server)的應用模式進行轉變。這種轉變避免了繁瑣的部署工作,同時也體現(xiàn)了瘦客戶的開發(fā)理念,但同步交互方式帶來客戶端響應速度慢的問題始終困擾著最終用戶?;贏jax(Asynchronous JavaScript. and XML)的Web 2.0技術改變原有的同步交互為異步交互方式,使頁面在后臺按需獲取數(shù)據(jù),這樣不僅節(jié)省了帶寬,更加大大提升了用戶體驗。

Ajax是新興網(wǎng)絡開發(fā)技術的象征,是Web 2.0時代的代表。最關鍵的是顛覆了傳統(tǒng)Web與服務器的交互模式,這種思維模式的轉變?yōu)閃eb發(fā)展提供了更廣闊的前景。Ajax是一個前臺工具,在后臺可以使用各種服務器語言,比如:.NET,PHP,Java等。Ajax是集合了多種技術,提高互聯(lián)網(wǎng)性能的一種關鍵技術。Ajax理念的出現(xiàn),揭開了無刷新更新頁面時代的序幕,并有代替?zhèn)鹘y(tǒng)Web開發(fā)中采用form(表單)遞交方式更新Web頁面的趨勢,其可以算是一個里程碑。

1 Ajax的工作原理

在傳統(tǒng)的瀏覽器與服務器的交互方式中“采用同步方式”由用戶觸發(fā)一個HTTP請求到服務器,服務器對其進行處理后再返回一個新的Web頁到瀏覽器。每次應用的交互都需要向服務器發(fā)送請求,應用的響應時間就依賴于服務器的響應時間。當服務器正在處理的時候,用戶只是在等待,這樣,不會產生很好的用戶體驗;而在前后兩個頁面中的大部分HTML代碼往往是相同的,也浪費了許多帶寬資源。

現(xiàn)在使用的Ajax技術是將幾種成熟技術按一定的方式結合在一起,通過協(xié)作發(fā)揮各自作用,包括:使用XHTML和CSS標準化呈現(xiàn);使用DOM實現(xiàn)動態(tài)顯示和交互;使用XML和XSLT進行數(shù)據(jù)交換與處理;使用XMLHttpRequest進行異步數(shù)據(jù)讀取;用JavaS-cript綁定和處理所有數(shù)據(jù)。

Ajax需要一個穩(wěn)定、響應及時的服務器向引擎發(fā)送內容,作為必要的服務端處理邏輯,確保向Ajax引擎發(fā)送的數(shù)據(jù)格式是正確的。

Ajax的工作原理相當于在用戶和服務器之間加了一個中間層Ajax引擎,從而實現(xiàn)用戶操作與服務器響應的異步化。這樣把以前的一些服務器負擔的工作轉嫁到客戶端,利于客戶端閑置的處理能力來處理,減輕服務器和帶寬的負擔,從而達到節(jié)約ISP的空間及帶寬租用成本的目的。但并不是所有的用戶請求都提交給服務器,像一些數(shù)據(jù)驗證和數(shù)據(jù)處理等都交給Ajax引擎自己來做,只有確定需要從服務器讀取新數(shù)據(jù)時再由Ajax引擎代為向服務器提交請求。傳統(tǒng)的Web應用程序模型和基于Ajax的Web應用模型分別如圖1,圖2所示。

rc="/21ic_image/embed/file/201202/4f1962dbe86a47b211e616f58edef37d.jpg" alt="" />

由于Ajax技術的結構特點,可以為ISP、開發(fā)人員、終端用戶帶來可見的便捷:

(1)按需獲取數(shù)據(jù)。這是Ajax的根本理念,Ajax的原則是“按需取數(shù)據(jù)”,這樣可以最大程度地減輕冗余請求,減輕服務器的負擔。

(2)無刷新更新頁面,減少用戶心理和實際的等待時間。這是Ajax最大的特點,用戶無需刷新頁面便可向服務器傳輸和讀寫數(shù)據(jù)。

(3)基于標準化的并被廣泛支持的技術。Ajax包含的技術都是各自領域強有力的技術,組合之后的功能更加強大。

(4)給用戶帶來更好的體驗。Ajax使得在Web上運行軟件的感受,越來越接近于本機上運行的效果。

(5)可以調用外部數(shù)據(jù),取得足夠權限后,能輕易地實現(xiàn)數(shù)據(jù)聚合。

(6)進一步促進頁面呈現(xiàn)與數(shù)據(jù)的分離。

2  Ajax技術在Web 2.0中的應用

下面簡要介紹利用Ajax技術的無需頁面提交而能與服務器交互,即時從服務器獲取數(shù)據(jù)并顯示出來的特性,實現(xiàn)自動完成(字典)功能的過程。自動完成功能實現(xiàn)的主要目的是幫助用戶快速準確的輸入內容,就是用戶在輸入框中輸入一些檢索詞,根據(jù)用戶所輸入的信息,從后臺數(shù)據(jù)庫以LIKE方式查詢,同時在輸入框下方顯示相應的提示信息,進而幫助用戶快速的搜索。在很多系統(tǒng)中都需要實現(xiàn)自動完成的功能,但在Ajax技術出現(xiàn)之前,一般只有桌面應用程序才能實現(xiàn)類似的功能。Web應用程序只能借助于瀏覽器自身的自動完成功能來實現(xiàn),而瀏覽器的自動完成功能是比較有限的,它只能提示用戶輸入過的信息。如果自動完成的數(shù)據(jù)是來自于服務器端的,Ajax則是最好的選擇。比如用戶只記住了要查詢信息的前面幾個字,而記不清全名,這樣要查詢到所要的信息就比較困難。使用Ajax技術后,在用戶輸入的同時,輸入框下方可以給出與已輸入信息相匹配的提示來輔助用戶輸入,這樣用戶進行查詢的速度和準確率會大大提高,也可以有效地改善用戶體驗。下面利用Ajax(.net)技術實現(xiàn)一個學校信息查詢的自動完成功能,其步驟如下:

服務器端提供GetSearchItems方法給客戶端,用來返回滿足條件的列表;

客戶端的輸入框需要增加onkeydown響應函數(shù),以便即時獲得滿足條件的列表;

通過客戶端的JavaScript動態(tài)列出待選結果的列表,同時還要提供鍵盤和鼠標的響應。

在服務器端添加供客戶端調用的GetSearchItems方法是:在服務器端函數(shù)GetSearchItems的定義前加上[AjaxMethod()]標記,以表明它可以被客戶端異步的調用。具體代碼如下所示:

(1)服務器端代碼設置如下:

該方法用于查詢數(shù)據(jù)庫,最后返回一個ArrayList對象,他將包含所有以用戶輸入字符串開頭的所有學校名稱的條目。

(2)客戶端處理的部分代碼

客戶端相對于服務器端處理要復雜得多,要根據(jù)服務器端返回的ArrayList對象展示結果,此處用JavaScript和DOM創(chuàng)建一個新的div,將ArrayList中的每一條目都作為其子節(jié)點加入到div中,而每一個條目也被看作是一個div,具體的文本內容則是一個span對象。

rc="/21ic_image/embed/file/201202/ccbaa97ff5a679e352fb48454c6789e1.jpg" alt="" />

3結  語

利用Ajax技術,開發(fā)人員可以創(chuàng)建一個與桌面應用程序相媲美的交互式用戶界面。Ajax使Web中的界面與應用分離(也可以說是數(shù)據(jù)與呈現(xiàn)分離),而在以前兩者是沒有清晰界限的,數(shù)據(jù)與呈現(xiàn)的分離,有利于分工合作、減少非技術人員對頁面的修改造成Web應用程序的錯誤,提高效率,也更加適用于現(xiàn)在的發(fā)布系統(tǒng),也可以把以前一些服務器負擔的工作轉嫁到客戶端,利用客戶端閑置的處理能力來處理。Ajax技術的出現(xiàn)將基于Web的應用程序開發(fā)帶進了一個全新的階段,但Ajax主要是基于JavaScript的客戶端技術,所以客戶端的開發(fā)顯得越來越臃腫,隨之而來的安全性等一系列問題有待進一步研究。

本站聲明: 本文章由作者或相關機構授權發(fā)布,目的在于傳遞更多信息,并不代表本站贊同其觀點,本站亦不保證或承諾內容真實性等。需要轉載請聯(lián)系該專欄作者,如若文章內容侵犯您的權益,請及時聯(lián)系本站刪除。
換一批
延伸閱讀

9月2日消息,不造車的華為或將催生出更大的獨角獸公司,隨著阿維塔和賽力斯的入局,華為引望愈發(fā)顯得引人矚目。

關鍵字: 阿維塔 塞力斯 華為

加利福尼亞州圣克拉拉縣2024年8月30日 /美通社/ -- 數(shù)字化轉型技術解決方案公司Trianz今天宣布,該公司與Amazon Web Services (AWS)簽訂了...

關鍵字: AWS AN BSP 數(shù)字化

倫敦2024年8月29日 /美通社/ -- 英國汽車技術公司SODA.Auto推出其旗艦產品SODA V,這是全球首款涵蓋汽車工程師從創(chuàng)意到認證的所有需求的工具,可用于創(chuàng)建軟件定義汽車。 SODA V工具的開發(fā)耗時1.5...

關鍵字: 汽車 人工智能 智能驅動 BSP

北京2024年8月28日 /美通社/ -- 越來越多用戶希望企業(yè)業(yè)務能7×24不間斷運行,同時企業(yè)卻面臨越來越多業(yè)務中斷的風險,如企業(yè)系統(tǒng)復雜性的增加,頻繁的功能更新和發(fā)布等。如何確保業(yè)務連續(xù)性,提升韌性,成...

關鍵字: 亞馬遜 解密 控制平面 BSP

8月30日消息,據(jù)媒體報道,騰訊和網(wǎng)易近期正在縮減他們對日本游戲市場的投資。

關鍵字: 騰訊 編碼器 CPU

8月28日消息,今天上午,2024中國國際大數(shù)據(jù)產業(yè)博覽會開幕式在貴陽舉行,華為董事、質量流程IT總裁陶景文發(fā)表了演講。

關鍵字: 華為 12nm EDA 半導體

8月28日消息,在2024中國國際大數(shù)據(jù)產業(yè)博覽會上,華為常務董事、華為云CEO張平安發(fā)表演講稱,數(shù)字世界的話語權最終是由生態(tài)的繁榮決定的。

關鍵字: 華為 12nm 手機 衛(wèi)星通信

要點: 有效應對環(huán)境變化,經(jīng)營業(yè)績穩(wěn)中有升 落實提質增效舉措,毛利潤率延續(xù)升勢 戰(zhàn)略布局成效顯著,戰(zhàn)新業(yè)務引領增長 以科技創(chuàng)新為引領,提升企業(yè)核心競爭力 堅持高質量發(fā)展策略,塑強核心競爭優(yōu)勢...

關鍵字: 通信 BSP 電信運營商 數(shù)字經(jīng)濟

北京2024年8月27日 /美通社/ -- 8月21日,由中央廣播電視總臺與中國電影電視技術學會聯(lián)合牽頭組建的NVI技術創(chuàng)新聯(lián)盟在BIRTV2024超高清全產業(yè)鏈發(fā)展研討會上宣布正式成立。 活動現(xiàn)場 NVI技術創(chuàng)新聯(lián)...

關鍵字: VI 傳輸協(xié)議 音頻 BSP

北京2024年8月27日 /美通社/ -- 在8月23日舉辦的2024年長三角生態(tài)綠色一體化發(fā)展示范區(qū)聯(lián)合招商會上,軟通動力信息技術(集團)股份有限公司(以下簡稱"軟通動力")與長三角投資(上海)有限...

關鍵字: BSP 信息技術
關閉
關閉