《ASP.NET程序设计教学课件作者徐占鹏单元九KC04090000034电子课件单元9AJAX技术的运用一AJAX核心技术应用》由会员分享，可在线阅读，更多相关《ASP.NET程序设计教学课件作者徐占鹏单元九KC04090000034电子课件单元9AJAX技术的运用一AJAX核心技术应用（38页珍藏版）》请在金锄头文库上搜索。
1、单元九 AJAX技术的 运用（一） AJAX核心技术应用,主讲教师：乔崇,学习目标,【知识目标】 了解AJAX的思维方式； 掌握AJAX的核心技术； 熟悉AJAX核心控件的使用。 【技能目标】 能够使用AJAX核心控件实现AJAX技术。,注： 本课内容参考教材 单元九 9.1,ASP.NET AJAX,ASP.NET AJAX简介 ScriptManager控件 UpdatePanel控件 UpdateProgress控件 Timer控件,AJAX概述,AJAX是Asynchronous JavaScript and XML（异步JavaScript和XML）的缩写，由著名的用户体验专家Jes
2、se-James于2005年2月首先提出。 AJAX是由JavaScript、XML、XSLT、CSS、DOM和XMLHttpRequest等多种技术组成。 XMLHttpRequest对象是AJAX的核心，该对象由浏览器中的JavaScript创建，负责在后台以异步的方式让客户端连接到服务器。,5,12.1.1 AJAX概述,AJAX技术将桌面应用程序具有的交互性应用于Web应用程序 AJAX所用到的技术包括： XMLHttpRequest对象: 该对象允许浏览器与Web服务器通信，通过MSXML ActiveX组件可以在IE5.0以上的浏览器中使用。 JavaScript代码: 这是运行A
3、JAX Web应用程序的核心代码，帮助改进与服务器应用程序的通信。 DHTML: 通过使用、和其他动态HTML元素来动态更新表单。 文档对象模型DOM: 通过JavaScript代码使用DOM处理HTML结构和服务器返回的 XML。,6,AJAX技术和传统Web应用程序比较,7,12.1.2 ASP.NET AJAX技术,ASP.NET AJAX是AJAX的Microsoft实现方式，专用于ASP.NET开发人员。使用ASP.NET中的AJA能，可以生成丰富的Web应用程序。与传统的Web应用程序相比， 基于ASP.NET AJAX的Web应用程序具有以下优点： 局部页刷新，即只刷新已发生更改
4、的网页部分。 自动生成的代理类，可简化从客户端脚本调用Web服务方法的过程。 支持大部分流行的浏览器。 因为网页的大部分处理工作是在浏览器中执行的，所以大大提高了效率,8,12.1.2 ASP.NET AJAX技术（续）,ASP.NET AJA能框架组成： 包含客户端脚本库和服务器端AJAX Extensions。 两部分组合在一起提供了可靠的开发框架。 客户端脚本库： 包含一系列的JavaScript脚本，简化了开发人员创建AJAX窗体的复杂性。 服务器端AJAX Extensions： 包含ASP.NET AJAX服务器控件。,Google地图,AJAX应用程序借助了JavaScript、
5、XML、CSS、DOM和XMLHttpRequest等各种技术，并充分考虑了用户体验，在易用性方面几乎和传统的桌面程序不相上下。 AJAX可以广义地定义为：基于标准Web技术创建的、能够以更少的响应时间带来更加丰富的用户体验的一类Web应用程序所使用的技术的集合。,AJAX技术特点,(1)改善表单验证方式，不再需要打开新页面，也不再需要将整个页面数据提交 (2)不需刷新页面就可改变页面内容，减少用户等待时间 。 (3)按需获取数据，每次只从服务器端获取需要的数据 。 (4)读取外部数据，进行数据处理整合 。 (5)异步与服务器进行交互，在交互过程中用户无需等待，仍可继续操作。,微软公司的AJA
6、X技术框架,微软公司将AJAX技术组合到已有的ASP.NET基础架构中，形成了自己的AJAX技术开发框架。,ASP.NET AJAX Control Toolkit,Microsoft AJAX Library,ASP.NET AJAX Extensions,ASP.NET,使用AJAX EXTENSION,从VS2008开始，AJAX Extension成为标准控件。,实现定时调用，常用于定时到服务器上去提取相关的信息,最重要的AJAX控件，用于定义页面更新区域和更新方式,当页面异步更新正在进行时提示用户,所有的使用AJAX的页面都必须放置一个ScriptManager控件,当母版页上已有一
7、个ScriptManager控件时，在子页面中使用,ScriptManager控件,ScriptManager是ASP.NET AJAX中的核心控件，主要负责生成并发送给浏览器所有客户端JavaScript脚本代码。,在页面中添加ScriptManager控件,任何一个想要使用AJAX的ASP.NET页面都需要包含一个（且只有一个）ScriptManager控件。 如果在网站中添加一个“AJAX Web 窗体”，系统会自动在该网页中添加一个ScriptManager控件。 如果在网站中添加一个普通“Web 窗体”，系统就不会自动添加这个控件，此时需要从工具箱中将其拖拽到页面中。,声明Scrip
8、tManager控件的代码如下： 注意：很多ASP.NET AJAX控件均要求在源代码中定义的ScriptManager控件位于它们的前面，所以最保险的方法是在之后立刻声明ScriptManager。,17,12.2.1 ScriptManager控件（续）,如果仅在一个ASP.NET网页上添加了一个ScriptManager控件，而没有添加其它的ASP.NET AJAX服务器控件，则在浏览该网页时就会将Microsoft AJAX库的JavaScript脚本下载到浏览器。 属性EnablePartialRendering：确定了网页是否能实现局部页刷新功能。,18,在ScriptManage
9、r中注册自定义JavaScript脚本,在ScriptManager控件的子元素中创建一个指向脚本文件的ScriptReference对象。 ,19,在ScriptManager中注册自定义JavaScript脚本（续）,脚本文件MyScript.js的最后一句必须是： if (typeof(Sys) != undefined) Sys.Application.notifyScriptLoaded(); 还可以使用RegisterClientScriptBlock()方法直接在ScriptManager控件中注册脚本。ScriptManager.RegisterClientScriptBloc
10、k(Button1, typeof(Button), DateTime.Now.ToString(), “alert(welcome)“, true);,20,在母版页中使用ScriptManager,如果在母版页中已添加了ScriptManager控件，则在内容页中就不能再添加ScriptManager控件。 如果这时还要在内容页中使用ScriptManager控件的其他功能，可以通过添加ScriptManagerProxy控件实现。,21,在母版页中使用ScriptManager（续）,ScriptManager控件的属性与方法,ScriptManager控件用于对客户端脚本进行各种复杂的
11、管理。,表1 ScriptManager控件的常用属性和方法,续表：,UpdatePanel控件,UpdatePanel为其包含的局部页面提供了异步回送，局部更新的功能。 当页面中只有一部分需要更新时，UpdatePanel省去了整页更新时传送其它不变部分带来的不必要的网络流量。 这种页面的局部更新方式也避免了整页更新方式所带来的页面闪烁，让页面中内容的切换显得更为平滑，特别是对于在某些页面中经常被触发的回送。,在页面中添加一个ScriptManager控件，再添加一个或多个UpdatePanel把将要采用异步更新的页面部分包围起来便可实现局部更新。 UpdatePanel同样可以放置在用户控
12、件、母版页或内容页中，与现有的ASP.NET开发模型完美地无缝集成。,在页面中添加UpdatePanel控件,在页面中声明一个UpdatePanel控件的代码如下： ,演示实例1：,UpdatePanel控件的属性,表2 UpdatePanel控件的常用属性,UpdatePanel之外的某个控件也能够触发该UpdatePanel进行局部更新。 在UpdatePanel中有AsyncPostBackTrigger和PostBackTrigger两种类型的触发器。 AsyncPostBackTrigger触发UpdatePanel进行局部更新 PostBackTrigger用来指向该UpdateP
13、anel中的某个本来应该进行异步回送的控件，让其选择传统的整页方式进行回送。,12.4 UpdateProgress控件,在整页回送模式情况下，用户可以通过浏览器的进度条来了解当前页面的加载进度。当使用异步回送机制时，可以发现浏览器的进度条是不闪动的，ASP.NET AJAX提供了UpdateProgress控件，可以让用户了解当前页面的异步回送状态。 放在UpdateProgress中的控件在异步回发时出现，当浏览器收到数据后自动隐藏。,UpdateProgress控件的属性,表3 UpdateProgress控件的常用属性,UpdateProgress控件的使用方法,【例2】UpdateP
14、rogress控件示例程序。 该示例获取并显示服务器当前时间，在异步更新过程中利用UpdateProgress控件给用户以提示。为了更好地观察程序运行效果，程序中人为设置了3秒的延迟。,Timer控件,ASP.NET AJAX中提供了一个类似于Windows定时器的控件Timer，在一些情况下，Timer控件非常有用。比如一些需要实时更新的数据，可以使用Timer控件定期的更新UpdatePane来更新数据。Timer控件有一个非常重要的属性Interval，该属性以毫秒为单位指定间隔时长，默认值为60000，也就是1分钟。 Timer控件同样也提供了一个Tick方法，当到达指定的Interv
15、al时间间隔时，将触发该事件。,在页面中添加Timer控件,声明Timer控件的代码如下： ,Timer控件的属性与事件,表4 Timer控件的常用属性和事件,Timer控件的使用方法,【例3】Timer控件示例程序。 该示例利用Timer控件在页面中每隔两秒钟更新服务器时间，并与没有经过Timer控件触发的时间相比较。,36,12.4 小结,ASP.NET AJAX虽然发展历史不长，但它改变了Web应用程序的开发方式。使Web服务不需要漫长的页面等待，具有与桌面应用程序类似的用户体验。本章介绍了Visual Studio 2008默认安装的ASP.NET AJAX的核心基础，还介绍了ASP.
16、NET AJAX Control Toolkit的安装和常用AJAX控件的说明。详细介绍了ASP.NET AJAX服务器控件ScriptManager、UpdatePanel、UpdateProgress和Timer的使用方法。,37,12.4 小结,ScriptManager控件是ASP.NET AJAX的核心，每个ASP.NET AJAX网页必须包含ScriptManager控件。UpdatePanel控件定义了使用异步回发刷新的页面区域。UpdateProgress控件提供有关UpdatePanel局部页刷新时的状态信息。Timer控件定义固定时间间隔来执行页面回发，通常和UpdatePanel配合使用。,项目实训,【实训目的】 1.了解AJAX的思维方式； 2.掌握AJAX的核心技术。 【实训内容】 1. 使用AJAX核心控件实现网页局部刷新技术,
