《Ajax教程之一》PPT课件

第二章,用AJAX改善用户体验（一）,简单描述JAVA中实现无刷新验证用户名是否存在的工作原理？AJAX的核心技术是什么？,回顾,预习检查,ASP.NETAJAX有哪些常用核心组件？AutoComplete控件可以实现什么功能？,本章任务,使用ASP.NETAJAX核心组件实现无刷新和局部更新效果使用AutoComplete控件实现自动完成功能,本章目标,掌握ASP.NETAJAX框架技术核心组件掌握AutoComplete控件的使用,AJAX概述,AJAX的典型应用,AJAX在GoogleSuggest中的应用（智能提示）,AJAX在GoogleMaps中的应用（图像显示几乎没有延迟）,观看搜索建议效果,观看Google地图效果,AJAX组成原理,AJAX是：JavaScript、CSS、DOM、XmlHttpRequest四种技术的集合体，主要应用于异步获取后台数据和局部刷新。,XmlHttpRequest,JavaScript,CSS,DOM,服务器,ASP.NETAJAX框架技术,ASP.NETAJAX框架把复杂脚本封装成控件，大大提高了开发效率ASP.NETAJAX框架主要包括：核心组件、工具包、增值组件、示例代码以及框架类库5部分,ASP.NETAJAX安装,下载安装：ASP.NET2.0AJAXExtensions1.0安装包安装后当我们新建网站的时候会出现AAJAX-EnabledWebSite模板,ASP.NETAJAX模板,ASP.NETAJAX核心组件,观看安装ASP.NETAJAX视频,ASP.NETAJAX核心组件简介,ASP.NETAJAX核心组件主要包括：ScriptManager全局脚本控制器UpdatePanel更新面板UpdateProgressTimer时钟控件ScriptManagerProxy,ScriptManager控件,ScriptManager控件全局脚本控制器每个AJAX程序都必须包括此控件，并且只有一个,ScriptManager控件声明语法,UpdatePanel控件,UpdatePanel控件更新面板用来实现无刷新效果只需把需要更新的部分放在该控件内容模板中即可,UpdatePanel控件声明语法,表示采用何种方式来获取服务器端的资源它包括Always和Conditional两种模式,Always：每次请求时无条件刷新面板内容Conditional：有触发条件的更新,UpdatePanel还有两个重要的子元素：内容模板，类似GridView等控件的模板列：相当于触发器，只有满足条件后才更新,使用UpdatePanel控件实现无刷新效果,更改为“60000.0000”,点“刷新”按钮，实现数据无刷新更新,我们以用GridView显示MyBank数据库中Accounts表的数据信息为例,使用UpdatePanel控件实现无刷新效果,把需要更新的内容放在UpdatePanel内容模板中,把需要更新的部分放在内容模板中,关键HTML代码,后台关键代码,UpdatePanel控件的Triggers属性,Triggers属性：表示只有当定义的触发条件满足后才更新面板中的内容,我们先来做一个实验,实现如图所示的无刷新效果,实现这个功能非常简单,UpdatePanel控件的Triggers属性,把要更新的内容放在内容模板中,把需要更新的部分放在内容模板中,关键HTML代码,protectedvoidbtnInOutpanel_Click(objectsender,EventArgse)lblDateTimeInPanel.Text=DateTime.Now.ToString();,后台关键代码,UpdatePanel控件的Triggers属性,点“显示当前时间”按钮，页面被刷新,如果我们把按钮放在UpdatePanel外,如何让UpdatePanel外的按钮实现无刷新效果？,UpdatePanel控件的Triggers属性,把要更新的内容放在内容模板中,只要添加Triggers属性即可,实现无刷新效果,UpdateProgress控件,UpdateProgress控件：用来在更新过程中给出提示可以起到类似进度条的功能,等待中的友情提示,UpdateProgress控件,模仿校友录，实现登录提示和局部刷新效果：,出现等待友情提示,实现登录部分局部刷新效果,UpdateProgress控件,protectedvoidimgBtnLogin_Click(objectsender,ImageClickEventArgse)div1.Style.Add(display,none);System.Threading.Thread.Sleep(2000);div2.Style.Add(display,block);,后台关键代码,正在加载数据,请稍候.,UpdatePanel控件声明代码,HTML关键代码,Timer控件,Timer控件：间隔一定的时间自动刷新页面，或完成特定的任务典型应用：Web时钟、聊天室、“超女”人气榜、电厂实时数据等,Timer控件声明代码,Interval：表示执行Tick任务的间隔时间，单位是毫秒,Timer控件,实现奥运会金牌榜实时更新功能,金牌数由“35”变成“36”,金牌数自动无刷新更新,Timer控件,实现奥运会金牌榜自动无刷新更新数据功能,在MyAjaxTest数据库中添加新表OlympicGolds,金牌榜页面布局,Timer控件,关键HTML代码,设置时间间隔为1秒,protectedvoidPage_Load(objectsender,EventArgse)if(!Page.IsPostBack)DisplayGoldsInfo();protectedvoidDisplayGoldsInfo().gvGoldsInfo.DataSource=ds;gvGoldsInfo.DataBind();protectedvoidTimer1_Tick(objectsender,EventArgse)DisplayGoldsInfo();,关键后台代码,ASP.NETAJAX扩展控件,ASP.NETAJAX还提供了许多扩展控件，丰富了AJAX页面效果，使用简单方便,可以实现自动完成功能,分组菜单折叠效果,弹出模式窗口,ASP.NETAJAX扩展控件,添加ASP.NETAJAX扩展控件过程演示,使用ASP.NETAJAX扩展控件，需要：下载控件工具包：ASP.NETAJAXControlToolkit添加对工具包的引用,ASP.NETAJAX扩展控件简介,添加关键字搜索自动完成功能,用AutoComplete控件来实现类似Google搜索建议的自动完成功能,关键字SearchKeywords表数据信息,实现关键字搜索自动完成功能,添加ASP.NETAJAX效果,如何在不使用ASP.NETAJAX模板的项目中添加AJAX效果呢？下面我们就在MyBookShop项目中使用AutoCompleteExtender控件，实现自动完成功能,对比使用“AAJAX-EnabledWebSite”模板和没有使用模板的页面的Web.Config文件,没有使用模板的Web.Config文件,使用模板的Web.Config文件,拷贝使用AJAX模板的Web.Config文件的相关属性节到不使用模板的Web.Config中即可,AutoComplete控件简介,AutoComplete控件简介：用来实现自动完成功能，根据用户输入的前几个字母或汉字给出相应的提示,AutoComplete控件声明语法,这里需要一个WebService文件,创建WebService,在MyBookShop项目MyWebService文件夹下添加MyWebService.asmx文件,System.Web.Script.Services.ScriptService(),添加此特性，方可在客户端引用Web服务,创建WebService,WebMethodpublicstringGetHotSearchByKeywords(stringprefixText,intcount)returnSearchKeywordManager.GetHotSearchKeywords(prefixText,count);,修改WebService方法，实现根据输入关键字前缀，查找搜索次数前10名的关键字,数据库数据信息,输入测试数据，以便查看方法返回的结果,得到GetHotSearchByKeyword方法的返回结果,实现自动完成功能,添加AutoComplete控件的母版页布局,关键HTML代码,实现关键