第九章使用Ajax改善用戶體驗（二）回顧與作業(yè)點評如何使用ScriptManager調用WebService？UpdatePanel的Triggers屬性有什么用？預習檢查AJAX框架包含哪些擴展控件？jQuery中，$()有什么用？本章任務實現(xiàn)奧運金牌榜實時刷新實現(xiàn)搜索欄的自動補全實現(xiàn)“貴美商城”注冊頁面的表單驗證本章目標會使用Timer和UpdatePanel實現(xiàn)實時刷新的Ajax應用掌握plete的使用會使用jQuery實現(xiàn)表單驗證會使用jQuery調用WebService核心組件——Timer控件Timer控件：間隔一定的時間自動刷新頁面，或完成特定的任務典型應用：Web時鐘、聊天室、人氣榜、電廠實時數(shù)據(jù)等<asp:TimerID="Timer1"runat="server"

Interval="1000"OnTick="Timer1_Tick"></asp:Timer>Interval：執(zhí)行Tick任務的間隔時間，單位是毫秒Timer控件示例實現(xiàn)奧運會金牌榜實時更新功能金牌數(shù)自動無刷新更新演示示例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秒練習——奧運金牌榜實時刷新需求說明：實現(xiàn)奧運金牌榜實時刷新功能完成時間：20分鐘共性問題集中講解常見調試問題及解決辦法代碼規(guī)范問題共性問題集中講解AJAX擴展控件AJAXControlToolkit自動完成功能無刷新的分組菜單折疊效果彈出模式窗口折疊面板選項卡……使用擴展控件下載控件工具包：AJAXControlToolkit添加對工具包的引用操作演示：添加對工具包的引用AJAX擴展控件簡介擴展控件說明plete根據(jù)用戶輸入的前幾個字母或漢字給出相關提示FilteredTextBox文本框過濾控件Accordion分組菜單折疊Calendar通過客戶端方法完善了刷新、焦點獲取、自動隱藏的日歷控件DropShadow實現(xiàn)各種陰影效果CascadingDropDown級聯(lián)下拉菜單CollapsiblePanel折疊面板DragPanel可自由拖拽的面板ModalPopup彈出“模式”窗口Tabs選項卡控件Rating分級控件Slider以滑塊的形式顯示數(shù)據(jù)plete控件plete控件用來實現(xiàn)自動完成功能，根據(jù)用戶輸入的前幾個字母或漢字給出相應的提示<pleteExtenderTargetControlID="txtKeyword"ServicePath="../MyWebService/MyWebService.asmx"ServiceMethod="GetHotSearchByKeyword"MinimumPrefixLength="1"EnableCaching="true"CompletionSetCount="10"ID="pleteExtender1"runat="server"></pleteExtender>要實現(xiàn)自動完成功能的控件IDWeb服務的路徑要使用的Web服務的方法用戶輸入多少個字母才出現(xiàn)提示效果是否啟用緩存提示數(shù)據(jù)的行數(shù)plete控件示例實現(xiàn)類似Google搜索建議的自動完成功能演示示例2：關鍵字搜索自動提示關鍵代碼回顧[System.Web.Script.Services.ScriptService]publicclassHotSearchKeyWords:System.Web.Services.WebService{publicHotSearchKeyWords(){}[WebMethod]publicstring[]GetHotSearchByKeywords(string

prefixText,int

count){//根據(jù)關鍵字和顯示行數(shù),返回查詢的結果

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>練習——實現(xiàn)自動完成功能需求說明：實現(xiàn)“第三波書店”搜索框自動提示功能，要求輸入一個字符開始提示完成時間：20分鐘共性問題集中講解常見調試問題及解決辦法代碼規(guī)范問題共性問題集中講解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實現(xiàn)演示示例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("名字中不能包含數(shù)字");}}/*姓氏的驗證*/ varlname=$("#lname").val();//省略其他驗證代碼

}獲取值的方法使用$(“#ID”)獲取DOM$()不僅僅簡化代碼，它還有很多神奇的用法jQuery的核心函數(shù)$()4-1$(expression,[context])選擇器

可選參數(shù)，文檔的上下文$("ul>li:first"，document.forms[0])jQuery的核心函數(shù)$()4-2$(html)HTML元素字符串$('<li>網(wǎng)頁編程</li>')jQuery的核心函數(shù)$()4-3$(elements)DOM對象$(document.forms[0])jQuery的核心函數(shù)$()4-4$(fn)回調函數(shù)$(function(){alert('歡迎使用jQuery');});//當打開頁面的時候，就會彈出提示框文檔內容載入完成后執(zhí)行，比load事件早執(zhí)行與$(document).ready(function())等效貴美商城注冊驗證貴美商城用戶注冊驗證使用jQuery實現(xiàn)(文本提示）演示示例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實現(xiàn)驗證需求說明：實現(xiàn)

“貴美商城”用戶注冊信息驗證文本提示名字、姓氏、密碼和Email不為空名字、姓氏不包含數(shù)字兩次輸入的密碼必須一致Email格式必須正確完成時間：20分鐘共性問題集中講解常見調試問題及解決辦法代碼規(guī)范問題共性問題集中講解jQuery中的Ajax函數(shù)$.ajax(options);$.ajax({type:"get",url:"",beforeSend:function(XMLHttpRequest){},success:function(data,textStatus){},complete:function(XMLHttpRequest,textStatus){},error:function(){}});對過程進行完整的控制ajax()的參數(shù)選項名

選項值類型

描述

urlString發(fā)送請求的地址(默認:當前頁地址)typeString請求方式(默認:"GET")timeoutNumber設置請求超時時間（毫秒）asyncBoolean設置是否為異步請求(默認:true)beforeSendFunction發(fā)送請求前調用completeFunction請求完成后回調函數(shù)contentTypeString發(fā)送信息至服務器時內容編碼類型dataObject,String發(fā)送到服務器的數(shù)據(jù)dataTypeString預期服務器返回的數(shù)據(jù)類型errorFunction請求失敗時將調用globalBoolean是否觸發(fā)全局Ajax事件。(默認:true)successFunction請求成功后調用DIY智能提示自動提示功能如何使用jQuery框架實現(xiàn)？DIY智能提示關鍵實現(xiàn)思路重用服務器端WebService使用jQuery調用WebServiceDOM編程動態(tài)構造提示效果演示示例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節(jié)點客戶端關鍵代碼$(function(){objOut