开发基于ajax和控件技术web应用系统

第九章使用Ajax改善用户体验（二）回顾与作业点评如何使用ScriptManager调用WebService？UpdatePanel的Triggers属性有什么用？预习检查AJAX框架包含哪些扩展控件？jQuery中，$()有什么用？本章任务实现奥运金牌榜实时刷新实现搜索栏的自动补全实现“贵美商城”注册页面的表单验证本章目标会使用Timer和UpdatePanel实现实时刷新的Ajax应用掌握plete的使用会使用jQuery实现表单验证会使用jQuery调用WebService核心组件——Timer控件Timer控件：间隔一定的时间自动刷新页面，或完成特定的任务典型应用：Web时钟、聊天室、人气榜、电厂实时数据等<asp:TimerID="Timer1"runat="server"

Interval="1000"OnTick="Timer1_Tick"></asp:Timer>Interval：执行Tick任务的间隔时间，单位是毫秒Timer控件示例实现奥运会金牌榜实时更新功能金牌数自动无刷新更新演示示例1：奥运会金牌榜关键代码回顾<asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><asp:TimerID="Timer1"runat="server"

Interval="1000"OnTick="Timer1_Tick"></asp:Timer>

<asp:UpdatePanelID=“UpdatePanel1”

runat="server"UpdateMode="Always"><ContentTemplate><asp:GridViewID="gvGoldsInfo"……</asp:GridView></ContentTemplate><Triggers>

<asp:AsyncPostBackTriggerControlID=“Timer1”

EventName="Tick"/></Triggers></asp:UpdatePanel>设置时间间隔为1秒练习——奥运金牌榜实时刷新需求说明：实现奥运金牌榜实时刷新功能完成时间：20分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解AJAX扩展控件AJAXControlToolkit自动完成功能无刷新的分组菜单折叠效果弹出模式窗口折叠面板选项卡……使用扩展控件下载控件工具包：AJAXControlToolkit添加对工具包的引用操作演示：添加对工具包的引用AJAX扩展控件简介扩展控件说明plete根据用户输入的前几个字母或汉字给出相关提示FilteredTextBox文本框过滤控件Accordion分组菜单折叠Calendar通过客户端方法完善了刷新、焦点获取、自动隐藏的日历控件DropShadow实现各种阴影效果CascadingDropDown级联下拉菜单CollapsiblePanel折叠面板DragPanel可自由拖拽的面板ModalPopup弹出“模式”窗口Tabs选项卡控件Rating分级控件Slider以滑块的形式显示数据plete控件plete控件用来实现自动完成功能，根据用户输入的前几个字母或汉字给出相应的提示<pleteExtenderTargetControlID="txtKeyword"ServicePath="../MyWebService/MyWebService.asmx"ServiceMethod="GetHotSearchByKeyword"MinimumPrefixLength="1"EnableCaching="true"CompletionSetCount="10"ID="pleteExtender1"runat="server"></pleteExtender>要实现自动完成功能的控件IDWeb服务的路径要使用的Web服务的方法用户输入多少个字母才出现提示效果是否启用缓存提示数据的行数plete控件示例实现类似Google搜索建议的自动完成功能演示示例2：关键字搜索自动提示关键代码回顾[System.Web.Script.Services.ScriptService]publicclassHotSearchKeyWords:System.Web.Services.WebService{publicHotSearchKeyWords(){}[WebMethod]publicstring[]GetHotSearchByKeywords(string

prefixText,int

count){//根据关键字和显示行数,返回查询的结果

returnnewSearchKeywordManager().GetHotSearchKeywords(prefixText,count);}}必须添加关键代码回顾<asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><asp:TextBoxID="search"runat="server"></asp:TextBox><pleteExtenderTargetControlID="search"ServicePath="MyWebService/HotSearchKeyWords.asmx"ServiceMethod="GetHotSearchByKeywords"MinimumPrefixLength="1"EnableCaching="true"CompletionSetCount="10"ID="pleteExtender1"runat="server"></pleteExtender>练习——实现自动完成功能需求说明：实现“第三波书店”搜索框自动提示功能，要求输入一个字符开始提示完成时间：20分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解jQuery的流行应用jQuery框架轻量级的库功能强大文档齐全、便于学习丰富的插件机制VisualStudio中使用jQuery框架VisualStudio2010集成了jQuery框架jQuery框架的文件jQuery框架包含的文件jquery-1.4.1.jsjQuery框架的源代码文件jquery-1.4.1.min.jsjQuery框架的源代码压缩文件jquery-1.4.1.vsdoc.js

jQuery

代码的智能感知描述文件贵美商城注册验证贵美商城用户注册验证使用jQuery实现演示示例3：贵美商城注册验证关键代码回顾

functioncheck(){/*名字的验证*/ varuser=$("#fname").val();if(user==""){alert("名字不能为空");returnfalse;}for(vari=0;i<user.length;i++){varj=user.substring(i,i+1)if(j>=0){alert("名字中不能包含数字");}}/*姓氏的验证*/ varlname=$("#lname").val();//省略其他验证代码

}获取值的方法使用$(“#ID”)获取DOM$()不仅仅简化代码，它还有很多神奇的用法jQuery的核心函数$()4-1$(expression,[context])选择器

可选参数，文档的上下文$("ul>li:first"，document.forms[0])jQuery的核心函数$()4-2$(html)HTML元素字符串$('<li>网页编程</li>')jQuery的核心函数$()4-3$(elements)DOM对象$(document.forms[0])jQuery的核心函数$()4-4$(fn)回调函数$(function(){alert('欢迎使用jQuery');});//当打开页面的时候，就会弹出提示框文档内容载入完成后执行，比load事件早执行与$(document).ready(function())等效贵美商城注册验证贵美商城用户注册验证使用jQuery实现(文本提示）演示示例4：贵美商城文本提示注册验证关键代码回顾$(functionInit(){$("#fname").bind("blur",checkFname);

......})

functionbuildSuggest(item,text){

$(item).parent()//父对象

//添加DOM元素

.append("<spanclass=\"red\">"+text+"</span>");}functioncheckFname(){//名字的验证varuser=$("#fname");//去除验证显示

$(".red",user.parent()).remove();

if(user.val()==""){buildSuggest(user,"名字不能为空");......将事件和方法绑定构造提示的DivjQuery对象移除DOM元素练习——使用jQuery实现验证需求说明：实现

“贵美商城”用户注册信息验证文本提示名字、姓氏、密码和Email不为空名字、姓氏不包含数字两次输入的密码必须一致Email格式必须正确完成时间：20分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解jQuery中的Ajax函数$.ajax(options);$.ajax({type:"get",url:"",beforeSend:function(XMLHttpRequest){},success:function(data,textStatus){},complete:function(XMLHttpRequest,textStatus){},error:function(){}});对过程进行完整的控制ajax()的参数选项名

选项值类型

描述

urlString发送请求的地址(默认:当前页地址)typeString请求方式(默认:"GET")timeoutNumber设置请求超时时间（毫秒）asyncBoolean设置是否为异步请求(默认:true)beforeSendFunction发送请求前调用completeFunction请求完成后回调函数contentTypeString发送信息至服务器时内容编码类型dataObject,String发送到服务器的数据dataTypeString预期服务器返回的数据类型errorFunction请求失败时将调用globalBoolean是否触发全局Ajax事件。(默认:true)successFunction请求成功后调用DIY智能提示自动提示功能如何使用jQuery框架实现？DIY智能提示关键实现思路重用服务器端WebService使用jQuery调用WebServiceDOM编程动态构造提示效果演示示例5：DIY智能提示jQuery调用WebService$.ajax({

type:"POST",

contentType:"application/x-www-form-urlencoded",

url:"MyWebService/HotSearchKeyWords.asmx/

GetHotSearchByKeywords",

data:"prefixText="+key+"&count=1",

success:function(e){

varsuggests=$("string",e.documentElement);

//DOM编程})返回的是XML客户端关键代码functionsetSuggest(key){$.ajax({......success:function(e){varsuggests=$("string",e.documentElement);if(suggests.length>0){//大于1个元素varhtml="";for(vari=0;i<suggests.length;i++){html+="<divonmouseover=\"this.className='selectedStyle'\""+"onmouseout=\"this.className=''\""+"onmousedown=\"document.getElementById('"

+objInputId+"').value="+"'"+suggests.eq(i).text()+"';window.focus();\">"+suggests.eq(i).text()+"</div>";}objOuter.html(html);objOuter.css("display","block");}else{objOuter.css("display","none");......}构造提示DOM获取XML中的string节点客户端关键代码$(function(){objOut