XML數(shù)據(jù)島結(jié)合AJAX實現(xiàn)Web的異步刷新

張 琳，張國平

（平頂山學(xué)院 軟件學(xué)院，河南 平頂山 467000）

隨著社會的不斷發(fā)展，人們越來越依賴通過使用動態(tài)頁面從Internet獲取信息[1]。訪問的動態(tài)頁面信息需要對數(shù)據(jù)庫進行更新或查詢。傳統(tǒng)的B/S模式的Web系統(tǒng)存在一定的不足：一是數(shù)據(jù)的顯示內(nèi)容與形式?jīng)]有分離，信息處理效率低；二是采用同步交互過程，即客戶端向服務(wù)器發(fā)出HTTP請求，服務(wù)器接收請求并進行處理，在處理過程中，用戶一直處于等待狀態(tài)，直到服務(wù)器返回一個HTML頁面。當(dāng)用戶量不斷增大時，用戶在訪問服務(wù)器時，瀏覽器就會等待刷新整個頁面，當(dāng)頁面中包含的表單比較多時，會導(dǎo)致頁面呈現(xiàn)“白屏”，用戶的體驗是不連貫。XML數(shù)據(jù)島和AJAX技術(shù)的出現(xiàn)，能很好解決上述問題。

1 XML數(shù)據(jù)島

XML數(shù)據(jù)島（data islands）就是被HTML頁面引用或者包含的XML數(shù)據(jù)，是從IE5開始引入的一項技術(shù)[2]。可以通過XML標(biāo)簽很輕松將數(shù)據(jù)島插入到HTML文檔中。通過XML的id訪問XML數(shù)據(jù)島中的數(shù)據(jù)。在頁面中的數(shù)據(jù)島和其它的XML數(shù)據(jù)一樣，可以通過標(biāo)準(zhǔn)的dom方法來進行訪問。

數(shù)據(jù)島的優(yōu)點是可以很容易的將XML中的數(shù)據(jù)和HTML元素進行綁定，免去了手工把數(shù)據(jù)填充到HTML中的麻煩。修改數(shù)據(jù)島中的數(shù)據(jù)，頁面上與之綁定的HTML元素的值也隨之改變。

數(shù)據(jù)島有兩種定義方式：一種是直接將XML嵌入到HTML頁面中；另一種是將XML數(shù)據(jù)保存在單獨的XML文件中，通過標(biāo)記引入外部XML文件。例如：<--!引入外部xml文檔-->

2 AJAX技術(shù)及原理

AJAX （Asynchronous JavaScript and XML）， 即 ： 異 步JavaScript與XML，是使用客戶端腳本與Web服務(wù)器交換數(shù)據(jù)的Web應(yīng)用開發(fā)方法。Web頁面不用打斷交互流程進行重新加裁，就可以動態(tài)地更新[3-4]。

AJAX技術(shù)是一個Web開發(fā)模式，與傳統(tǒng)的Web更新技術(shù)不同，它的原理主要是在客戶端和服務(wù)器之間加了一個中間層——AJAX引擎，其基本原理可以如圖1所示[5]。

當(dāng)客戶端瀏覽器發(fā)出HTTP請求時，用戶請求交由AJAX來代理，只有確實需要從服務(wù)器讀取新數(shù)據(jù)時，才由客戶端通過JavaScript，調(diào)用AJAX引擎，向服務(wù)器端發(fā)出HTTP請求，無需等待請求的響應(yīng)，用戶可以繼續(xù)瀏覽或交互。當(dāng)服務(wù)端的數(shù)據(jù)以XML形式返回時，AJAX引擎接收數(shù)據(jù)，并指定JavaScript函數(shù)來完成相應(yīng)的處理或頁面的更新，而不是刷新整個頁面，從而實現(xiàn)用戶操作與服務(wù)器響應(yīng)的異步化[6]。

圖1 AJAX與傳統(tǒng)Web應(yīng)用模式Fig.1 The AJAX with traditional Web application mode

3 AJAX.NET框架技術(shù)

AJAX.NET組件是由Googlegroup發(fā)布的一個精簡的AJAX For ASP.NET1.1/2.0的框架[7]。AJAX.NET封裝了XMLHttp Request的具體實現(xiàn)方式，用戶只需在服務(wù)器端的.NET方法上加上AJAX屬性標(biāo)記來創(chuàng)建AJAX.NET方法，就能像在服務(wù)器端調(diào)用方法一樣在客戶端JS腳本中調(diào)用服務(wù)器端方法。實際上，用戶一旦給服務(wù)器端public方法加上AJAX屬性標(biāo)記，頁面在第一次被加載的時候，AJAX就會給這個服務(wù)器端方法在客戶端腳本中生成一個方法代理，用戶便能通過這個代理調(diào)用服務(wù)器端方法并返回結(jié)果。AJAX.NET在一定程度上實現(xiàn)了編寫腳本的自動化，使程序員告別繁重的AJAX開發(fā)，使程序開發(fā)者更能專注于業(yè)務(wù)邏輯。

4 XML數(shù)據(jù)島結(jié)合AJAX.NET實現(xiàn)異步刷新

在Web工程項目中使用AJAX.NET框架，首先要從http：//www.ajaxpro.info/官方網(wǎng)站下載該組件，并導(dǎo)入工程中。具體實現(xiàn)步驟如下：第1步：確定XML數(shù)據(jù)源，具體代碼如下：

第2步：確定綁定容器，具體代碼如下：

在上述代碼①處表示XML數(shù)據(jù)源，即要綁定的數(shù)據(jù)，person結(jié)點相當(dāng)于表名，name、age相當(dāng)于列名，在②③處表示要綁定字段名。

第3步：配置AJAX，在Web.config文件中加入配置節(jié)：

第4步：編寫返回數(shù)據(jù)集的代碼：

第5步：注冊包含服務(wù)器端函數(shù)的類

第6步：添加客戶端綁定

//定義表格的表頭，分別為姓名和年齡。

//設(shè)置或獲取由 dataSrc屬性指定的綁定到指定對象的給定數(shù)據(jù)源的字段

第7步：編定加載數(shù)據(jù)的JavaScript代碼

5 結(jié)束語

Web應(yīng)用是當(dāng)前網(wǎng)絡(luò)上使用極其廣泛的應(yīng)用開發(fā)技術(shù)，本文針對傳統(tǒng)的B/S模式的Web系統(tǒng)存在的不足，將AJAX.NET與XML數(shù)據(jù)島技術(shù)相結(jié)合，解決了數(shù)據(jù)的顯示內(nèi)容與形式分離，用戶操作與服務(wù)器響應(yīng)的異步化問題，由于Ajax作為一種新的應(yīng)用程序技術(shù)，不用打斷交互流程進行重新加裁，就可以動態(tài)地更新，因此可以降低網(wǎng)絡(luò)負(fù)載，提高數(shù)據(jù)訪問速度。

[1]吳波，王華軍.XML數(shù)據(jù)綁定技術(shù)探析[J].軟件導(dǎo)刊，2008（8）：30-32.

WU Bo，WANG Hua-jun.XML data binding technology analysis[J].Software Guide，2008（8）：30-32.

[2]朱奕輝，雷軍程.基于AJAX和XML擴充靜態(tài)生成網(wǎng)站技術(shù)研究[J].邵陽學(xué)院學(xué)報：自然科學(xué)版，2011（3）：34-36.

ZHU Yi-hui，LEI Jun-cheng.AJAX and XML-based technology research fortheexpansion ofthestaticsite generation[J].Journal of Shaoyang University：Natural Science Edition，2011（3）：34-36.

[3]楊振華，楊社堂.AJAX及其性能分析[J].電腦開發(fā)與應(yīng)用，2009（3）：59-61.

YANG Zheni-hua，YANG She-tang.AJAX and its performance analysis[J].Computer Development&Applications，2009（3）：59-61.

[4]金瑩，李超.基于AJAX的WEB開發(fā)研究[J].電腦知識與技術(shù)，2009（4）：839-840.

JIN Ying，LI Chao.Research on web development based on AJAX[J].Computer Knowledge and Technology，2009（4）：839-840.

[5]于超楠，姜宏達.AJAX在網(wǎng)頁制作中的應(yīng)用[J].信息技術(shù)，2012（2）：169-172.

YU Chao-nan，JIANG Hong-da.Application of AJAX at webpage development[J].Information Technology，2012 （2）：169-172.

[6]仰燕蘭，金曉雪.ASP.NET AJAX框架研究及其在Web開發(fā)中的應(yīng)用[J].計算機應(yīng)用與軟件，2011（6）：195-198.

YANG Yan-lan，JIN Xiao-xue.ON ASP.NET AJAX framework and its application in web development[J].Computer Applications and Software，2011（6）：195-198.

[7]李志秀，張軍.JQuery Ajax異步處理JSON數(shù)據(jù)在項目管理系統(tǒng)中的應(yīng)用[J].云南大學(xué)學(xué)報：自然科學(xué)版，2011（12）：247-250.

LI Zhi-xiu，ZHANG Jun.Aasynchronous processing JSON data by JQuery Ajax technology in the application of project management system[J].Journal of Yunnan University：Natural Sciences Edition，2011（12）：247-250.

[8]李剛.基于SOA的Web GIS系統(tǒng)框架設(shè)計分析 [J].陜西電力，2011（2）：38-41.

LI Gang.Web GIS system frame design amalysis based on SOA[J].Shanxi Electric Power，2011（2）：38-41.