《Ajax教程之一》由会员分享，可在线阅读，更多相关《Ajax教程之一（38页珍藏版）》请在金锄头文库上搜索。
1、第第第第二章二章二章二章用用用用AJAXAJAX改善用户体验（一）改善用户体验（一）改善用户体验（一）改善用户体验（一）2021/8/21简单描述简单描述 JAVA 中实现无刷新验证用户名是否存在的工作中实现无刷新验证用户名是否存在的工作原理？原理？AJAX 的核心技术是什么？的核心技术是什么？回顾回顾2021/8/22预习检查预习检查ASP.NET AJAX 有哪些常用核心组件？有哪些常用核心组件？AutoComplete 控件可以实现什么功能？控件可以实现什么功能？2021/8/23本章任务本章任务使用使用 ASP.NET AJAX 核心组件实现无刷新和局部更新效果核心组件实现无刷新和局部
2、更新效果使用使用 AutoComplete 控件实现自动完成功能控件实现自动完成功能2021/8/24本章目标本章目标掌握掌握 ASP.NET AJAX 框架技术核心组件框架技术核心组件掌握掌握 AutoComplete 控件的使用控件的使用2021/8/25AJAX概述概述AJAX的典型应用的典型应用AJAX 在在 Google Suggest 中的应用（智能提示）中的应用（智能提示）AJAX 在在 GoogleMaps 中的应用中的应用（图像显示几乎没有延迟）（图像显示几乎没有延迟）观看搜索建议效果观看搜索建议效果观看观看Google地图效果地图效果2021/8/26AJAX组成原理组成原
3、理AJAX是：是：JavaScript、CSS、DOM、XmlHttpRequest四种四种技术的集合体，主要应用于异步获取后台数据和局部刷新。技术的集合体，主要应用于异步获取后台数据和局部刷新。CSSDOM服务器服务器服务器服务器2021/8/27ASP.NET AJAX框架技术框架技术ASP.NET AJAX 框架把复杂脚本封装成控件，大大提框架把复杂脚本封装成控件，大大提高了开发效率高了开发效率ASP.NET AJAX 框架主要包括：框架主要包括：核心组件、工具包、增值组件、示例代码以及框架类库核心组件、工具包、增值组件、示例代码以及框架类库5部分部分2021/8/28ASP.NET A
4、JAX安装安装下载安装：下载安装：ASP.NET 2.0 AJAX Extensions 1.0 安装包安装包安装后当我们新建网站的时候会出现安装后当我们新建网站的时候会出现A AJAX-Enabled Web Site模板模板ASP.NET AJAX模板模板ASP.NET AJAX核心组件核心组件观看安装观看安装ASP.NET AJAX视频视频2021/8/29ASP.NET AJAX核心组件简介核心组件简介 ASP.NET AJAX核心组件主要包括：核心组件主要包括：ScriptManager全局脚本控制器全局脚本控制器UpdatePanel更新面板更新面板UpdateProgressTi
5、mer时钟控件时钟控件ScriptManagerProxy2021/8/210ScriptManager控件控件ScriptManager 控件控件全局脚本控制器全局脚本控制器每个每个 AJAX 程序都必须包括此控件，并且只有一个程序都必须包括此控件，并且只有一个ScriptManager控件声明语法控件声明语法2021/8/211UpdatePanel控件控件 UpdatePanel 控件控件更新面板更新面板用来实现无刷新效果用来实现无刷新效果只需把需要更新的部分放在该控件内容模板中即可只需把需要更新的部分放在该控件内容模板中即可UpdatePanel控件声明语法控件声明语法表示采用何种方式
6、来获取服务器端的资源它表示采用何种方式来获取服务器端的资源它包括包括Always和和Conditional两种模式两种模式Always：每次请求时无条件刷新面板内容：每次请求时无条件刷新面板内容Conditional：有触发条件的更新：有触发条件的更新UpdatePanel还有两个重要的子元素：还有两个重要的子元素：内容模板，类似：内容模板，类似GridView等控件的模板列等控件的模板列：相当于触发器，只有满足条件后才更新：相当于触发器，只有满足条件后才更新2021/8/212使用使用UpdatePanel控件实现无刷新效果控件实现无刷新效果更改为更改为“60000.0000”点点“刷新刷新
7、”按钮，实现数据无刷新更新按钮，实现数据无刷新更新我们以用我们以用 GridView 显示显示 MyBank 数据库中数据库中Accounts 表的数据信息为例表的数据信息为例2021/8/213使用使用UpdatePanel控件实现无刷新效果控件实现无刷新效果把需要更新的内容放在把需要更新的内容放在UpdatePanel内容模板中内容模板中 把需要更新的部分放在内容模板中把需要更新的部分放在内容模板中关键关键HTML代码代码后台关键代码后台关键代码2021/8/214UpdatePanel 控件的控件的 Triggers属性属性Triggers属性：表示只有当定义的触发条件满足后才更新属性：
8、表示只有当定义的触发条件满足后才更新面板中的内容面板中的内容我们先来做一个实验我们先来做一个实验实现如图所示的无刷新效果实现如图所示的无刷新效果实现这个功能非常简单实现这个功能非常简单2021/8/215UpdatePanel 控件的控件的 Triggers属性属性把要更新的内容把要更新的内容放在内容模板中放在内容模板中 把需要更新的部分放在内容模板中把需要更新的部分放在内容模板中关键关键HTML代码代码 protected void btnInOutpanel_Click(object sender, EventArgs e) lblDateTimeInPanel.Text = DateTi
9、me.Now.ToString(); 后台关键代码后台关键代码2021/8/216UpdatePanel 控件的控件的 Triggers属性属性点点“显示当前时间显示当前时间”按钮，页面被刷新按钮，页面被刷新如果我们把按钮放如果我们把按钮放在在UpdatePanel外外如何让如何让UpdatePanel外的外的按钮实现无刷新效果？按钮实现无刷新效果？2021/8/217UpdatePanel 控件的控件的 Triggers属性属性把要更新的内容把要更新的内容放在内容模板中放在内容模板中 只要添加只要添加Triggers属性即可属性即可实现无刷新效果实现无刷新效果2021/8/218Update
10、Progress控件控件 UpdateProgress控件：控件：用来在更新过程中给出提示用来在更新过程中给出提示可以起到类似进度条的功能可以起到类似进度条的功能等待中的友情提示等待中的友情提示2021/8/219UpdateProgress控件控件 模仿校友录，实现登录提示和局部刷新效果：模仿校友录，实现登录提示和局部刷新效果：出现等待友情提示出现等待友情提示实现登录部分局部刷新效果实现登录部分局部刷新效果2021/8/220UpdateProgress控件控件 protected void imgBtnLogin_Click(object sender, ImageClickEventAr
11、gs e) div1.Style.Add(display, none); System.Threading.Thread.Sleep(2000); div2.Style.Add(display, block); 后台关键代码后台关键代码 正在加载数据正在加载数据,请稍候请稍候. UpdatePanel控件声明代码控件声明代码HTML关键代码关键代码2021/8/221Timer控件控件 Timer 控件：控件：间隔一定的时间自动刷新页面，或完成特定的任务间隔一定的时间自动刷新页面，或完成特定的任务典型应用：典型应用：Web时钟、聊天室、时钟、聊天室、“超女超女”人气榜、电厂实时数据人气榜、电厂
12、实时数据等等 Timer 控件声明代码控件声明代码Interval：表示执行：表示执行Tick任务的间隔时间，任务的间隔时间，单位是毫秒单位是毫秒2021/8/222Timer控件控件 实现奥运会金牌榜实时更新功能实现奥运会金牌榜实时更新功能金牌数由金牌数由“35”变成变成“36”金牌数自动无刷新更新金牌数自动无刷新更新2021/8/223Timer控件控件 实现奥运会金牌榜自动无刷新更新数据功能实现奥运会金牌榜自动无刷新更新数据功能在在MyAjaxTest数据库中数据库中添加新表添加新表OlympicGolds金牌榜页面布局金牌榜页面布局2021/8/224Timer控件控件 asp:Gri
13、dView ID=gvGoldsInfo 关键关键HTML代码代码设置时间间隔为设置时间间隔为1秒秒protected void Page_Load(object sender, EventArgs e) if (!Page.IsPostBack) DisplayGoldsInfo(); protected void DisplayGoldsInfo() . gvGoldsInfo.DataSource = ds; gvGoldsInfo.DataBind();protected void Timer1_Tick(object sender, EventArgs e) DisplayGolds
14、Info(); 关键后台代码关键后台代码2021/8/225ASP.NET AJAX扩展控件扩展控件ASP.NET AJAX 还提供了许多扩展控件，丰富了还提供了许多扩展控件，丰富了AJAX页页面效果，使用简单方便面效果，使用简单方便可以实现自动完成功能可以实现自动完成功能分组菜单折叠效果分组菜单折叠效果弹出模式窗口弹出模式窗口2021/8/226ASP.NET AJAX扩展控件扩展控件添加添加ASP.NET AJAX扩展控件过程演示扩展控件过程演示使用使用ASP.NET AJAX扩展控件，需要：扩展控件，需要：下载控件工具包：下载控件工具包：ASP.NET AJAX Control Tool
15、kit 添加对工具包的引用添加对工具包的引用2021/8/227ASP.NET AJAX扩展控件简介扩展控件简介扩展控件扩展控件说明说明AutoComplete根据用户输入的前几个字母或汉字给出相关提示根据用户输入的前几个字母或汉字给出相关提示FilteredTextBox文本框文本框过滤控件控件Accordion分组菜单折叠分组菜单折叠Calendar通过客户端方法完善了刷新、焦点获取、自动隐藏的日历通过客户端方法完善了刷新、焦点获取、自动隐藏的日历控件控件DropShadow实现各种阴影效果实现各种阴影效果CascadingDropDown级联下拉菜单级联下拉菜单CollapsiblePa
16、nel折叠面板折叠面板DragPanel可自由拖拽的面板可自由拖拽的面板ModalPopup弹出弹出“模式模式”窗口窗口Tabs选项卡控件选项卡控件Rating分级控件分级控件Slider以滑块的形式显示数据以滑块的形式显示数据2021/8/228添加关键字搜索自动完成功能添加关键字搜索自动完成功能用用 AutoComplete 控件来实现类似控件来实现类似 Google 搜索建议的自搜索建议的自动完成功能动完成功能 关键字关键字SearchKeywords表数据信息表数据信息实现关键字搜索自动完成功能实现关键字搜索自动完成功能2021/8/229添加添加ASP.NET AJAX效果效果如何在
17、不使用如何在不使用ASP.NET AJAX模板的项目中添加模板的项目中添加AJAX效效果呢？果呢？下面我们就在下面我们就在MyBookShop项目中使用项目中使用AutoCompleteExtender 控件，实现自动完成功能控件，实现自动完成功能对比使用对比使用“A AJAX-Enabled Web Site”模板和没有使用模板的页面的模板和没有使用模板的页面的Web.Config文件文件没有使用模板的没有使用模板的Web.Config文件文件使用模板的使用模板的Web.Config文件文件拷贝使用拷贝使用AJAX模板的模板的Web.Config文件的相关文件的相关属性节到不使用模板的属性节
18、到不使用模板的Web.Config中即可中即可2021/8/230AutoComplete 控件简介控件简介 AutoComplete控件简介：控件简介：用来实现自动完成功能，根据用户输入的前几个字母或汉字给出用来实现自动完成功能，根据用户输入的前几个字母或汉字给出相应的提示相应的提示 AutoComplete控件声明语法控件声明语法 属性名称属性名称 说说 明明TargetControlID要实现自动完成功能的控件要实现自动完成功能的控件IDServicePathWeb 服务的路径服务的路径ServiceMethod要使用的要使用的 Web 服务的方法服务的方法MinimumPrefixLe
19、ngth用户输入多少个字母才出现提示效果用户输入多少个字母才出现提示效果EnableCaching是否启用缓存是否启用缓存CompletionSetCount提示数据的行数提示数据的行数这里需要一个这里需要一个Web Service文件文件2021/8/231创建创建Web Service在在MyBookShop项目项目MyWebService文件夹下添加文件夹下添加MyWebService.asmx文件文件System.Web.Script.Services.ScriptService()添加此特性，方可在客户端引用添加此特性，方可在客户端引用 Web 服务服务2021/8/232创建创建W
20、eb ServiceWebMethodpublic string GetHotSearchByKeywords(string prefixText, int count) return SearchKeywordManager.GetHotSearchKeywords(prefixText,count); 修改修改Web Service方法，实现根据输入关方法，实现根据输入关键字前缀，查找搜索次数前键字前缀，查找搜索次数前10名的关键字名的关键字数据库数据信息数据库数据信息输入测试数据，以便查看方法返回的结果输入测试数据，以便查看方法返回的结果得到得到GetHotSearchByKeyword
21、方法的返回结果方法的返回结果2021/8/233实现自动完成功能实现自动完成功能添加添加AutoComplete控件的母版页布局控件的母版页布局关键关键HTML代码代码2021/8/234实现关键字搜索自动完成功能实现关键字搜索自动完成功能实现自动完成功能实现自动完成功能2021/8/235总结总结简述简述AJAX整合原理。整合原理。 ASP.NET AJAX 运行环境有什么要求？运行环境有什么要求？ASP.NET AJAX 有哪些核心组件？有哪些核心组件？AutoCompleteExtender控件的控件的ServicePath、 ServiceMethod、MinimumPrefixLength属性各表示什么属性各表示什么意思？意思？用用AJAX调用调用Web Service，需要特别添加什么属性？，需要特别添加什么属性？2021/8/236Thank you2021/8/237部分资料从网络收集整理而来，供大家参考，感谢您的关注！
