第16章.ASP.NET 3.5和AJAX

第16章ASP.NET3.5和AJAX现今，在Web开发领域最流行的就属AJAX，AJAX能够提升用户体验，更加方便的与Web应用程序进行交互。在传统的Web开发中，对页面进行操作往往需要进行回发，从而导致页面刷新，而使用AJAX就无需产生回发从而实现无刷新效果。16.1AJAX基础在C/S应用程序的开发过程中，很容易做到无“刷新”样式控制，因为C/S应用程序往往是安装在本地的，所以C/S应用程序能够维持客户端状态，对于状态的改变能够及时捕捉。相比之下，Web应用属于一种无状态的应用程序，在Web应用程序操作过程中，需要通过POST等方法进行页面参数传递，这样就不可避免的产生页面的刷新。16.1.1什么是AJAX在传统的Web开发过程中，浏览者浏览一个Web页面，并进行相应的页面填写时，就需要使用表单向服务器提交信息。当用户提交表单时，就不可避免的会向服务器发送一个请求，服务器接受该请求后并执行相应的操作后将生成一个页面返回给浏览者。然而，在服务器处理表单并返回新的页面的同时，浏览者第一次浏览时的页面（这里可以当作是旧的页面）和服务器处理表单后返回的页面在形式上基本相同，当大量的用户进行表单提交操作时，无疑是增加了网络的带宽，因为处理前和处理后的页面基本相同。在C/S应用程序开发中，C/S应用程序往往安装在本地，这样响应用户事件的时间非常的短，而且C/S应用程序可以算的上是有状态的应用程序，能够及时捕捉和相应用户的操作。而在Web端，由于每次的交互都需要向服务器发送请求，服务器接受请求和返回请求的过程就依赖于服务器的响应时间，所以给用户造成感觉要比在本地慢的多。为了解决这一问题，通过在用户浏览器和服务器之间设计一个中间层——即AJAX层能就能够解决这一问题，AJAX改变了传统的Web中客户端和服务器的“请求——等待——请求——等待”的模式，通过使用AJAX应用向服务器发送和接收需要的数据，从而不会产生页面的刷新。AJAX应用通过使用SOAP或其他一些基于XML的webservice接口，并在客户端采用JavaScript处理来自服务器的响应，从而减少了服务器和浏览器之间的“请求——回发”操作，从而减少了带宽。当服务器和客户端之间的信息通信减少之后，浏览者就会感觉到Web应用中的操作就更快了。AJAX将一些应用的处理交付给客户端，让服务器端原本应该运行的操作和需要处理的事务分布给客户端，这样服务器端的处理时间也减少了。相对于传统的Web开发，AJAX提供了更好的用户体验，AJAX也提供了较好的Web应用交互的解决方案，相对于传统的Web开发而言，AJAX技术也减少了网络带宽。Ajax的核心是JavaScript对象XmlHttpRequest。该对象在InternetExplorer5中就被引入了，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不会影响客户端的信息通信。412传统的Web应用和AJAX应用模型如图16-1所示。图16-1传统Web应用和AJAXWeb应用模型AJAXWeb应用模型的优点在于，无需进行整个页面的回发就能够进行局部的更新，这样能够使Web服务器能够尽快的响应用户的要求。而AJAXWeb应用无需安装任何插件，也无需在Web服务器中安装应用程序，但是AJAX需要用户允许JavaScript在浏览器上执行，如图用户不允许JavaScript在浏览器上执行，则AJAX可能无法运行。但是随着AJAX的发展和客户端浏览器的发展，先进的所有的浏览器都能够支持AJAX，包括最新的IE8、Firefox4以及Opera等。AJAX包含诸多优点，同样也包含缺点。AJAX无法维持刚刚的“历史”状态，当用户在一个页面进行操作后，AJAX将破坏浏览器的功能中的“后退”功能，当用户执行了AJAX操作之后，当单击浏览器的后退按钮时，则不会返回到AJAX操作前的页面形式，因为浏览器仅仅能够记录静态页面的状态，而使用AJAX进行页面操作后，并不能改变本身页面的状态，所以单击后退按钮并不能返回操作前的页面状态。在使用AJAX进行Web应用开发的过程中，另一个缺点就是容易造成用户体验变差。虽然AJAX能够极大的方便用户体验，但是当服务器需求变大时，当用户进行一个操作而AJAX无法及时相应时，可能会造成相反的用户体验。例如用户阅读一个新闻时，当用户进行评论时，页面并没有刷新，但是评论这个操作已经在客户端和浏览器之间发生了，用户可能很难理解为什么页面没有显式也没有刷新，这样容易让用户变得急躁和不安，使得用户可能产生非法操作从而降低用户体验。为了解决这个问题，可以在页面明显的位置提示用户已经操作或提示请等待等操作，让用户知道页面正在运行。相比于传统的Web应用，AJAX的另一个缺点就是对移动设备的支持不够好。在当今IPhone和GPhone等智能移动设备逐渐普及的同时，AJAX并不能很好的支持这些设备，这也需要等待AJAX技413术的进一步发展。16.1.2ASP.NETAJAX入门AJAX技术看似非常的复杂，其实AJAX并不是新技术，AJAX只是一些老技术的混合体，AJAX通过将这些技术进行一定的修改、整合和发扬，就形成了AJAX技术。这些老技术包括有：XHTML：基于XHTML1.0规范的XHTML技术。CSS：基于CSS2.0的CSS布局的CSS编程技术。DOM：HTMLDOM，XMLDOM等DON技术。JavaScript：JavaScript编程技术。XML：XMLDOM、XSLT、XPath等XML编程技术。上面的这些技术并不是最新的技术，这些技术已经在现在的开发当中被普遍使用，包括XHTML、CSS和DOM，开发人员能够使用JavaScript进行Web应用中Web编程和客户端状态维护，而通过使用XML技术能够进行数据保存和交换。除了上面的一些老技术，AJAX还包含另一个技术，这个技术就是XMLHttpRequest。在AJAX中，最重要的就是XMLHttpRequest对象，XMLHttpRequest对象是JavaScript对象，正式XMLHttpRequest对象实现了AJAX可以在服务器和浏览器之间通过JavaScript创建一个中间层，从而实现了异步通信。如图16-2所示。图16-2XMLHttpRequest对象实现过程AJAX通过使用XMLHttpRequest对象实现异步通信，使用AJAX技术后，例如当用户填写一个表单，数据并不是直接从客户端发送到服务器，而是通过客户端发送到一个中间层，这个中间层可以被称为AJAX引擎。开发人员无需知道AJAX引擎是如何将数据发送到服务器的。当AJAX引擎将数据发送到服务器时，服务器同样也不会直接将数据返回给浏览器，而是通过JavaScript中间层将数据返回给客户端浏览器。XMLHttpRequest对象使用JavaScript代码可以自行与服务器进行交互。简而言之，AJAX技术是通过使用XHTML、CSS、DOM等实现的，具体实现如下所示。使用XHTML+CSS进行页面表示表示。使用DOM进行动态显示和交互。使用XML和XSLT进行数据交换。414使用XMLHttpRequest进行异步数据查询、检索。使用JavaScript进行页面绑定。16.1.3ASP.NET2.0AJAX在ASP.NET3.5之前，ASP.NET并不是原生的支持AJAX应用，所以在ASP.NET3.5之前使用ASP.NETAJAX并不是一件容易的事情。同时由于国内服务器和主机的限制，导致很多应用无法直接基于ASP.NET3.5而进行创建和开发。ASP.NET2.0是现在国内最为成熟的.NET技术平台，在ASP.NET2.0中同样可以使用AJAX技术实现无页面刷新效果。在这之前，首先需要下载一个ASP.NET2.0AJAX安装程序，通过此安装程序能够在应用程序中安装AJAX环境，包括AJAX技术以及AJAX控件。技巧：ASP.NET2.0AJAX安装程序可以通过访问ASP.NETAJAX中文站点进行下载，（）下载ASP.NET2.0AJAX安装程序后，双击安装程序即可安装，如图16-3所示。安装完成后会在C:\ProgramFiles\MicrosoftASP.NET\ASP.NET2.0AJAXExtensions目录下生成文件System.Web.Extensions.dll、System.Web.Extensions.Design.dll以及AJAXExtensionsToolbox.dll等文件。这些文件都是在ASP.NET2.0中使用AJAX的必要文件，开发人员能够将这些文件复制到Web应用的根目录下再添加引用即可，如图16-4所示。图16-3安装ASP.NET2.0AJAX图16-4添加ASP.NET2.0AJAX引用将这三个DLL文件添加引用到应用程序后，Web.config文件将会更改，示例代码如下所示。pagesvalidateRequest=falsebuffer=truecontrolsaddtagPrefix=aspnamespace=System.Web.UIassembly=System.Web.Extensions,Version=1.0.61025.0,Culture=neutral,PublicKeyToken=31bf3856ad364e35//controls/pages添加引用后，可以通过添加工具栏将AJAX控件安装到默认工具栏中。右击工具栏空白区域，在下拉菜单中单击【选择项】选项，则会弹出【选择工具箱项】窗口，如图16-5所示。单击【浏览】选项，可以选择相应的DLL文件以添加工具箱，如图16-6所示。415图16-5选择工具箱图16-6选择DLL文件选择完成后，单击【确定】按钮就会发现在工具栏中已经包含了AJAX控件了。引用和工具栏添加完毕后，则需要修改Web.config文件从而实现ASP.NET2.0对AJAX的支持。注意：Web.config文件已经保存在ASP.NET2.0AJAX应用程序下载安装包中，读者从上述连接或在官方网站下载ASP.NET2.0AJAX安装包后，其中就包含了Web.config文件。16.1.4ASP.NET3.5AJAX在ASP.NET2.0中，AJAX需要下载和安装，开发人员还需要将相应的DLL文件分类存放并配置Web.config文件才能够实现AJAX功能。而在ASP.NET3.5中，AJAX已经成为.NET框架的原生功能。创建ASP.NET3.5Web应用程序就能够直接使用AJAX功能，如图16-7所示。图16-7ASP.NET3.5AJAX在ASP.NET3.5中，可以直接拖动AJAX控件进行AJAX开发。AJAX能够同普通控件一同使用，从而实现ASP.NET3.5AJAX中页面无刷新功能。在ASP.NET3.5中，Web.config文件已经被更改，并且声明了AJAX功能，示例代码如下所示。pagescontrolsaddtagPrefix=aspnamespace=System.Web.UIassembly=System.Web.Extensions,Version=3.5.0.0,Culture=neutral,PublicKeyToken=31BF3856AD364E35/addtagPrefix=aspnamespace=System.Web.UI.WebControlsassembly=System.Web.Extensions,416Version=3.5.0.0,Culture=neutral,PublicKeyToken=31BF3856AD364E35//controls/pages在ASP.NET3.5中，如果需要在In