邹 蕊，葛中泽

（鄂州职业大学 计算机系，湖北 鄂州 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.