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

張 琳，張國(guó)平

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

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

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

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

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

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

2 AJAX技術(shù)及原理

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

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

當(dāng)客戶端瀏覽器發(fā)出HTTP請(qǐng)求時(shí)，用戶請(qǐng)求交由AJAX來(lái)代理，只有確實(shí)需要從服務(wù)器讀取新數(shù)據(jù)時(shí)，才由客戶端通過(guò)JavaScript，調(diào)用AJAX引擎，向服務(wù)器端發(fā)出HTTP請(qǐng)求，無(wú)需等待請(qǐng)求的響應(yīng)，用戶可以繼續(xù)瀏覽或交互。當(dāng)服務(wù)端的數(shù)據(jù)以XML形式返回時(shí)，AJAX引擎接收數(shù)據(jù)，并指定JavaScript函數(shù)來(lái)完成相應(yīng)的處理或頁(yè)面的更新，而不是刷新整個(gè)頁(yè)面，從而實(shí)現(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ā)布的一個(gè)精簡(jiǎn)的AJAX For ASP.NET1.1/2.0的框架[7]。AJAX.NET封裝了XMLHttp Request的具體實(shí)現(xiàn)方式，用戶只需在服務(wù)器端的.NET方法上加上AJAX屬性標(biāo)記來(lái)創(chuàng)建AJAX.NET方法，就能像在服務(wù)器端調(diào)用方法一樣在客戶端JS腳本中調(diào)用服務(wù)器端方法。實(shí)際上，用戶一旦給服務(wù)器端public方法加上AJAX屬性標(biāo)記，頁(yè)面在第一次被加載的時(shí)候，AJAX就會(huì)給這個(gè)服務(wù)器端方法在客戶端腳本中生成一個(gè)方法代理，用戶便能通過(guò)這個(gè)代理調(diào)用服務(wù)器端方法并返回結(jié)果。AJAX.NET在一定程度上實(shí)現(xiàn)了編寫(xiě)腳本的自動(dòng)化，使程序員告別繁重的AJAX開(kāi)發(fā)，使程序開(kāi)發(fā)者更能專注于業(yè)務(wù)邏輯。

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

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

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

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

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

第4步：編寫(xiě)返回?cái)?shù)據(jù)集的代碼：

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

第6步：添加客戶端綁定

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

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

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

5 結(jié)束語(yǔ)

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

[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擴(kuò)充靜態(tài)生成網(wǎng)站技術(shù)研究[J].邵陽(yáng)學(xué)院學(xué)報(bào)：自然科學(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].電腦開(kāi)發(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開(kāi)發(fā)研究[J].電腦知識(shí)與技術(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]于超楠，姜宏達(dá).AJAX在網(wǎng)頁(yè)制作中的應(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開(kāi)發(fā)中的應(yīng)用[J].計(jì)算機(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ù)在項(xiàng)目管理系統(tǒng)中的應(yīng)用[J].云南大學(xué)學(xué)報(bào)：自然科學(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ì)分析 [J].陜西電力，2011（2）：38-41.

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