田敬軍，翟立春

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

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

1 Ajax技術起源

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

1.1 B/S結構的優(yōu)點

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

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

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

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

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

1.2 B/S 模式的缺點

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

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

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

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

1.3 B/S結構的請求模式

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

圖1 獨占請求示意圖

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

2 Ajax技術原理

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

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

2.1 異步發(fā)送請求

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

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

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

2.2 Ajax相關技術

Ajax 應用程序所用到的基本技術包括：

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

（2）JavaScript代碼是運行Ajax應用程序的核心代碼，幫助改進與服務器應用程序的通信。

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

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

2.2.1 Ajax核心：XMLHttpReqest

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

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

2.2.2 Ajax腳本：JavaScript語言

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

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

（2）通過XMLHttpRequest向服務器改善請求。

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

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

2.2.3 DOM模型

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

2.3 應用實例

比如在一個 Web應用系統(tǒng)中有個用戶注冊模塊，在用戶填寫完郵箱之后，系統(tǒng)會自動到數(shù)據(jù)庫中檢驗郵箱地址是否已經(jīng)存在，并返回給頁面提示信息，告知用戶郵箱是否可用。這種情況下就可以采用Ajax技術，它可以不刷新頁面即可實現(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)隨機生成自動生成的，并可以在用戶看不清楚的情況下，采用異步加載技術來實現(xiàn)圖片的變更。當用戶所填寫的數(shù)據(jù)正確并點擊提交時，服務器端Struts通過提供的Form表單，以及其對應的配置文件中的驗證框架對其進行驗證，如果不正確，頁面不會跳轉到下一頁，只有正確時才會把用戶所提交的信息存入數(shù)據(jù)庫，并向用戶的郵箱發(fā)送賬戶的激活碼。

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

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

2.4.1 優(yōu)點

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

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

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

2.4.2 缺點

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

（2）一些手持設備（如手機、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ù)交換格式，非常適合于服務器與JavaScript的交互。

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

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

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

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

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

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

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

3.2 JSON技術與XML比較

3.2.1 可讀性

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

3.2.2 可擴展性

XML天生有很好的擴展性，JSON當然也有，沒有什么是XML能擴展而JSON所不能的。

3.2.3 編碼難度

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

3.2.4 解碼難度

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

4 結束語

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