Web开发实用技术Ajax.ppt
《Web开发实用技术Ajax.ppt》由会员分享,可在线阅读,更多相关《Web开发实用技术Ajax.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、2 .NET平台下的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、X
3、Path等规范。 XMLHttpRequest:对应WHATWG(Web Hypertext Application Technology Working Group)的 Web Applications1.0规范的一部分 (http:/whatwg.org/specs/web-apps /current-work/)。,Ajax的工作原理相当于在用户和服务器之间加了一个中间层Ajax引擎,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像一些数据验证和简单的数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。其应用程序
4、模型如图7-1所示。,Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。XmlHttpRequest使开发者可以使用JavaScript向服务器提出异步请求并处理响应,而不阻塞用户。 目前实现Ajax技术的方法主要有 (1)直接基于XMLHttpRequest对象; (2)利用各种Ajax框架,简化Ajax开发。,7.2 用XMLHttpRequest实现Ajax技术,Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组
5、件中的XMLHttpRequest对象。 最早应用XMLHTTP的是微软IE(IE5以上)允许开发人员在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。在这种情况下,XMLHttpRequest对象相当于起到了图7-1中Ajax引擎的作用,利用该对象减少了无状态连接的痛苦,还可以排除下载冗余HTML从而提高服务器的响应速度。,XMLHttpRequest是Ajax开发的基础,体现了异步调用的核心。XMLHttpRequest对象的方法和属性如表7-1和表7-2所示。 表7-1 XMLHttpR
6、equest对象方法 :,表7-2 XMLHttpRequest对象属性 :,使用XMLHttpRequest对象发送请求的基本步骤是: 1)创建XMLHttpRequest对象; 2)指定处理函数:给XMLHttpRequest对象的onreadystatechange属性赋值,指示哪个函数处理XMLHttpRequest对象状态的改变; 3)指定请求的属性。open方法的三个参数分别指定将发送请求的方法(通常是GET或POST)、目标资源URL串以及是否异步请求; 4)发送请求到服务器:send方法把请求传送到指定的目标资源,send方法接受一个参数,通常是一个串或DOM对象。这个参数会作
7、为请求体的一部分传送到目标URL。向send方法提供参数时,要确保open中指定的方法是POST。如果没有数据要作为请求体的一部分发送,则使用null。,用XMLHttpRequest进行Ajax开发的基本步骤主要包括发送XMLHttpRequest对象请求和获取响应信息进行数据处理两个步骤。,XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端,但并不会打断用户当前的操作。使用XMLHttpRequest传送的数据可以是任何格式,虽然从名字上建议是XML格式的数据。 例7.1 该例代码演示了利用XMLHttpRequest对象获取远程数据
8、并显示结果的整个过程。 例子链接 页面WelcomeResult.aspx仅根据调用的参数返回一个字符串,在.NET环境中其页面的codebehind代码为: 链接,本店经营各类毛绒玩具礼品、公仔、靠垫、挂件等等,支持批发零售,欢迎来样看样定做生产。为了赚人气,本店所有商品批发价销售,超低秒杀!虽然我们的信誉不高,但我们会以诚信为本,为您提供质高价廉的商品和优质的服务!祝您购物愉快! 欢迎大家来逛逛【扬州五亭龙玩具总动员】 ,个人小广告:,其运行效果如图7-3所示: 图7-3 (1),图7-3 (2) Ajax实例运行效果,7.3 Ajax应用框架,利用XMLHttpRequest对象兼容性较
9、好的特点,可以开发出比较健壮的Ajax应用程序。同时由于XMLHttpRequest对象比较接近于底层,在实际开发过程中可以根据具体情况进行灵活控制。但是基于XMLHttpRequest实现Ajax的应用需要程序员直接处理客户端脚本、DHTML、客户端数据展现等,实现过程比较繁琐,对程序员本身要求也比较高,不利于该技术的推广应用。目前在.NET开发环境中,已经有不少可供程序员直接使用的Ajax开发组件,比如ASP.NET Ajax(原Atlas)、MagicAjax.NET、Ajax.NET等等。这些开发组件无一例外地都实现了对XMLHttpRequest的封装,简化了ASP.NET实现Aja
10、x的复杂程度。这些Ajax开发组件实质上就是一个Ajax应用框架。,7.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,开发者可从客户端浏览
12、器利用JavaScript调用运行在.NET平台上的服务器处理对象。Ajax.Net包括一个DLL,可以与VB.NET或C#一同使用。Ajax.Net框架的文档很好地展示了针对各种场景的解决方案,而且能得到相关的源代码。虽然Ajax.Net可以比较灵活地控制Ajax请求,但是当利用Ajax.Net进行Ajax开发时,仍然需要开发者编写比较繁琐的JavaScript代码处理请求和返回数据以及页面更新,所以相对其他Ajax框架应用不够简便,学习起来要困难一些,故我们将重点放在后两种框架的介绍上。,2 Microsoft的ASP.NET Ajax(原Atlas) Microsoft在Ajax领域涉足
13、的时间己经不短了,毕竟,XMLHttpRequest对象是Microsoft提出的,而且从1998年开始就已经用在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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 开发 实用技术 Ajax
链接地址:https://www.31doc.com/p-3486234.html