XML与WEB Service技术(微软)：第07章 ASP.NET AJAX

1、第7章ASP.NET AJAX08 七月 20222Ch7 ASP.NET AJAX7.1 基本概念7.2 内置的ASP.NET AJAX扩展控件7.3 AJAX控件工具包08 七月 202237.1 基本概念Ajaxajax是“Asynchronous Javascript And Xml”的简写，是综合HTTP异步通信、JavaScript、XML以及JSON等多种网络技术的一种编程模型。ASP.NET AJAX基于Microsoft Ajax技术的Web应用程序架构由两种解决方案组成，一种是仅客户端解决方案，另一种是客户端与服务器解决方案。08 七月 202247.1 基本概念ajax的

2、主要内容（1）使用HTML、XHTML以及 CSS来表示和控制页面元素信息。（2）使用JavaScript操作DOM。（3）使用XML、XSLT（Extensible Stylesheet Language Transformations）以及JSON进行数据交换及相关操作。（4）使用XmlHttpRequest对象与Web服务器进行异步数据交换。（5）使用JavaScript将以上各部分内容绑定在一起。08 七月 202257.1 基本概念ajax的基本原理 当用户与浏览器中的页面进行交互时，会触发页面元素对象的响应事件，客户端捕获相应的事件后，如果需要提交给服务器进行处理，客户端就将要处理

3、的数据（包括状态描述）转换为XML或JSON格式的字符串，再利用异步传送方式将这些数据提交给服务器；服务器进行处理后，同样利用XML或JSON格式和异步传送方式将处理结果返回给客户端；客户端再从返回结果中提取需要的部分，并将提取的部分利用JavaScript对网页进行“悄悄地”局部更新，而不是刷新整个页面。08 七月 202267.1 基本概念ajax的优点（1）页面局部刷新。在读取数据的过程中，用户所面对的不是白屏，而是原来的页面状态，或者正在更新的信息提示状态，只有当接收到全部数据后才更新相应部分的内容，而这种更新也是瞬间的，用户几乎感觉不到。（2）把一些由服务器承担的工作转移到客户端处理

4、，这样可以充分利用客户端闲置的处理能力，减轻服务器和网络传输的负担。（3）使用基于标准化的并被广泛支持的技术，不需要安装插件即可运行。（4）使Web中的界面与应用分离，也可以说是数据与呈现分离。08 七月 202277.1 基本概念ASP.NET AJAX 基于Microsoft Ajax技术的Web应用程序架构由两种解决方案组成，一种是仅客户端解决方案，另一种是客户端与服务器解决方案。内容如下：1使用客户端脚本创建ajax风格的应用程序2集成客户端脚本和ASP.NET3如何用ASP.NET AJAX开发Web应用程序08 七月 202287.2 内置的ASP.NET AJAX扩展控件Scri

5、ptManager控件 ScriptManager控件是ASP.NET AJAX的核心，用来实现页面上的所有服务器控件的ajax功能以及自动管理所有的客户端脚本库。 一个页面中只能包含一个ScriptManager控件，而且该控件必须声明在form标记内。 ScriptManager控件的基本用法是，直接将该控件从工具箱中拖放到页面的form标记内即可。08 七月 202297.2 内置的ASP.NET AJAX扩展控件UpdatePanel控件UpdatePanel控件是实现页面局部更新的容器，当客户端向服务器首次发送请求时，服务器返回整个页面，其他情况均通过异步回传方式实现页面的局部更新。

6、1ContentTemplate属性2Triggers属性3UpdateMode属性和ChildrenAsTriggers属性 【例8-1】演示UpdatePanel的基本用法。08 七月 2022107.2 内置的ASP.NET AJAX扩展控件UpdateProgress控件 UpdateProgress控件一般与UpdatePanel控件联合使用，在UpdatePanel页面内容进行异步更新过程中显示提示信息。这些提示信息可以是一段文字，也可以是传统的进度条提示，还可以是各种动画提示。当异步更新完成时，提示信息自动消失。如果UpdatePanel页面内容更新处理耗时太长，还可以提供一个选

7、项让用户来取消页面更新。1AssociatedUpdatePanelID属性2ProgressTemplate属性3DynamicLayout属性【例8-2】演示UpdateProgress控件的基本用法。08 七月 2022117.2 内置的ASP.NET AJAX扩展控件Timer控件Timer控件用于通过异步方式在服务器端定时执行某些功能。通过它的Interval属性和OnTick事件，可以指定触发的时间间隔和触发的事件，从而实现局部页面定时更新、图片自动播放、广告自动显示和关闭以及超时自动退出登录等功能。1常用的基本属性（1）Interval属性（2）Enabled属性2常用的基本事件

8、：Tick事件【例8-3】演示Timer控件实现页面局部定时更新的基本用法。08 七月 2022127.3 AJAX控件工具包AJAX控件工具包（AJAX Control Toolkit）中的控件主要分为两大类：扩展控件和独立使用的控件。AJAX控件工具包与jQuery UI都是利用JavaScript实现页面的局部更新，但一个是基于服务器的技术，一个是基于客户端的技术。在实际的项目开发中，应该将这两种技术结合起来使用，包括联合使用ASP.NET主题和jQuery主题，这样才能极大地提高Web设计的效率，既缩短了项目开发周期，同时也能充分保证Web应用程序的稳定性和健壮性。08 七月 2022

9、137.3 AJAX控件工具包工具包自身还提供了一个ToolkitScriptManager控件，在VS2010开发环境下（ASP.NET 4.0），ScriptManager和ToolkitScriptManager的作用完全相同，开发人员只需要选择其中的一个即可，建议使用ScriptManager。08 七月 2022147.3 AJAX控件工具包扩展控件：扩展控件是指不能单独使用、只有和被其扩展的服务器控件关联在一起才能发挥作用的控件。弹出扩展动画扩展显示扩展数据输入扩展数据选择扩展其他扩展08 七月 2022157.3 AJAX控件工具包弹出扩展：弹出扩展为服务器控件提供了非常多的扩展

10、功能，包括对话框、动画、滑动、输入、输出、缩放、拖动、分页、排序等。1弹出气球式对话框（BalloonPopupExtender）【例8-4】演示气球式对话框的基本用法。2弹出模式对话框（ModalPopupExtender）【例8-5】演示模式对话框的基本用法。08 七月 2022167.3 AJAX控件工具包弹出扩展3弹出非模式对话框（PopupControlExtender）【例8-6】演示非模式对话框的基本用法。4弹出确认按钮对话框（ConfirmButtonExtender）【例8-7】演示确认对话框的基本用法。5鼠标滑过弹出快捷菜单（HoverMenuExtender）08 七月

11、2022177.3 AJAX控件工具包动画扩展：AnimationExtender控件可以扩展所有服务器控件的动画功能。1动画扩展（AnimationExtender）2异步更新动画提示（UpdatePanelAnimationExtender）3AJAX工具包提供的动画和jQuery动画的比较08 七月 2022187.3 AJAX控件工具包显示扩展：除了弹出扩展和动画扩展之外，AJAX控件工具包中还提供了圆角效果、阴影效果以及始终显示和折叠显示的功能。1圆角（RoundedCornersExtender）2阴影（DropShadowExtender）3折叠和展开（CollapsiblePa

12、nelExtender）4始终在固定位置可见（AlwaysVisibleControlExtender）【例8-8】演示AlwaysVisibleControlExtender的基本用法。08 七月 2022197.3 AJAX控件工具包数据输入扩展:主要用于提示输入信息、限制或过滤文本字符的输入等。1空白文本框自动提示（TextBoxWatermarkExtender）【例8-9】演示TextBoxWatermarkExtender的基本用法。2文本框输入过滤（FilteredTextBoxExtender）3列表项自动搜索（ListSearchExtender）4掩码文本框编辑（Maske

13、dEditExtender）5输入验证（ValidatorCalloutExtender）【例8-10】演示ValidatorCalloutExtender的基本用法。08 七月 2022207.3 AJAX控件工具包数据选择扩展:当鼠标进入某些服务器控件区域或者在文本框中输入信息时，AJAX控件工具包提供了多个辅助数据选择的扩展控件。1日期选择（CalendarExtender）【例8-11】演示CalendarExtender的基本用法。2颜色选择（ColorPickerExtender）【例8-12】演示ColorPickerExtender的基本用法。3滚动数字选择（NumericUp

14、DownExtender）08 七月 2022217.3 AJAX控件工具包数据选择扩展4自动完成（AutoCompleteExtender）【例8-13】演示AutoCompleteExtender的基本用法。5下拉列表选择（DropDownExtender）【例8-14】演示DropDownExtender的基本用法。6复选框式的单选按钮（MutuallyExclusiveCheckBoxExtender）7图片复选框（ToggleButtonExtender）08 七月 2022227.3 AJAX控件工具包其他扩展1缩放（ResizableControlExtender）2拖动（DragPanelExtender）3分页（PagingBulletedListExtender）4滑动（SliderExtender、MultiHandleSliderExtender）08 七月 2022237.3 AJAX控件工具包AJAX控件工具包中的独立控件1防止自动程序攻击（NoBot） 2密码强度检查（PasswordStrength）【例8-15】演示Pass