Web开发实用技术Aja.ppt

《Web开发实用技术Aja.ppt》由会员分享，可在线阅读，更多相关《Web开发实用技术Aja.ppt（42页珍藏版）》请在三一办公上搜索。

1、第7章 Ajax程序设计技术,学习要点：,1Ajax的基本概念及原理。2常用Ajax框架及其使用方法。3掌握如何编写一个Ajax应用程序。,Ajax程序设计技术,为了便于读者理解Ajax技术的基本原理，并学会应用Ajax技术，本章将介绍如何利用XMLHttpRequest对象进行Ajax开发，随后针对ASP.NET平台流行的Ajax框架进行详细探讨，并通过具体案例讲解各个框架的配置和使用方法。,第7章 Ajax程序设计技术,7.1 Ajax概述7.2 用XMLHttpRequest实现Ajax技术7.3 Ajax应用框架7.4 Ajax应用实例,7.3.1 Ajax框架分类7.3.2.NET平

2、台下的Ajax框架,7.3 Ajax应用框架,7.1 Ajax概述,Ajax通过异步数据交换和处理，可以显著提高Web应用程序运行效率，给Web开发者带来了新的希望。Ajax并不是一门新的语言或技术，它实际上是几项技术按一定的方式组合在一起共同协作中发挥各自的作用。具体来说，Ajax基于下列核心技术：XHTML：对应W3C的XHTML规范，目前是XHTML1.0。CSS：对应W3C的CSS规范，目前是CSS2.0。DOM：这里的DOM主要是指HTML DOM。JavaScript：对应于ECMA的ECMAScript规范。XML：对应W3C的XML DOM、XSLT、XPath等规范。XMLH

3、ttpRequest：对应WHATWG（Web Hypertext Application Technology Working Group）的 Web Applications1.0规范的一部分(http:/whatwg.org/specs/web-apps/current-work/)。,Ajax的工作原理相当于在用户和服务器之间加了一个中间层Ajax引擎，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像一些数据验证和简单的数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。其应用程序模型如图7-1所示。,Ajax

4、的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。XmlHttpRequest使开发者可以使用JavaScript向服务器提出异步请求并处理响应，而不阻塞用户。目前实现Ajax技术的方法主要有（1）直接基于XMLHttpRequest对象；（2）利用各种Ajax框架，简化Ajax开发。,7.2 用XMLHttpRequest实现Ajax技术,Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面)，这一特点主要得益于XMLHTTP组件中的XMLHttpRequest对

5、象。最早应用XMLHTTP的是微软IE（IE5以上）允许开发人员在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能，开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。在这种情况下，XMLHttpRequest对象相当于起到了图7-1中Ajax引擎的作用，利用该对象减少了无状态连接的痛苦，还可以排除下载冗余HTML从而提高服务器的响应速度。,XMLHttpRequest是Ajax开发的基础，体现了异步调用的核心。XMLHttpRequest对象的方法和属性如表7-1和表7-2所示。表7-1 XMLHttpRequest对象方法：,表7-2 XML

6、HttpRequest对象属性:,使用XMLHttpRequest对象发送请求的基本步骤是：1）创建XMLHttpRequest对象；2）指定处理函数：给XMLHttpRequest对象的onreadystatechange属性赋值，指示哪个函数处理XMLHttpRequest对象状态的改变；3）指定请求的属性。open方法的三个参数分别指定将发送请求的方法（通常是GET或POST）、目标资源URL串以及是否异步请求；4）发送请求到服务器：send方法把请求传送到指定的目标资源，send方法接受一个参数，通常是一个串或DOM对象。这个参数会作为请求体的一部分传送到目标URL。向send方法提供

7、参数时，要确保open中指定的方法是POST。如果没有数据要作为请求体的一部分发送，则使用null。,用XMLHttpRequest进行Ajax开发的基本步骤主要包括发送XMLHttpRequest对象请求和获取响应信息进行数据处理两个步骤。,XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端，但并不会打断用户当前的操作。使用XMLHttpRequest传送的数据可以是任何格式，虽然从名字上建议是XML格式的数据。例7.1 该例代码演示了利用XMLHttpRequest对象获取远程数据并显示结果的整个过程。例子链接 页面WelcomeRe

8、sult.aspx仅根据调用的参数返回一个字符串，在.NET环境中其页面的codebehind代码为：链接,本店经营各类毛绒玩具礼品、公仔、靠垫、挂件等等，支持批发零售，欢迎来样看样定做生产。为了赚人气，本店所有商品批发价销售，超低秒杀！虽然我们的信誉不高，但我们会以诚信为本，为您提供质高价廉的商品和优质的服务！祝您购物愉快！欢迎大家来逛逛【扬州五亭龙玩具总动员】,个人小广告：,其运行效果如图7-3所示：图7-3(1),图7-3(2)Ajax实例运行效果,7.3 Ajax应用框架,利用XMLHttpRequest对象兼容性较好的特点，可以开发出比较健壮的Ajax应用程序。同时由于XMLHttp

9、Request对象比较接近于底层，在实际开发过程中可以根据具体情况进行灵活控制。但是基于XMLHttpRequest实现Ajax的应用需要程序员直接处理客户端脚本、DHTML、客户端数据展现等，实现过程比较繁琐，对程序员本身要求也比较高，不利于该技术的推广应用。目前在.NET开发环境中，已经有不少可供程序员直接使用的Ajax开发组件，比如ASP.NET Ajax（原Atlas）、MagicAjax.NET、Ajax.NET等等。这些开发组件无一例外地都实现了对XMLHttpRequest的封装，简化了ASP.NET实现Ajax的复杂程度。这些Ajax开发组件实质上就是一个Ajax应用框架。,7

10、.3.1 Ajax框架分类,根据Ajax框架封装技术的不同，可以将其分为客户端（Client-Side）框架和服务器 端（Server-Side）框架。基于客户端浏览器的应用框架一般分为两种：1，Application Frameworks：最具特色的是在客户端桌面上可通过Ajax应用框架建立象Visual Basic或Delphi那样的用户GUI(Graphical User Interface)。比较著名有Bindows、BackBase等。2，Infrastructural Frameworks：提供基本框架功能和轻便式浏览器端操作，让开发者创建具体应用。基于服务器端的应用框架通常以下面

11、两种方式工作：1，HTML/JS Generation（HTML/JS生成）：将Ajax引擎集成到Web服务器端，当服务器接收到页面请求时，自动将Ajax的JavaScript代码附加到页面中。比如Ajax.NET、ASP.NET Ajax。2，远程交互：JavaScript调用服务器端函数（例如调用Java函数）并返回给JavaScript的回调句柄。比如Direct Web Remoting。,7.3.2.NET平台下的Ajax框架,1 Ajax.Net 利用Ajax.Net，开发者可从客户端浏览器利用JavaScript调用运行在.NET平台上的服务器处理对象。Ajax.Net包括一个D

12、LL，可以与VB.NET或C#一同使用。Ajax.Net框架的文档很好地展示了针对各种场景的解决方案，而且能得到相关的源代码。虽然Ajax.Net可以比较灵活地控制Ajax请求，但是当利用Ajax.Net进行Ajax开发时，仍然需要开发者编写比较繁琐的JavaScript代码处理请求和返回数据以及页面更新，所以相对其他Ajax框架应用不够简便，学习起来要困难一些，故我们将重点放在后两种框架的介绍上。,2 Microsoft的ASP.NET Ajax（原Atlas）Microsoft在Ajax领域涉足的时间己经不短了，毕竟，XMLHttpRequest对象是Microsoft提出的，而且从199

13、8年开始就已经用在Web版本的Outlook中。Microsoft把重点放在提供一个更加健壮的开发环境上，从而让开发人员的工作更轻松。Microsoft ASP.NET Ajax应用框架完美地实现了和ASP.NET服务器组件以及Web服务的集成。,（1）安装ASP.NET Ajax安装ASP.NET Ajax框架要求操作系统必须是Windows 2000、Windows XP、Windows Server 2003或Windows Vista，事先需安装好如下软件：Microsoft.NET Framework Version 2.0或以上；至少一种流行的浏览器：IE 5.01（推荐使用IE

14、6.0）或FireFox 1.5；Visual Studio 2005（各种版本均可）或者Visual Web Developer Express Edition；Internet Information Service（IIS）。系统按照以上配置好以后，就可以开始下载安装ASP.NET Ajax程序了。首先我们可以到http:/网站下载最新的ASP.NET Ajax安装文件。在http:/Ajax主要包含如下两个主要的下载安装文件。,（1）ASP.NET 2.0 Ajax Extensions：包含最重要和最基本的一些控件、组件和功能，例如服务器端的ScriptManager控件、Updat

15、ePanel控件，客户端的JavaScript面向对象方面扩展、调试类、Web Service代理等。对于这一部分内容，微软公司将提供完善的技术支持，并提供如MSDN一般详细的开发文档等（可访问http:/ Ajax的核心部分。（2）ASP.NET Ajax Futures CTP：这一部分是ASP.NET Ajax的“Futures”部分，其中包括服务器端的扩展器控件（Extender Control）、Web部件，客户端的各种控件、拖放功能实现、ASP.NET Ajax XML脚本等。“Futures”意味着微软暂时不会对这些内容进行官方的支持，而选择使用“社区支持”的方法。下载好这两个部

16、分的安装文件后，我们就可以开始如下的安装过程了，需要注意的是“核心”部分是整个ASP.NET Aajx开发的基础，所以应该首先安装“核心”部分。安装“核心”部分ASP.NET 2.0 Ajax Extensions的界面如图7-4所示。,图7-4 安装核心部分ASP.NET 2.0 Ajax Extensions时的界面,核心部分ASP.NET 2.0 Ajax Extensions安装完成之后，接下来可以安装ASP.NET Ajax CTP，即“Futures”部分。安装“Futures”部分ASP.NET 2.0 Ajax Extensions时的界面如图7-5所示。图7-5 安装“Fut

17、ures”部分ASP.NET 2.0 Ajax Extensions时的界面,（2）ASP.NET Ajax配置由于ASP.NET Ajax所具备的功能较多，程序的配置相对比较复杂，在此我们仅简单介绍其基本配置方法，更具体的配置，请参考其使用文档。图7-6 可供选择的网站模板,3 主要控件（ScriptManager、UpdatePanel控件）ASP.NET Ajax提供的最重要的两个服务器端控件：一个是用来生成并发送给浏览器所有客户端JavaScript脚本的ScriptManager；另一个是用来为现有ASP.NET 2.0页面添加局部异步更新功能的UpdatePanel。通过使用这两个

18、控件，我们就能够在服务器端完成大部分的Ajax功能，而无需书写任何客户端的JavaScript代码。,（任何一个想要使用ASP.NET Ajax的ASP.NET 2.0页面都需要包含一个（且仅有一个）ScriptManager控件。ScriptManager自动将MicrosoftAjax.js文件和MicrosoftAjaxWebForms.js文件发送至客户端。要在页面中添加ScriptManager控件，既可以从Visual Studio的Toolbox中将ScriptManager拖入到页面的设计器中，也可以切换到页面的源文件视图，手动添加下述代码：,由于大多ASP.NET Ajax服

19、务器端控件要求ScriptManager控件位于它们的前面，因此我们推介在标记之后立刻声明ScriptManager。UpdatePanel控件提供了一种实现页面局部更新的简洁方法。UpdatePanel包括ContentTemplate和Triggers两个重要的标记节点，分别指出将要异步进行更新的内容以及触发更新的控件名和事件名。除此之外，ASP.NET Ajax还内建了一系列同样非常有用的服务器端控件，包括在客户端定时触发某个操作的Timer、让页面上的某个层可以在浏览器中自由拖动的DragOverlayExtender、为某个文本框提供自动完成功能的AutoCompleteExtend

20、er等，有兴趣的读者可以参考网站开发文档。,3 MagicAjax.NET介绍MagicAjax.NET是.NET平台的开源Ajax框架（可以在http:/下载其最新版本），该框架基于控件内容进行数据回传，其主要的控件是AjaxPanel。用户仅需将需要实现Ajax技术特性的部分控件放入AjaxPanel即可，控件本身屏蔽了Ajax实现细节，程序员几乎不需要直接编写Ajax程序代码。通过Ajax Callbacks替换传统PostBacks，并且仅发送AjaxPanel内部数据以减小数据尺寸，提高运行效率。,AjaxPanel的主要控件包括：（1）AjaxPanel（2）AjaxZone（3）

21、ClientEventTrigger（4）KeyClientEventWrapper 使用MagicAjax.NET的主要步骤如下：1）添加MagicAjax.dll引用；2）配置Web.config文件（具体见下面的实例）；3）添加AjaxPanel控件到需要应用Ajax特性的页面；4）根据具体情况调整程序性能，如应用AjaxZone控件进一步缩减传送数据尺寸等。,7.4 Ajax应用实例,我们以实现省市联动功能为例说明如何利用Microsoft ASP.NET Ajax应用框架实现Ajax应用程序的开发。省市联动程序功能描述为：每个省份下面有很多城市，当用户选择不同的省份后，相应城市列表的

22、名称利用Ajax方法马上从数据库中取出，并迅速地进行异步更新。如果将省市联动问题做成客户端静态页面文件来处理，其数据量有10K左右，加重了网络传输负荷。如果采用传统方法，用ASP.NET中的Web标准控件Dropdownlist控件来实现，则每选择一个城市，都要令人讨厌地刷新整个页面。下面我们分别从数据库、程序实现和使用效果对Ajax开发过程进行介绍。省市联动功能的数据表设计如图7-7所示，其中CityID、ProvinceID、CityNname、SpellCity分别为城市编号，所属省份编号，城市名，城市名拼音。,图7-7 数据库表,例7.2 利用ASP.NET Ajax解决省市联动问题（

23、1）Web.Config文件配置 在本实例中仅涉及ScriptManager和UpdatePanel控件，程序中不需要ASP.NET Ajax中的Web Service等功能，因此，仅需要在Web.Config文件中httpHandlers节点下包括对脚本请求的配置即可，其内容如下：,（2）页面设计 ASP.NET Ajax的UpdatePanel控件有两种比较常见的使用方式（主要体现在是否利用Triggers标志），下面以这两种方式设计页面。由于省份切换后仅城市列表控件中的数据将要变化，而页面其他部分内容都不会发生变化，因此将省份和城市两个DropDownList控件放入UpdatePane

24、l控件内部，其CodeFile中程序编写方式与非Ajax方式完全一致。其页面代码如下所示：链接 如果页面异步更新的内容比较分散，用UpdatePanel控件不容易将触发事件的控件以及内容更新的控件包括进来，则可以利用UpdatePanel的Triggers标志指示触发事件的控件。利用Triggers标志指示更新由控件SelectProvince的SelectedIndexChanged事件触发，修改后的页面代码如下：链接（相对于第一个页面代码，此方法明显可以提高Ajax响应效率。）,（3）CodeFile代码编写由于使用了UpdatePanel控件，程序员可以将主要精力放在业务流程的处理上，而

25、不必关心过于复杂的Ajax编程细节，而且我们可以按照常规的ASP.NET开发习惯编写后台代码。程序中仅需要在省份下拉列表框内容发生改变时将市级下拉列表框清空并加载所选择省份辖区下的单位即可。相应的CodeFile代码如下（上面介绍的两种方式的CodeFile代码相同）：链接页面效果如图7-8所示：,图7-8(1),图7-8(2)省市联动页面效果图,例7-3 利用MagicAjax.NET解决省市联动问题。利用MagicAjax.NET处理省市联动问题，仅需要使用MagicAjax.NET的AjaxPanel控件即可。其开发过程如下：（1）添加程序集应用 在解决方案中添加对MagicAjax.N

26、ET程序集MagicAjax.dll的引用，如图：,（2）配置Web.Config文件 MagicAjax.NET是基于httpModule构建的，因此在httpModules节点添加如下配置：（3）页面设计 与使用ASP.NET Ajax类似，我们仅需要将省份和城市两个下拉列表框置入AjaxPanel控件即可，其他Ajax逻辑由MagicAjax.NET自动进行处理。页面源代码如下：链接,（4）CodeFile代码 由于使用了MagicAjax.NET的AjaxPanel控件，我们不必关心页面Ajax请求的复杂过程，其页面CodeFile代码与前文使用ASP.NET Ajax的代码完全相同。使用ASP.NET Ajax或MagicAjax.NET实现省市联动功能时，可以利用ExcludeFlags属性排除省份控件，从而减少传输数据，提高效率。以上例子只是在.NET平台下对Ajax的简单应用，起到抛砖引玉的作用，更多使用请读者自己学习和探索。,思考练习题：简单陈述什么是ajax技术。Ajax的作用是什么？ajax有哪些应用框架，它们都有哪些特点？对本章的例子进行上机练习。,