用AJAX開發智能Web應用程式之基礎篇(1)

來源:互聯網
上載者:User
ajax|web|程式

一. 什麼是AJAX?

這個名字代表了非同步JavaScript+XMLHTTPRequest,並且意味著你可以在基於瀏覽器的JavaScript和伺服器之間建立通訊端通訊。其實AJAX並不是一種新技術,而是已經成功地用於現代瀏覽器中的若干成功技術的可能性組合。

所有的AJAX應用程式實現了一種“豐富的”UI——這是通過JavaScript操作HTML文件物件模型並且經由XMLHttpRequest實現的精確定位的資料檢索來實現的。典型的樣本AJAX應用程式是Google Labs(http://labs.google.com)的Google Maps和Google Suggest。這些應用程式現場監視使用者輸入並且提供即時的頁面更新。最重要的是,在使用者通過地圖導航或輸入一個尋找字串的同時,這些事件不需要重新整理頁面。

事實上,支援這些令人感到驚訝的應用的技術已經出現一段時間了,儘管它們要求複雜的技能以及使用瀏覽器的技巧。一些專利產品就提供了相似的能力——如Macromedia Flash外掛程式,Java Applets或.NET運行時——在達到實用上已經有一段時間了。把一種可與伺服器通話的指令碼組件引入到瀏覽器中的思想早在IE 5.0中就已經存在。Firefox和其它流行的瀏覽器也加入到瀏覽器大軍中並以一種內建對象形式支援XMLHTTPRequest。隨著跨平台瀏覽器的出現,這些技術得到了認可並在2004年3月一家稱為Adaptive Path的公司中正式提出了AJAX。

簡而言之,由於來自於Google的支援和安裝了一點可用的瀏覽器技術,加上為了一種"更好的使用者體驗",每個人都在把用戶端技術添加到Web應用程式上。

二. AJAX與傳統應用程式的區別

一個傳統Web應用程式模型實際上是一種基本的事件——使用者被迫提交表單以實現頁面交換。也就是說,表單提交和頁面傳送無法得到保證:還有更壞的情形——使用者需要再次點擊。這與AJAX截然不同-——資料跨過線路而不是完整的HTML頁面傳輸。這種資料交換是經由特定的瀏覽器對象:XMLHttpRequest實現的;再由適當的邏輯來處理每個資料請求的結果,頁面的特定地區而不是完整的頁面被更新。結果是更快的速度,更少的擁擠和更好的資訊傳送控制。

傳統型"click-refresh"Web應用程式強迫使用者中斷工作過程而等待頁面的重裝。通過引入AJAX技術,一個用戶端指令碼能夠非同步地與伺服器通話,而使用者仍能保持輸入資料。除了對使用者透明之外,這樣的非同步意味著伺服器可以有更多時間來處理請求。

傳統Web應用程式把所有的處理代理到伺服器並且強迫伺服器進行狀態管理。AJAX允許靈活劃分應用程式邏輯以及客戶和伺服器之間的狀態管理。這就消除了一種"click-refresh"依賴性並且提供更好的伺服器延展性。當該狀態儲存在用戶端,你就不必跨越伺服器來維持會話或儲存/結束狀態-其使用到期日是由用戶端來定義的。

三. AJAX——分布式的MVC

儘管AJAX應用程式依靠JavaScript來實現描述層,然而處理能力和知識庫仍然存在於伺服器上。此時,AJAX應用程式大量的與J2EE伺服器通訊——把資料輸入/輸出Web服務和servlets。具有基於AJAX的描述層的J2EE應用程式和標準J2EE應用程式之間的區別首先在於,MVC是通過線路分布的。通過使用AJAX,視圖是本地的,而模型和控制器是分布式的——這使得開發人員能夠靈活地決定哪些組件會是基於用戶端的。具體地說,本地視圖通過巧妙地操作HTML DOM而產生圖形;控制器局部地處理使用者輸入並且根據開發人員的判斷擴充到伺服器的處理——經由HTTP請求(Web服務,XML/RPC或其它)實現;模型的遠程部分是根據用戶端需要而下載的以達到即時更新用戶端頁面;並且狀態是在用戶端收集的。

在以後的AJAX文章中,我們將比較深入地討論這裡的每一種組件並提供有關它們聯合在一起進行應用的樣本。現在,先不多說,讓我們詳細地分析一個簡單的AJAX樣本。

四. 郵政區號校正和查詢

我們將建立一個包含三個INPUT欄位(Zip,City和State)的HTML頁面。我們將保證,只要使用者輸入郵政區號的前三個數字,該頁面上的欄位就會用第一個匹配的狀態值填充。一旦使用者輸入了所有五位郵政區號數,我們將立即決定和填充相應的城市。如果郵政區號無效(在伺服器的資料庫沒有找到),那麼我們將把郵政區號的邊界設定為紅色。這樣的可視化線索有助於使用者並且在現代瀏覽器中已經成為一種標準(作為一執行個體,當Firefox找到一個HTML頁面中的匹配關鍵字時,它會高亮與你在瀏覽器尋找域輸入的內容一致的部分)。

讓我們首先建立一個簡單的包含三個INPUT欄位的HTML:zip,city和state。請注意,一旦一個字元輸入進郵政區號欄位域中,即調用方法zipChanged()。JavaScript函數zipChanged()(見下)在當zip長度為3時調用函數updateState(),而在當zip長度為5時調用函數up-dateCity()。而updateCity()和updateState()把大部分的工作代理到另一個函數ask()。

Zip:<input id="zipcode" type="text" maxlength="5" onKeyUp="zipChanged()"

style="width:60"/>

City: <input id="city" disabled maxlength="32" style="width:160"/>

State:<input id="state" disabled maxlength="2" style="width:30"/>

<script src="xmlhttp.js"></script>

<script>

var zipField = null;

function zipChanged(){

zipField = document.getElementById("zipcode")

var zip = zipField.value;

zip.length == 3?updateState(zip):zip.length == 5?updateCity(zip):"";

}

function updateState(zip) {

 var stateField = document.getElementById("state");

 ask("resolveZip.jsp?lookupType=state&zip="+zip, stateField, zipField);

}

function updateCity(zip) {

 var cityField = document.getElementById("city");

 ask("resolveZip.jsp? lookupType=city&zip="+zip, cityField, zipField);

}

</script>


函數ask()與伺服器進行通訊並分配一個回呼函數來處理伺服器的響應(見下列代碼)。後面,我們將分析具有雙重特點的resolveZip.jsp的內容-它根據zip欄位中的字元數尋找city或state資訊。重要的是,ask()使用了具有非同步特點的XmlHttpRequest,這樣填充state和city欄位或著色zip欄位邊界就可以不必減慢資料入口而得以實現。首先,我們調用request.open()-它用伺服器開啟通訊端頻道,使用一個HTTP動詞(GET或POST)作為第一個參數並且以資料提供者的URL作為第二個參數。request.open()的最後一個參數被設定為true-它指示該請求的非同步特性。注意,該請求還沒有被提交。隨著對request.send()的調用,開始提交-這可以為POST提供任何必要的有效載荷。在使用非同步請求時,我們必須使用request.onreadystatechanged屬性來分配請求的回呼函數。(如果請求是同步的話,我們應該能夠在調用request.send之後立即處理結果,但是我們也有可能阻斷使用者,直到該請求完成為止。)

[1] [2]  下一頁



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.