《ASP NET 3.5从基础到项目实战》课件第10章ASP.NET AJAX

第10章ASP.NETAJAXAJAX并不是一项新技术，它的本质是结合JavaScript语言、css样式以及异步传输等编程技术来创建动态网站。AJAX与其说是一种技术，倒不如说是一种Web开发理念，它的出现，使无刷新技术得到广泛应用和推广。目前使用AJAX理念制作的网站中，比较有代表性的主要有Google主页、GoogleSuggest、GoogleMaps、Gmail等，它们从视觉和可用性上大大满足了用户的需要。本章将结合ASP.NET3.5技术与AJAX理念来学习AJAX在ASP.NET平台中的使用。章节内容10.1AJAX基本思想10.2ASP.NET3.5对AJAX的支持与开发10.3异步调用WebService和页面中的类方法10.1AJAX基本思想AJAX改变了传统的Web中客户端和服务器的“请求→等待→请求→等待”模式。在AJAX理念中，它将页面划分为多个部分，当用户对其中的一部分进行数据操作时，Web页面的这一部分会立即向服务器发送请求，而用户可以对Web页面中的其他数据进行操作，无需等待服务器发送回的处理结果，从而减少了用户的等待时间和服务器与客户端之间的“请求→回发”时间。10.1.1应用场景AJAX最主要的特点是异步通信、按需求读取数据和动态更新Web页面，其功能十分强大，但是AJAX并不适用于所有情况，它所适用的环境，常常是客户端与服务器端频繁的交互数据、需要动态更新Web页面等情况。对于客户端与服务器端之间极少进行数据交互或客户端Web页面并非动态实时更新的情况，应该尽量避免使用AJAX。这是为什么呢？因为使用AJAX时，在提供了良好的用户体验的同时，也增加了服务器端的压力，服务器端需要花费大量的资源来进行数据处理，因此AJAX只有在适当的地方使用，才能发挥出它的优势。10.1.1应用场景（1）表单数据的交互。在传统的Web开发中，数据通过表单提交。在文本框输入内容后单击提交按钮，客户端页面中的数据会发送到服务器端。等服务器端处理完数据之后，再将处理的结果发送到客户端，这个时候页面会刷新，用户需要花费大量的时间来等待处理的结果。使用AJAX之后，单击提交按钮，立刻进行异步处理，并在页面上快速显示了更新后的结果，这时AJAX只会控制做数据提交的那部分刷新，而整个Web页面不会刷新，在服务器处理数据时，用户可以浏览Web页面中的其他信息，而不再需要面对一个空白页面等待。10.1.1应用场景（2）快速的用户与用户之间的交流响应。许多人通过Web进行交流时，经常需要不停的刷新页面，从而将用户最新发表的看法呈现出来。特别是在使用Web聊天室时，如果使用传统的开发技术来实现，用户需要不停地刷新页面。使用AJAX之后，用户就可以省去这些操作，AJAX会将最新的发言动态地刷新出来，使网络中的用户可以及时看到。用户可以专心地来进行指定话题的思考与讨论。10.1.1应用场景（3）对数据进行过滤和操纵相关数据的场景。对数据使用过滤器，按照时间排序，或者按照时间和名称排序，开关过滤器等。任何要求具备很高交互性数据操纵的场合都应该用JavaScript，而不是用一系列的服务器请求来完成。在每次数据更新后，再对其进行查找和处理需要耗费较多的时间，而AJAX可以加速这个过程。10.1.1应用场景（4）数据验证。数据验证是Web开发中经常会遇到的问题。数据验证通常有两种方式：一种是直接填写，然后提交表单，这种方式需要将整个页面提交到服务器端进行验证，整个过程不仅时间长而且造成了服务器不必要的负担；第二种方式是改进了的验证过程，用户可以通过单击相应的验证按钮，打开新窗口查看验证结果，但是这样需要新开一个浏览器窗口，还需要专门编写验证的页面，比较耗费系统资源。使用AJAX技术，可以由XMLHttpRequest对象发出验证请求，根据返回的HTTP响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速而又不会加重服务器的负担。10.1.2开发模式通过ASP.NET使用AJAX时，通常会有以下几种开发模式。（1）XMLHttp+WebForm模式XMLHttp+WebForm模式是ASP.NET下最原始的开发模式。这种模式直接利用JavaScript操作XMLHttp对象，发送异步请求到服务器端的Web窗体。服务器端页面接到请求，进行数据处理，并将处理结果返回给XMLHttp对象，最后用JavaScript言语代码将返回的结果显示出来。10.1.2开发模式（2）XMLHttp+HttpHandler模式XMLHttp+HttpHandler模式是对XMLHttp+WebForm模式的改进，其客户端代码没有任何变化，而在服务器端使用HttpHandler来接收和处理异步请求信息，对于数据的处理使用HttpHandler的ProcessRequest方法来处理。10.1.2开发模式（3）ASP.NET回调模式回调模式使用ICallbackEventHandler接口，通过实现GetCallbackResult()方法来实现回调，最后通过调用ClientScript.GetCallbackEventReference()方法实现AJAX效果，这样可以避免开发者直接操纵XMLHTTP对象，在一定程度上简化了AJAX的开发。10.1.2开发模式（4）AJAX框架模式AJAX框架模式使用ASP.NET内容提供的框架集合来开发。这种框架比较多，如客户端框架Prototype，服务器端框架ASP.NETAJAX、RadAJAX、AJAX.NET、ANTHEM.NET、MAGICAJAX.NET等。采用AJAX框架开发的效率比较高，代码稳定性好，但同时也容易受到框架的束缚。在这些框架中最常用的当属ASP.NETAJAX，其中包括客户端MicrosoftAJAXlibrary，服务器端的ASP.NET2.0AJAXExtensions，以及ASP.NETAJAXControlToolkit等，是一套完整的AJAX解决方案。10.2.1ASP.NET3.5AJAX在ASP.NET2.0以及以前的版本中，要想使用AJAX组件，需要下载和安装。另外开发人员还需要将相应的DLL文件分类存放，并配置Web.config文件才能够实现AJAX功能。但是在ASP.NET3.5中微软对此做了修正，AJAX组件已经封装在.NET框架中。在ASP.NET3.5创建的网站项目中，可以直接使用内部封装的AJAX控件。这些AJAX控件读者可以在VS2008“工具箱”中找到。10.2.1ASP.NET3.5AJAXASP.NET3.5中的Web.config支持AJAX技术的代码如下。<pages><controls><addtagPrefix="asp"namespace="System.Web.UI"assembly="System.Web.Extensions,Version=,Culture=neutral,ublicKeyToken=31BF3856AD364E35"/><addtagPrefix="asp"namespace="System.Web.UI.WebControls"assembly="System.Web.Extensions,Version=,Culture=neutral,PublicKeyToken=31BF3856AD364E35"/></controls></pages>10.2.1ASP.NET3.5AJAXASP.NET3.5AJAX扩展组件。组件描述Control基本UI组件，包括TextBox、Button等Behavior行为组件，用于给组件添加行为Action动作响应组件，响应特定的动作Animation动画组件，用来给组件添加动画效果Data数据组件，包括DataView等与数据显示有关的组件Validator验证组件，用于用户输入数据的验证Drag拖放组件，用于创建可拖放式的AJAX应用Bind绑定组件，用于实现绑定技术Counter客户端计数器10.2.2ASP.NET中的AJAX控件在ASP.NET3.5中，.NET框架封装了AJAX功能，这使开发人员可以更加方便快捷地使用AJAX来创建无刷新的网站项目。ASP.NET3.5中提供的AJAX控件主要包括ScriptManger、UpdatePanel、ScriptMangerProxy、Timer、UpdateProgress。10.2.2ASP.NET中的AJAX控件（1）脚本管理控件（ScriptManger）脚本管理控件主要用来管理页面中的脚本语言，在ASP.NETAJAX中具有非常重要的作用。ScriptManger控件只能在页面中使用一次，也就是说每个页面中只能放置一个ScriptManger控件。ScriptManger控件用来对页面进行全局管理，处理页面上的局部更新，同时生成相关的代理脚本语言代码，从而实现页面的异步通信，通过JavaScript语言对WebService进行访问。10.2.2ASP.NET中的AJAX控件（2）更新区域控件（UpdatePanel）更新区域控件主要用来控制页面中局部刷新的区域，页面中所有需要频繁与服务器端交互的操作都可以放在此控件内部。使用UpdatePanel控件来限定页面刷新区域的好处是，凡是在UpdatePanel控件内部的操作，不会引起页面的整体刷新，它只会刷新UpdatePanel控件内部的内容。10.2.2ASP.NET中的AJAX控件（3）脚本管理控件（ScriptMangerProxy）在使用ASP.NET开发应用程序时，会经常使用母版页来对网站的风格进行统一布局，但是ScriptManger控件只能在页面中使用一次，当在母版页中使用了ScriptManger控件之后，在其他内容页面中就无法使用ScriptManger控件了，这样就妨碍了在内容页中使用无刷新技术。10.2.2ASP.NET中的AJAX控件（4）时间控件（Timer）时间控件是用来设置页面定时刷新的控件，其用处比较广泛，但是在使用Timer控件来刷新页面时，总是会引起整个页面的刷新。在ASP.NET3.5AJAX中结合AJAX无刷新技术，解决了这个问题，开发人员可以在页面中随意使用Timer控件，而不用担心页面会整体刷新。10.2.2ASP.NET中的AJAX控件（5）更新进度控件（UpdateProgress）更新进度控件的主要功能是在前台页面等待服务器回传数据的过程中呈现一个动画。有些时候，由于网络的问题，页面反应比较慢，从而使服务器回传的数据呈现在用户面前也比较慢，这个时候，用户需要花费比较长的时间来面对枯燥的页面，而UpdateProgress控件的出现使用户的等待不再枯燥，而且还能及时地了解到数据回传的进度。10.3ASP.NETAJAX对JavaScript的扩展JavaScript语言对于Web前台页面具有重要的作用，其具有非常灵活的特性，而且支持面向对象编程，内部封装的类库可以支持一般性的Web网站开发。但是它也有不足之处，毕竟JavaScript语言不是纯面向对象编程的语言，在对面向对象方面还有一些不足，而且内部封装的类库也有限，无法满足当前网站开发的需要。而在ASP.NET平台，使用Atlas技术对JavaScript语言进行了一些扩展，从而弥补JavaScript语言自身的不足，也满足了当前网站开发的需要。在ASP.NETAJAX中对JavaScript语言的扩展主要包括：String对象的扩展、Array对象的扩展和Number对象的扩展。10.3ASP.NETAJAX对JavaScript的扩展成员描述StringString.ltrim()移除原String开头部分所有的空格，并返回一个新String对象StringString.rtrim()移除原String结尾部分所有的空格，并返回一个新String对象StringString.trim()移除原String开头和结尾部分所有的空格，并返回一个新String对象BooleanString.endsWidth(strEnd)该String是否以传入的String结束BooleanString.startsWith(strStart)该String是否以传入的String开始StringString.format(args1,args2,.)类似于C#中的String.Format()，被操作的String中的{n}将被代替为相应的第n个参数，并返回一个新String对象StringString.removeSpaces()移除原String中的所有空格，并返回一个新String对象StringString.removeExtraSpaces()将原String中连续的空格置换成单一的空格（包括回车），并返回一个新String对象StringString.removeSpaceDelimitedString(str)将原String中的指定单词（被空格分开的文字片断）移除，并返回一个新String对象。这个方法可以用在删除包含多个class名称DOM元素的某个class名称时10.4异步调用WebService和页面中的类方法1．异步调用WebService在ASP.NETAJAX中WebService具有重要的作用，是ASP.NETAJAX服务中最受推崇的实现方式。WebService的诞生是纯粹为了业务逻辑而设计的。在WebService服务中，用户界面比较简单，没有像ASP.NET服务器控件那样提供过多的样式特征，它把精力都放在了程序逻辑实现上了，这与ASP.NETAJAX客户端编程模型所倡导的“将表现层和业务逻