XML數據島結合AJAX實現Web的異步刷新

張 琳，張國平

（平頂山學院 軟件學院，河南 平頂山 467000）

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

1 XML數據島

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

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

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

2 AJAX技術及原理

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

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

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

圖1 AJAX與傳統Web應用模式Fig.1 The AJAX with traditional Web application mode

3 AJAX.NET框架技術

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

4 XML數據島結合AJAX.NET實現異步刷新

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

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

在上述代碼①處表示XML數據源，即要綁定的數據，person結點相當于表名，name、age相當于列名，在②③處表示要綁定字段名。

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

第4步：編寫返回數據集的代碼：

第5步：注冊包含服務器端函數的類

第6步：添加客戶端綁定

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

//設置或獲取由 dataSrc屬性指定的綁定到指定對象的給定數據源的字段

第7步：編定加載數據的JavaScript代碼

5 結束語

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

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

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

[2]朱奕輝，雷軍程.基于AJAX和XML擴充靜態生成網站技術研究[J].邵陽學院學報：自然科學版，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].電腦開發與應用，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開發研究[J].電腦知識與技術，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在網頁制作中的應用[J].信息技術，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開發中的應用[J].計算機應用與軟件，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數據在項目管理系統中的應用[J].云南大學學報：自然科學版，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系統框架設計分析 [J].陜西電力，2011（2）：38-41.

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