中AJAX技术基础及应用.pptx

主要内容AJAX概述页面的局部刷新与异步回发使用UpdateProgress控件定时调用AJAX Control ToolKit简介及应用1 11 AJAX概述Web应用程序的“软肋”问：让网页象EXCEL一样好用，可能吗？答：Web应用与桌面应用有着完全不同的运行环境和编程模型，在目前的技术条件下，Web应用要完全超越已发展多年的桌面应用所拥有的丰富交互特性，还是很困难的。问：为何访问网页很慢，并且在显示时会有闪烁？答：当前网络带宽还不够，并且传统的Web网页是采用“请求”“刷新”这一机制来显示的，并且哪怕数据只有一点改变，也得刷新整个页面正是为了弥补传统Web技术的弱点，AJAX技术才得到广泛应用。3 3什么是AJAX？AJAX(Asynchronous JavaScript+XML)页面局部刷新，以XML格式表达数据只作必要的数据交换异步访问Web服务器4AJAX技术的底层基础AJAX 技术的底层基础是由浏览器负责实现的JavaScript对象XMLHttpRequest。XMLHttpRequest具有构建AJAX技术框架所需的最基本功能异步发送请求和接收数据。更新页面的功能则由JavaScript+CSS+DOM来完成。5AJAX客户端技术框架6 6一个简单的AJAX示例Demo:SimpleAJAXExample7示例分析要点：使用JavaScript创建XMLHttpRequest对象，设定回调函数，指定URL，紧接着发送请求。当服务器接收到请求之后，它将准备好的数据发回给浏览器。要返回给浏览器的数据其实是一个HTML的table元素。当浏览器接收到数据之后，它调用原先设定好的回调函数，在此函数中JavaScript代码根据取回的数据利用DOM来更新页面。在整个过程中，有以下特点：（1）只发送和接收必要的数据，不必整页发送和刷新（2）浏览器另开一个线程来完成发送和接收工作，不影响页面的正常显示与响应用户操作。8 8AJAX程序浏览器与WEB服务器间的交互流程9 9虽然可以用XMLHttpRequest直接编程实现AJAX的各种技术特色，但这也要求太多编码了，在实际开发中工作量太大一个现实的问题：1010微软公司的AJAX技术框架微软公司将AJAX技术组合到已有的ASP.NET基础架构中，形成了自己的AJAX技术开发框架。ASP.NET AJAX Control ToolkitMicrosoft AJAX LibraryASP.NET AJAX ExtensionsASP.NET1111使用AJAX EXTENSION从VS2008开始，AJAX Extension成为标准控件。实现定时调用，常用于定时到服务器上去提取相关的信息最重要的AJAX控件，用于定义页面更新区域和更新方式当页面异步更新正在进行时提示用户所有的使用AJAX的页面都必须放置一个ScriptManager控件当母版页上已有一个ScriptManager控件时，在子页面中使用1212从UpdatePanel开始AJAX之旅示例网站：UseAJAXExtensions13132 页面的局部刷新与异步回发页面的局部刷新与异步回发直观了解页面局部更新Demo：PartialPageUpdate.aspx一个重要疑问：当点击放在UpdatePanel中的按钮局部更新阴影部分区域时，在服务器端是不是仅执行与阴影部分页面区域更新的C#代码？一个结论：当页面中的哪块区域需要局部更新，就将这块区域中包围在UpdatePanel中。1515异步更新模式下的页面对象模型重要！在异步更新模式下，服务器端的页面类仍然经历与传统回发一样的生命周期！这就是说：不管是异步回发还是传统回发，服务器端该执行的代码还是会执行，但在发回给浏览器数据时有差别。如果是异步回发，服务器会根据异步回发送来的数据仅发送要更新的那部分页面给浏览器，而传统回发时，服务器则会发回整个页面。当异步回发代码需要访问UpDatePanel之外的控件时，注意它对这些控件所修改的值有可能会消失，因为服务器发给浏览器的仅是浏览器更新页面局部所需要的那部分数据而非整个页面，因此这些控件的状态可能不能被正确保存和恢复！记住这个结论非常重要！1616页面局部更新的方式页面局部更新方式：UpdateMode.aspx17页面局部更新的方式解析当UpdateMode=Always时，只要页面上引发了异步回发（包括别的UpdatePanel内的控件），就会更新。当UpdateMode=Conditional时，是否更新取决于UpdatePanel的设置。默认情况下，仅自己内部的控件引发的回发才会更新。1818更灵活的更新方式当把UpdatePanel的ChildrenAsTriggers属性设置为false时，它内部所有的控件引发的异步回送都不会更新自已。如果同时它的UpdateMode=Conditional，那么，必须指定外部某个ASP.NET控件来触发它的异步更新，否则，它无法实现异步更新自己。这个“外部”的ASP.NET控件被称为“触发器（触发器（Trigger）”。所谓“触发器”，其实就是可引发异步更新的ASP.NET控件。1919触发器应用示例Demo：Triggers.aspx2020理解了相关知识，你能完成以下任务吗？网页上放置两个UpdatePanel，每个都放置有一个按钮，点击按钮时，更新对方的面板而不更新自己所在的面板。2121有关UpdatePanel还应该知道的不能放置在UpdatePanel中的控件：FileUpload和验证控件(除非其EnableClientScript=false)当需要动态向页面注入脚本时，不再使用ClientScript，而采用ScriptManager的同名方法完成。当使用母版页时，如果在母版页上放置了ScriptManager，则子页面上不需要再放置ScriptManager。UpdatePanel可以被嵌套，关于嵌套的UpdatePanel更新问题，MSDN中有详细介绍，留给同学们自学。22223 使用UPDATEPROGRESS控件2323使用UPDATEPROGRESS控件Demo:UseUpdateProgress.aspx24要点：放在UpdateProgress中的控件在异步回发时出现，当浏览器收到数据后自动隐藏。4 定时调用定时调用使用Timer控件实现定时调用Demo:Timer.aspx26Timer控件会定时引发一个回送，配合UpdatePanel，可以实现无闪烁的页面定时更新（注意当Timer位于UpdatePanel之外时，要将Timer控件设定为UpdatePanel的异步更新触发器）。编程场景：聊天室是非常常见的一种Web应用，其编程的关键点在于页面的定时刷新。使用Timer控件和UpdatePanel，实现一个简单的聊天室变得非常简单，你能一展身手完成它吗？27275 功能强大的AJAX ControlToolKit2828AJAX CONTROLTOOLKIT简介AJAX ControlToolKit是由开源社区向广大ASP.NET开发者奉献的一组Web控件，基本涵盖了Web页面开发最需要使用的功能，使用方便。AJAX ControlToolKit建构于微软AJAX Extension之上，充分展示了AJAX技术的强大威力。可以访问以下网址获取最新版本：http:/ CONTROLTOOLKITAJAXControlToolKit的全部控件集中于AjaxControlToolkit.dll文件中，可以通过在Visual Studio工具箱上选择“选择项”命令将其中的控件放置到工具箱上。引例：实现圆角框Demo:RoundCornner.aspx3131ROUNDCORNNER的使用关键属性：1.TargetControlID：要变成圆角的Panel的ID2.Radius：决定圆角的大小3.Corners：设定哪几个角显示圆角3232从引例我们知道每个使用了AJAX ControlToolkit的页面都必须有一个ScriptManager。AJAX ControlToolkit控件都是一种“-extender”类型的控件，不能独立使用，必须与特定的ASP.NET控件配合使用。因此，每个AJAX ControlToolkit控件都有一个TargetControlID属性用于指定与它相关联的控件。3333再看更多的示例使用弹出式面板Demo:ModalPopup.aspx3434MODALPOPUP的使用ModalPopup用于显示一个弹出的模式对话框，它的关键属性有：1.TargetControlID:点击此控件显示弹出窗口2.PopupControlID:用作弹出窗口本身的Panel控件3.BackgroundCssClass:当弹出窗口弹出时，浏览器背景窗口的样式类4.OKControlID和CancelControlID:点击此属性指定的控件时会隐藏弹出窗口（不回发），同时运行由OnOkScript和OnCancelScript设定的JavaScript脚 本5.PopupDragHandlerControlID:用于拖动弹出窗口的控件3535示例的要点使用验证控件验证数据有效性。注意要让其EnableClientScript=“False”。注意复习GridView分页的方法。编程显示弹出窗口：ModalPopupExtender1.Show();要让弹出窗口支持拖动，需给元素加上id和runat=“server”标记，配上样式表，然后指定ModalPopup控件的PopupDragHandlerControlID属性。3636AJAX综合示例可以组合应用多个AJAX控件，以达到满意的效果。Demo:AutoCompleteAndDynamicPopulate.aspx3737自动完成AutoComplete动态生成DynamicPopulate示例要点使用Web Service实现数据信息的提取工作。（1）GetClientName：实现为页面静态方法（2）GetClientInfo：实现为独立的Web Service使用AutoCompleteExtender配合GetClientName实现自动完成功能。使用DynamicPopulateExtender配合GetClientInfo实现动态显示客户信息功能（此功能的触发采用JavaScript实现）3838这个例子很清晰地展示出了AJAX技术、ASP.NET和JavaScript如何完美地相互配合实现预期的目的。如何学习AJAX CONTROLTOOLKIT？AJAX ControlToolkit安装包中的SampleWeb项目展示了各种各样的控件的用法包括（源代码）。其官方网站上也有许多资料（包括视频）可供学习。国内已出版了多本书籍介绍，同学们可在课后继续进一步深入学习。39SampleWebSite示例网站展示了所有控件的用法