鄒 蕊，葛中澤

（鄂州職業(yè)大學(xué) 計(jì)算機(jī)系，湖北 鄂州 436000）

ASP.NET AJAX[1]是一個(gè)完整的開發(fā)框架，一直以來為我們所使用，但是在使用ASP.NET AJAX技術(shù)的時(shí)候不能夠使DataTable直接返回到客戶端Javascript。為了解決這個(gè)問題，本文采用了將DataTable轉(zhuǎn)化為泛型集合對象的方法。

1 AJAX技術(shù)介紹

在傳統(tǒng)的Web開發(fā)過程中，瀏覽者瀏覽一個(gè)Web頁面，并進(jìn)行相應(yīng)的頁面填寫時(shí)，就需要使用表單向服務(wù)器提交信息。當(dāng)用戶提交表單時(shí)，就不可避免的會向服務(wù)器發(fā)送一個(gè)請求，服務(wù)器接受該請求后并執(zhí)行相應(yīng)的操作后將生成一個(gè)頁面返回給瀏覽者。然而，在服務(wù)器處理表單并返回新的頁面的同時(shí)，瀏覽者第一次瀏覽時(shí)的頁面（這里可以當(dāng)作是舊的頁面）和服務(wù)器處理表單后返回的頁面在形式上基本相同，當(dāng)大量的用戶進(jìn)行表單提交操作時(shí)，無疑是增加了網(wǎng)絡(luò)的帶寬，因?yàn)樘幚砬昂吞幚砗蟮捻撁婊鞠嗤?/p>

在C/S應(yīng)用程序開發(fā)中，C/S應(yīng)用程序往往安裝在本地，這樣響應(yīng)用戶事件的時(shí)間非常的短，而且C/S應(yīng)用程序可以算的上是有狀態(tài)的應(yīng)用程序，能夠及時(shí)捕捉和相應(yīng)用戶的操作。而在Web端，由于每次的交互都需要向服務(wù)器發(fā)送請求，服務(wù)器接受請求和返回請求的過程就依賴于服務(wù)器的響應(yīng)時(shí)間，所以給用戶造成感覺要比在本地慢的多。

為了解決這一問題，通過在用戶瀏覽器和服務(wù)器之間設(shè)計(jì)一個(gè)中間層——AJAX層，就能夠解決這一問題，AJAX改變了傳統(tǒng)的Web中客戶端和服務(wù)器的“請求——等待——請求——等待”的模式，通過使用AJAX應(yīng)用向服務(wù)器發(fā)送和接收需要的數(shù)據(jù)，從而不會產(chǎn)生頁面的刷新。

AJAX應(yīng)用通過使用SOAP或其他一些基于XML的Web Service接口，并在客戶端采用JavaScript處理來自服務(wù)器的響應(yīng)，減少了服務(wù)器和瀏覽器之間的“請求——回發(fā)”操作，從而減少了帶寬。當(dāng)服務(wù)器和客戶端之間的信息通信減少之后，瀏覽者就會感覺到Web應(yīng)用中的操作就更快了。

AJAX將一些應(yīng)用的處理交付給客戶端，讓服務(wù)器端原本應(yīng)該運(yùn)行的操作和需要處理的事務(wù)分布給客戶端，這樣服務(wù)器端的處理時(shí)間也減少了。

相對于傳統(tǒng)的Web開發(fā)，AJAX提供了更好的用戶體驗(yàn)，AJAX也提供了較好的Web應(yīng)用交互的解決方案，相對于傳統(tǒng)的Web開發(fā)而言，AJAX技術(shù)也減少了網(wǎng)絡(luò)帶寬。AJAX的核心是JavaScript對象XmlHttpRequest。

2 ASP.NET AJAX客戶端異步刷新技術(shù)

AJAX（是Asynchronous JavaScript and XML的縮寫，中文含意是 “異步JavaScript和XML”。AJAX技術(shù)看似非常的復(fù)雜，其實(shí)AJAX并不是新技術(shù)，AJAX只是一些老技術(shù)的混合體，AJAX通過將這些技術(shù)進(jìn)行一定的修改、整合和發(fā)揚(yáng)，就形成了AJAX技術(shù)。這些老技術(shù)包括有：

1）XHTML：基于XHTML1.0規(guī)范的XHTML技術(shù)。

2）CSS：基于CSS2.0的CSS布局的CSS編程技術(shù)。

3）DOM：HTML DOM，XML DOM等 DON技術(shù)。

4）JavaScript：JavaScript編程技術(shù)。

5）XML：XML DOM、XSLT、XPath 等 XML 編程技術(shù)。

上面的這些技術(shù)并不是最新的技術(shù)，這些技術(shù)已經(jīng)在現(xiàn)在的開發(fā)當(dāng)中被普遍使用，包括XHTML、CSS和DOM。開發(fā)人員能夠使用JavaScript進(jìn)行Web應(yīng)用中Web編程和客戶端狀態(tài)維護(hù)，而通過使用XML技術(shù)能夠進(jìn)行數(shù)據(jù)保存和交換。

除了上面的一些老技術(shù)，AJAX還包含另一個(gè)技術(shù)，這個(gè)技術(shù)就是XMLHttpRequest。在AJAX中，最重要的就是XMLHttpRequest對象，XMLHttpRequest對象是 JavaScript對象，正式XMLHttpRequest對象實(shí)現(xiàn)了AJAX可以在服務(wù)器和瀏覽器之間通過JavaScript創(chuàng)建一個(gè)中間層，從而實(shí)現(xiàn)了異步通信。AJAX使用現(xiàn)存的技術(shù)為客戶端[2]提供了和Web服務(wù)器之間進(jìn)行異步通信的方式，從而讓應(yīng)用程序可以擺脫傳統(tǒng)請求響應(yīng)模型的開發(fā)方式。AJAX的技術(shù)架構(gòu)，實(shí)現(xiàn)機(jī)制如圖1所示。

圖1 AJAX的技術(shù)架構(gòu)Fig.1 AJAX’s technical architecture

DataTable是一個(gè)臨時(shí)保存數(shù)據(jù)的網(wǎng)格虛擬表。它可以被應(yīng)用在ASP上。它無須代碼就可以簡單的綁定數(shù)據(jù)庫。在應(yīng)用程序開發(fā)時(shí)，大量使用到DataTable，如查詢數(shù)據(jù)庫返回表格。但將表格返回到客戶端javascript時(shí)，出現(xiàn)“序列化類型為‘System.Reflection.Module’的對象時(shí)檢測到循環(huán)引用”的錯(cuò)誤。原因是DataTable算是一個(gè)極其復(fù)雜的對象類型了，這個(gè)類型在進(jìn)行JSON序列化時(shí)，便會產(chǎn)生一個(gè)循環(huán)引用，在序列化其中的 System.Reflection.Module對象時(shí)會發(fā)生循環(huán)引用，從而會導(dǎo)致 JSON序列化失敗，導(dǎo)致整個(gè)的異步調(diào)用WebService失敗[3]。那么該如何解決這個(gè)問題，使得能夠從服務(wù)端順利的返回DataTable中的數(shù)據(jù)呢？以下將作以介紹。

3 返回DataTable到客戶端Javascript的方法

在服務(wù)端與客戶端進(jìn)行傳遞數(shù)據(jù)的格式是 JSON（JavaScript Object Notation），這個(gè)格式簡單輕便[4]。最常用的數(shù)據(jù)傳遞和轉(zhuǎn)換的類型是一般的字符串類型，List集合類型以及字典Dictionary類；其中較為特殊的是Dictionary，其中的第一個(gè)類型必須是 string，否則在客戶端將無法識別。而DataTable或者DataSet這些復(fù)雜數(shù)據(jù)類型已經(jīng)遠(yuǎn)遠(yuǎn)超出了上面的3種類型的范圍，所以無法進(jìn)行正常的JSON序列化，只有把DataTable這些復(fù)雜數(shù)據(jù)類型先轉(zhuǎn)換為上面的3種數(shù)據(jù)類型再傳遞，才能正常的把DataTable中的數(shù)據(jù)正確傳遞給 JavaScript返回DataTable到客戶端Javascript的流程如圖2所示。

圖2 返回DataTable到客戶端Javascript的流程Fig.2 The process of returns DataTable to the client

其中第2步和第3步由服務(wù)器與客戶端異步通訊[5]層自動完成，不需要我們考慮。

3.1 將DataTable轉(zhuǎn)化為泛型集合對象

泛型是主要用于解決一系列類似的問題。這種機(jī)制允許將類名作為參數(shù)傳遞給泛型類型，并生成相應(yīng)的對象。將泛型（包括類、接口、方法、委托等）看作模板可能更好理解，模板中的變體部分將被作為參數(shù)傳進(jìn)來的類名稱所代替，從而得到一個(gè)新的類型定義。下面添加一個(gè)類來實(shí)現(xiàn)將DataTable轉(zhuǎn)換為 List或者 Dictionary來返回，類的代碼如下

3.2 在客戶端顯示DataTable

盡管AJAX是種客戶端技術(shù)，但實(shí)際上的開發(fā)過程，它經(jīng)常要調(diào)用一個(gè)服務(wù)器端[6]的過程。通常，數(shù)據(jù)是存放在一個(gè)關(guān)系型數(shù)據(jù)庫中，為了讓AJAX更有用處，處理服務(wù)器端數(shù)據(jù)需要一種簡單可靠的方法。在服務(wù)器端將Datatable轉(zhuǎn)化為List>>數(shù)據(jù)后，接下來就是要在客戶端 JavaScript中接受List數(shù)據(jù)并且解析輸出。

客戶端異步調(diào)用服務(wù)器端web service的方法為：

4 結(jié) 論

通過前面的敘述，我們可以在客戶端使用異步刷新的方法顯示服務(wù)器端得表格。我們還可以通過JavaScript修改Table表的行背景顏色，使得Table表的外觀更加美觀；也可以通過JavaScript增加、刪除Table表的行，賦予Table表強(qiáng)大的管理功能。有興趣的讀者可以參閱有關(guān)資料。

[1]Esposito D.Microsoft ASP.NET AJAX導(dǎo)學(xué)[M].北京：機(jī)械工業(yè)出版社，2008.

[2]章立民.ASP.NET 3.5 AJAX客戶端編程精選166例[M].北京：科學(xué)出版社，2009.

[3]王德永.ASP.NET軟件開發(fā)項(xiàng)目實(shí)踐[M].北京：清華大學(xué)出版社，2011.

[4]張銀鶴.Ajax完全學(xué)習(xí)手冊[M].北京：清華大學(xué)出版社，2009.

[5]關(guān)東升.JSP網(wǎng)絡(luò)程序設(shè)計(jì)[M].北京：北京郵電大學(xué)出版社，2011.

[6]王健南.ASP.NET AJAX中的Web Services調(diào)用[J].農(nóng)業(yè)網(wǎng)絡(luò)信息，2007（12）:114-180.WANG Jian-nan.Web Services transmission in ASP.NET.AJAX[J].Agriculture Network Information，2007（12）:114-180.