Ajax技術(shù)在B/S架構(gòu)系統(tǒng)中的應(yīng)用研究

田敬軍，翟立春

（1.唐山師范學(xué)院 計算機(jī)科學(xué)系，河北 唐山 063000，2.唐山市豐南區(qū) 宣莊中學(xué)，河北 唐山 063300）

在Web開發(fā)過程中通過Ajax的支持，可以通過在B/S（瀏覽器/服務(wù)器）架構(gòu)上，帶給用戶類似 C/S（客戶機(jī)/服務(wù)器模式）架構(gòu)的體驗。通過Ajax技術(shù)，瀏覽器與服務(wù)器之間采用異步通信機(jī)制，從而避免了瀏覽者等待，給瀏覽者以連續(xù)的感受。

1 Ajax技術(shù)起源

隨著Internet技術(shù)興起，軟件系統(tǒng)經(jīng)歷了C/S結(jié)構(gòu)到B/S結(jié)構(gòu)的變革。在B/S結(jié)構(gòu)下軟件應(yīng)用的業(yè)務(wù)邏輯完全在應(yīng)用服務(wù)器端實現(xiàn)，用戶表現(xiàn)完全在 Web服務(wù)順實現(xiàn)，客戶端只需要瀏覽器就可進(jìn)行業(yè)務(wù)處理，因而這種結(jié)構(gòu)也就成了當(dāng)今應(yīng)用軟件的首選體系結(jié)構(gòu)。

1.1 B/S結(jié)構(gòu)的優(yōu)點

（1）B/S結(jié)構(gòu)應(yīng)用的數(shù)據(jù)安全性更好，因為應(yīng)用的數(shù)據(jù)統(tǒng)一保存在服務(wù)器端，因此可以進(jìn)行更有效的管理。

（2）B/S結(jié)構(gòu)應(yīng)用的數(shù)據(jù)管理更有效，B/S結(jié)構(gòu)應(yīng)用無需安裝區(qū)域數(shù)據(jù)服務(wù)器，所有的數(shù)據(jù)都安裝在服務(wù)器端，因此所有用戶都可以看到數(shù)據(jù)的實時結(jié)構(gòu)。

（3）B/S結(jié)構(gòu)應(yīng)用的應(yīng)用場景更加廣泛，所有的客戶端可以接入互聯(lián)網(wǎng)，即可使用應(yīng)用程序，避免了網(wǎng)絡(luò)的限制。

（4）業(yè)務(wù)擴(kuò)展方便，通過增加網(wǎng)頁即可增加服務(wù)功能。

（5）維護(hù)方便，只需要改變網(wǎng)頁，即可實現(xiàn)同步更新。

1.2 B/S 模式的缺點

（1）傳統(tǒng) B/S結(jié)構(gòu)的狀態(tài)是不連續(xù)的，只能通過Http-Session來跟蹤用戶狀態(tài)。

（2）無法實現(xiàn)具有個性化的功能要求。

（3）頁面動態(tài)刷新，響應(yīng)速度明顯降低。

（4）功能弱化，難以實現(xiàn)傳統(tǒng)C/S模式下的特殊功能。

1.3 B/S結(jié)構(gòu)的請求模式

傳統(tǒng)B/S結(jié)構(gòu)的請求是一種獨占式的請求。如果一個任務(wù)需要多步或多選項才能完成，在 HTML里，一個多步驟的任務(wù)可以在單頁內(nèi)表達(dá)出來。但是由于 HTML的互動性有限，會產(chǎn)生一份很長的頁面，使用戶感到混亂而難以使用?；蛘邔⒍鄠€步驟分成幾個頁面分別提交，對于傳統(tǒng)的獨占式的請求，如果一個請求沒有得到完全響應(yīng)，后一個請求則不能發(fā)送。用戶在等待服務(wù)器的響應(yīng)期間，用戶的瀏覽器則一片空白。這種獨占式請求可用圖1表示。

圖1 獨占請求示意圖

傳統(tǒng)的 Web應(yīng)用大都采用這種獨占式的請求，而且每個請求對應(yīng)一個頁面，因此每當(dāng)服務(wù)器響應(yīng)到達(dá)客戶端時，瀏覽器都會重新轉(zhuǎn)載該響應(yīng)，從而導(dǎo)致頻繁的頁面刷新。因為傳統(tǒng)B/S結(jié)構(gòu)應(yīng)用的每個頁面的使用時間都很短暫（只用于一次改善請求，或一次裝載服務(wù)器響應(yīng)），因此不可能將該頁面制作成表現(xiàn)功能豐富的頁面，因為這樣客戶端的下載成本太高，因此傳統(tǒng)B/S結(jié)構(gòu)應(yīng)用的表現(xiàn)層頁面都很簡陋，而Ajax技術(shù)的出現(xiàn)則完善了傳統(tǒng)的Web應(yīng)用的不足。

2 Ajax技術(shù)原理

Ajax技術(shù)使用異步方式發(fā)送用戶請求：當(dāng)用戶在瀏覽頁面的同時可以發(fā)送請求，在第一個請求的服務(wù)器響應(yīng)還沒有完全結(jié)束時瀏覽器可以再次發(fā)送請求，頁面狀態(tài)不會停止，即使服務(wù)器響應(yīng)還沒有到達(dá)，瀏覽者也可以瀏覽頁面。

當(dāng)服務(wù)器響應(yīng)到達(dá)客戶端時，瀏覽器也無需重新加載整個頁面，它只更新頁面的部分?jǐn)?shù)據(jù)，從而提高頁面的利用時間（可以使用一個頁面改善無數(shù)個請求，裝載無數(shù)次響應(yīng)），因此可以將表現(xiàn)層頁面制作成表現(xiàn)功能非常豐富的頁面。

2.1 異步發(fā)送請求

Ajax技術(shù)的關(guān)鍵在于異步發(fā)送請求。要讓瀏覽器動態(tài)加載服務(wù)器響應(yīng)，還需要利用傳統(tǒng)的 DHTML知識來實現(xiàn)HTML頁面的動態(tài)更新。如圖2所示。

圖2 Ajax異步發(fā)送請求示意圖

使用Ajax技術(shù)能避免頻繁刷新頁面，服務(wù)器響應(yīng)的是數(shù)據(jù)面不是整個頁面內(nèi)容，Ajax技術(shù)負(fù)責(zé)獲取服務(wù)器數(shù)據(jù)，然后將服務(wù)器數(shù)據(jù)動態(tài)加載到瀏覽器中。

2.2 Ajax相關(guān)技術(shù)

Ajax 應(yīng)用程序所用到的基本技術(shù)包括：

（1）HTML用于建立Web表單并確定應(yīng)用程序其它部分使用的字段。

（2）JavaScript代碼是運行Ajax應(yīng)用程序的核心代碼，幫助改進(jìn)與服務(wù)器應(yīng)用程序的通信。

（3）DHTML或Dynamic HTML，用于動態(tài)更新表單。我們將使用div、span和其他動態(tài)HTML元素來標(biāo)記HTML。

（4）文檔對象模型 DOM 用于（通過 JavaScript 代碼）處理 HTML 結(jié)構(gòu)和（某些情況下）服務(wù)器返回的 XML。

2.2.1 Ajax核心：XMLHttpReqest

XMLHttpRequest是整個Ajax技術(shù)的關(guān)鍵，沒有它就沒有 Ajax。Ajax技術(shù)的核心是異步改善請求，而 XMLHttp-Request則是異步發(fā)送請求的對象。

目前IE 5以上，Mozilla1.0以上，MetScape7以上都支持XMLHttpRequest。

2.2.2 Ajax腳本：JavaScript語言

JavaScript是Ajax技術(shù)中另一個重要部分，它主要完成如下事情：

（1）創(chuàng)建XMLHttpRequest對象。

（2）通過XMLHttpRequest向服務(wù)器改善請求。

（3）創(chuàng)建回調(diào)函數(shù)，監(jiān)視服務(wù)器狀態(tài)，妝服務(wù)器響應(yīng)完成后，回調(diào)函數(shù)執(zhí)行。

（4）回調(diào)函數(shù)通過DOM動態(tài)更新HTML頁面。

2.2.3 DOM模型

DOM（Document Object Model）是操作HTML和XML文件的一組API，由于它是基于信息層次的，因而 DOM 被認(rèn)為是基于樹或基于對象的。通過使用DOM可以用編程的方式操作文檔結(jié)構(gòu)，改變文檔內(nèi)容。

2.3 應(yīng)用實例

比如在一個 Web應(yīng)用系統(tǒng)中有個用戶注冊模塊，在用戶填寫完郵箱之后，系統(tǒng)會自動到數(shù)據(jù)庫中檢驗郵箱地址是否已經(jīng)存在，并返回給頁面提示信息，告知用戶郵箱是否可用。這種情況下就可以采用Ajax技術(shù)，它可以不刷新頁面即可實現(xiàn)對數(shù)據(jù)庫的訪問，并返回驗證信息。以防止用戶所填數(shù)據(jù)清空，方便用戶注冊。主要代碼如下：

new Ajax.Request(url,

{method:'get',

onSuccess:function(req){

if(req.responseText != '1' ){

$('s2').innerHTML="wrong ";

$('s2').style.color="red";

return false;

}else if(req.responseText == '1'){

$('s6').innerHTML="";

src='${pageContext.request.contextPath}/images/check_right.gi f'/>";}}} );

用戶的驗證碼部分頁面所輸出的圖片由系統(tǒng)隨機(jī)生成自動生成的，并可以在用戶看不清楚的情況下，采用異步加載技術(shù)來實現(xiàn)圖片的變更。當(dāng)用戶所填寫的數(shù)據(jù)正確并點擊提交時，服務(wù)器端Struts通過提供的Form表單，以及其對應(yīng)的配置文件中的驗證框架對其進(jìn)行驗證，如果不正確，頁面不會跳轉(zhuǎn)到下一頁，只有正確時才會把用戶所提交的信息存入數(shù)據(jù)庫，并向用戶的郵箱發(fā)送賬戶的激活碼。

登錄頁面同樣可以采用Ajax的異步處理技術(shù)對表單進(jìn)行驗證，在正確登錄已后會將用戶端的cookie中保存用戶的ID，在服務(wù)器端的session 中保存用戶的user對象。

2.4 Ajax技術(shù)的優(yōu)點和缺點

2.4.1 優(yōu)點

（1）服務(wù)器和瀏覽器間數(shù)據(jù)交換大量減少，響應(yīng)更快。

（2）很多的處理工作可以在發(fā)出請求的客戶端機(jī)器上完成，所以Web服務(wù)器的處理時間減少。

（3）在不更新整個頁面的前提下維護(hù)數(shù)據(jù)。

2.4.2 缺點

（1）破壞瀏覽器后退按鈕的正常行為，在動態(tài)更新頁面的情況下，用戶無法回到前一個頁面狀態(tài)。

（2）一些手持設(shè)備（如手機(jī)、PDA等）現(xiàn)在還不能很好的支持Ajax。

（3）用JavaScript作的Ajax引擎，JavaScript的兼容性和Debug都是讓人頭痛的事。

（4）對串流媒體的支持不好。

Ajax可以使用XML文件作為數(shù)據(jù)交換的格式，還可以使用普通文本，而JSON是最理想的數(shù)據(jù)交換格式。

3 JSON介紹

JSON 即 JavaScript Object Notation，它是一種輕量級的數(shù)據(jù)交換格式，非常適合于服務(wù)器與JavaScript的交互。

許多Web系統(tǒng)中應(yīng)用Ajax顯示的后臺數(shù)據(jù)是以JSON的格式從后臺傳遞到前臺的。應(yīng)用了ActiveX Object對象訪問struts2的Action，Action調(diào)用業(yè)務(wù)邏輯層返回的數(shù)據(jù)經(jīng)過freemarker模板轉(zhuǎn)換成標(biāo)準(zhǔn)的JSON格式字符串，然后傳遞給前臺，再利用JavaScript動態(tài)DOM，顯示數(shù)據(jù)。

3.1 JSON 數(shù)據(jù)格式解析

和XML一樣，JSON也是基于純文本的數(shù)據(jù)格式。由于JSON是為 JavaScript 準(zhǔn)備的，因此，JSON 的數(shù)據(jù)格式非常簡單，可以用 JSON傳輸一個簡單的值（如 String、Number、Boolean），也可以傳輸一個數(shù)組，或者一個復(fù)雜的Object對象。

（1）對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”開始，以“}”結(jié)束。每個“名稱”后跟一個“：”，“‘名稱/值’對”之間使用“,”分隔。

（2）數(shù)組是值（value）的有序集合。一個數(shù)組以“[”開始，“]”結(jié)束。值之間使用“,”分隔。

（3）值（value）可以是雙引號括起來的字符串（String）、數(shù)值（number）、true、false、null、對象（object）或者數(shù)組（array）。這些結(jié)構(gòu)可以嵌套。

（4）字符串（string）是由雙引號包圍的任意數(shù)量Unicode字符的集合，使用反斜體轉(zhuǎn)義，一個字符（character）即一個單獨的字符串（character string）。

3.2 JSON技術(shù)與XML比較

3.2.1 可讀性

JSON和XML的可讀性可謂不相上下，一邊是建議的語法，一邊是規(guī)范的標(biāo)簽形式，很難分出勝負(fù)。

3.2.2 可擴(kuò)展性

XML天生有很好的擴(kuò)展性，JSON當(dāng)然也有，沒有什么是XML能擴(kuò)展而JSON所不能的。

3.2.3 編碼難度

XML有豐富的編碼工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的編碼明顯比XML容易許多，即使不借助工具也能寫出JSON的代碼，可是要寫好XML就不太容易了。

3.2.4 解碼難度

XML的解析得考慮子節(jié)點父節(jié)點，讓人頭昏眼花，而JSON的解析難度幾乎為零。

4 結(jié)束語

基于Ajax技術(shù)的Web應(yīng)用繼承了Ajax技術(shù)的優(yōu)勢，有著與服務(wù)器異步交互的能力，使未來的 Web平臺朝著多元化、即時性與交互性的方向發(fā)展，真正實現(xiàn)軟件服務(wù)用戶的宗旨。