基于Ajax技術的Web 2.0開發(fā)應用

0 引言

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

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

1 Ajax的工作原理

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

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

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

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

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

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

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

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

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

(5)可以調用外部數據，取得足夠權限后，能輕易地實現數據聚合。

(6)進一步促進頁面呈現與數據的分離。

2 Ajax技術在Web 2.0中的應用

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

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

客戶端的輸入框需要增加onkeydown響應函數，以便即時獲得滿足條件的列表；

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

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

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

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

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

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

3結 語

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