開發(fā)基于ajax和控件技術(shù)web應(yīng)用系統(tǒng)

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

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

prefixText,int

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

returnnewSearchKeywordManager().GetHotSearchKeywords(prefixText,count);}}必須添加關(guān)鍵代碼回顧<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>練習(xí)——實(shí)現(xiàn)自動(dòng)完成功能需求說明：實(shí)現(xiàn)“第三波書店”搜索框自動(dòng)提示功能，要求輸入一個(gè)字符開始提示完成時(shí)間：20分鐘共性問題集中講解常見調(diào)試問題及解決辦法代碼規(guī)范問題共性問題集中講解jQuery的流行應(yīng)用jQuery框架輕量級(jí)的庫功能強(qiáng)大文檔齊全、便于學(xué)習(xí)豐富的插件機(jī)制VisualStudio中使用jQuery框架VisualStudio2010集成了jQuery框架jQuery框架的文件jQuery框架包含的文件jquery-1.4.1.jsjQuery框架的源代碼文件jquery-1.4.1.min.jsjQuery框架的源代碼壓縮文件jquery-1.4.1.vsdoc.js

jQuery

代碼的智能感知描述文件貴美商城注冊(cè)驗(yàn)證貴美商城用戶注冊(cè)驗(yàn)證使用jQuery實(shí)現(xiàn)演示示例3：貴美商城注冊(cè)驗(yàn)證關(guān)鍵代碼回顧

functioncheck(){/*名字的驗(yàn)證*/ 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ù)字");}}/*姓氏的驗(yàn)證*/ varlname=$("#lname").val();//省略其他驗(yàn)證代碼

}獲取值的方法使用$(“#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對(duì)象$(document.forms[0])jQuery的核心函數(shù)$()4-4$(fn)回調(diào)函數(shù)$(function(){alert('歡迎使用jQuery');});//當(dāng)打開頁面的時(shí)候，就會(huì)彈出提示框文檔內(nèi)容載入完成后執(zhí)行，比load事件早執(zhí)行與$(document).ready(function())等效貴美商城注冊(cè)驗(yàn)證貴美商城用戶注冊(cè)驗(yàn)證使用jQuery實(shí)現(xiàn)(文本提示）演示示例4：貴美商城文本提示注冊(cè)驗(yàn)證關(guān)鍵代碼回顧$(functionInit(){$("#fname").bind("blur",checkFname);

......})

functionbuildSuggest(item,text){

$(item).parent()//父對(duì)象

//添加DOM元素

.append("<spanclass=\"red\">"+text+"</span>");}functioncheckFname(){//名字的驗(yàn)證varuser=$("#fname");//去除驗(yàn)證顯示

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

if(user.val()==""){buildSuggest(user,"名字不能為空");......將事件和方法綁定構(gòu)造提示的DivjQuery對(duì)象移除DOM元素練習(xí)——使用jQuery實(shí)現(xiàn)驗(yàn)證需求說明：實(shí)現(xiàn)

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

選項(xiàng)值類型

描述

urlString發(fā)送請(qǐng)求的地址(默認(rèn):當(dāng)前頁地址)typeString請(qǐng)求方式(默認(rèn):"GET")timeoutNumber設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）asyncBoolean設(shè)置是否為異步請(qǐng)求(默認(rèn):true)beforeSendFunction發(fā)送請(qǐng)求前調(diào)用completeFunction請(qǐng)求完成后回調(diào)函數(shù)contentTypeString發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類型dataObject,String發(fā)送到服務(wù)器的數(shù)據(jù)dataTypeString預(yù)期服務(wù)器返回的數(shù)據(jù)類型errorFunction請(qǐng)求失敗時(shí)將調(diào)用globalBoolean是否觸發(fā)全局Ajax事件。(默認(rèn):true)successFunction請(qǐng)求成功后調(diào)用DIY智能提示自動(dòng)提示功能如何使用jQuery框架實(shí)現(xiàn)？DIY智能提示關(guān)鍵實(shí)現(xiàn)思路重用服務(wù)器端WebService使用jQuery調(diào)用WebServiceDOM編程動(dòng)態(tài)構(gòu)造提示效果演示示例5：DIY智能提示jQuery調(diào)用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客戶端關(guān)鍵代碼functionsetSuggest(key){$.ajax({......success:function(e){varsuggests=$("string",e.documentElement);if(suggests.length>0){//大于1個(gè)元素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");......}構(gòu)造提示DOM獲取XML中的string節(jié)點(diǎn)客戶端關(guān)鍵代碼$(function(){objOut