Ajax组件改进客户体验.pptVIP

主题 使用Ajax改善用户体验 本节目标 理解ASP.NET AJAX框架各个组成部分的功能 会使用ScriptManager注册脚本和Web Service 会使用UpdatePanel实现局部刷新效果 会使用UpdateProgress实现局部刷新等待效果 为什么需要Ajax 框架 主要的缺点： 重复性的工作 手工编写代码量大、容易出错 要考虑兼容浏览器 常见的AJAX框架 jQuery Mootools Dojo ExtJS ASP.NET AJAX 框架 Microsoft 的杰作 和ASP.NET 技术完美结合 可视化的Ajax技术（支持控件） ASP.NET AJAX框架技术 ASP.NET AJAX 框架的组成 ASP.NET AJAX核心组件简介 ASP.NET AJAX核心组件主要包括： ScriptManager：全局脚本控制器 UpdatePanel：更新面板 Timer：时钟控件 UpdateProgress：等待提示控件 ScriptManagerProxy： 全局脚本控制代理控件 ScriptManager控件 ScriptManager 控件——全局脚本控制器 客户端代码 使用ScriptManager后页面中的脚本 ScriptManager 用法一注册脚本 使用ScriptManager 注册脚本 ScriptManager 用法一调用WebService 使用 ScriptManager调用WebService 基本步骤： 1、创建Web Service 2、使用 ScriptManager注册 Web Service 3、使用 JavaScript 调用Web Service 关键代码回顾 实现Web Service 使用ScriptManager 注册WebService 在页面中调用WebService 使用ScriptManager的要求 ScriptManager 的使用要求 每个页面都必须包括此控件 每个页面只能有一个ScriptManger 必须放在其它ASP.NET AJAX 组件前面 ScriptManagerProxy 使用ScriptManagerProxy 可代替ScriptManager的某些作用，如注册 脚本或Web Service等 UpdatePanel 控件 UpdatePanel 控件——更新面板 用来实现无刷新效果 只需把需要更新的部分放在该控件内容模板中即可 实现页面无刷新 如何实现无刷新的图书列表显示？ 关键代码回顾 Triggers属性 Triggers属性：只有当定义的触发条件满足后才更新 关键代码回顾 “第三波书店”书籍评论功能 如何实现“第三波书店”评论功能的无刷新效果？ 注册脚本的方式 使用UpdatePanel 时注册脚本的方法 UpdateProgress控件 UpdateProgress控件： 用来在更新过程中给出提示 可以起到类似进度条的功能 UpdateProgress控件示例 怎样为评论功能实现“等待”效果 ？ 关键代码回顾 * * 手写Ajax 代码有什么缺点？ asp:ScriptManager ID=ScriptManager1 runat=server /asp:ScriptManager 操作演示：使用ScriptManager script src=/AjaxTest/ScriptResource.axd?d=t82UozELRU2awXiDl- A5OXdQttVZloeUFx_ZdjVFcLFg3MUGxPrfw5BxLDiAmRNioa39_mftDURbltdDIfHDu60Y4l614cQhBsBRESC9lUavT9AKlsXgsxKIEzG9gQu0amp;t=16ab2387 type=text/javascript /script script type=text/javascript //![CDATA[ Sys.WebForms.PageRequestManager._initialize( ScriptManager1, form1, [], [], [], 90, ); //]] /script 初始化客户端脚本控制器 引用Ajax Library 中的脚本 asp:ScriptManager ID=ScriptManager1 runat=server Scripts asp:ScriptReference Path=a.js / asp:ScriptReference Path=b.js