在ASP.NET AJAX中返回DataTable到客戶端Javascript

鄒 蕊，葛中澤

（鄂州職業大學 計算機系，湖北 鄂州 436000）

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

1 AJAX技術介紹

在傳統的Web開發過程中，瀏覽者瀏覽一個Web頁面，并進行相應的頁面填寫時，就需要使用表單向服務器提交信息。當用戶提交表單時，就不可避免的會向服務器發送一個請求，服務器接受該請求后并執行相應的操作后將生成一個頁面返回給瀏覽者。然而，在服務器處理表單并返回新的頁面的同時，瀏覽者第一次瀏覽時的頁面（這里可以當作是舊的頁面）和服務器處理表單后返回的頁面在形式上基本相同，當大量的用戶進行表單提交操作時，無疑是增加了網絡的帶寬，因為處理前和處理后的頁面基本相同。

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

為了解決這一問題，通過在用戶瀏覽器和服務器之間設計一個中間層——AJAX層，就能夠解決這一問題，AJAX改變了傳統的Web中客戶端和服務器的“請求——等待——請求——等待”的模式，通過使用AJAX應用向服務器發送和接收需要的數據，從而不會產生頁面的刷新。

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

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

相對于傳統的Web開發，AJAX提供了更好的用戶體驗，AJAX也提供了較好的Web應用交互的解決方案，相對于傳統的Web開發而言，AJAX技術也減少了網絡帶寬。AJAX的核心是JavaScript對象XmlHttpRequest。

2 ASP.NET AJAX客戶端異步刷新技術

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

1）XHTML：基于XHTML1.0規范的XHTML技術。

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

3）DOM：HTML DOM，XML DOM等 DON技術。

4）JavaScript：JavaScript編程技術。

5）XML：XML DOM、XSLT、XPath 等 XML 編程技術。

上面的這些技術并不是最新的技術，這些技術已經在現在的開發當中被普遍使用，包括XHTML、CSS和DOM。開發人員能夠使用JavaScript進行Web應用中Web編程和客戶端狀態維護，而通過使用XML技術能夠進行數據保存和交換。

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

圖1 AJAX的技術架構Fig.1 AJAX’s technical architecture

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

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

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

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

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

3.1 將DataTable轉化為泛型集合對象

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

3.2 在客戶端顯示DataTable

盡管AJAX是種客戶端技術，但實際上的開發過程，它經常要調用一個服務器端[6]的過程。通常，數據是存放在一個關系型數據庫中，為了讓AJAX更有用處，處理服務器端數據需要一種簡單可靠的方法。在服務器端將Datatable轉化為List>>數據后，接下來就是要在客戶端 JavaScript中接受List數據并且解析輸出。

客戶端異步調用服務器端web service的方法為：

4 結 論

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

[1]Esposito D.Microsoft ASP.NET AJAX導學[M].北京：機械工業出版社，2008.

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

[3]王德永.ASP.NET軟件開發項目實踐[M].北京：清華大學出版社，2011.

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

[5]關東升.JSP網絡程序設計[M].北京：北京郵電大學出版社，2011.

[6]王健南.ASP.NET AJAX中的Web Services調用[J].農業網絡信息，2007（12）:114-180.WANG Jian-nan.Web Services transmission in ASP.NET.AJAX[J].Agriculture Network Information，2007（12）:114-180.