XML與WEB Service技術(shù)(微軟)：第07章 ASP.NET AJAX

1、第7章ASP.NET AJAX08 七月 20222Ch7 ASP.NET AJAX7.1 基本概念7.2 內(nèi)置的ASP.NET AJAX擴(kuò)展控件7.3 AJAX控件工具包08 七月 202237.1 基本概念A(yù)jaxajax是“Asynchronous Javascript And Xml”的簡(jiǎn)寫，是綜合HTTP異步通信、JavaScript、XML以及JSON等多種網(wǎng)絡(luò)技術(shù)的一種編程模型。ASP.NET AJAX基于Microsoft Ajax技術(shù)的Web應(yīng)用程序架構(gòu)由兩種解決方案組成，一種是僅客戶端解決方案，另一種是客戶端與服務(wù)器解決方案。08 七月 202247.1 基本概念ajax的

2、主要內(nèi)容（1）使用HTML、XHTML以及 CSS來表示和控制頁(yè)面元素信息。（2）使用JavaScript操作DOM。（3）使用XML、XSLT（Extensible Stylesheet Language Transformations）以及JSON進(jìn)行數(shù)據(jù)交換及相關(guān)操作。（4）使用XmlHttpRequest對(duì)象與Web服務(wù)器進(jìn)行異步數(shù)據(jù)交換。（5）使用JavaScript將以上各部分內(nèi)容綁定在一起。08 七月 202257.1 基本概念ajax的基本原理 當(dāng)用戶與瀏覽器中的頁(yè)面進(jìn)行交互時(shí)，會(huì)觸發(fā)頁(yè)面元素對(duì)象的響應(yīng)事件，客戶端捕獲相應(yīng)的事件后，如果需要提交給服務(wù)器進(jìn)行處理，客戶端就將要處理

3、的數(shù)據(jù)（包括狀態(tài)描述）轉(zhuǎn)換為XML或JSON格式的字符串，再利用異步傳送方式將這些數(shù)據(jù)提交給服務(wù)器；服務(wù)器進(jìn)行處理后，同樣利用XML或JSON格式和異步傳送方式將處理結(jié)果返回給客戶端；客戶端再?gòu)姆祷亟Y(jié)果中提取需要的部分，并將提取的部分利用JavaScript對(duì)網(wǎng)頁(yè)進(jìn)行“悄悄地”局部更新，而不是刷新整個(gè)頁(yè)面。08 七月 202267.1 基本概念ajax的優(yōu)點(diǎn)（1）頁(yè)面局部刷新。在讀取數(shù)據(jù)的過程中，用戶所面對(duì)的不是白屏，而是原來的頁(yè)面狀態(tài)，或者正在更新的信息提示狀態(tài)，只有當(dāng)接收到全部數(shù)據(jù)后才更新相應(yīng)部分的內(nèi)容，而這種更新也是瞬間的，用戶幾乎感覺不到。（2）把一些由服務(wù)器承擔(dān)的工作轉(zhuǎn)移到客戶端處理

4、，這樣可以充分利用客戶端閑置的處理能力，減輕服務(wù)器和網(wǎng)絡(luò)傳輸?shù)呢?fù)擔(dān)。（3）使用基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要安裝插件即可運(yùn)行。（4）使Web中的界面與應(yīng)用分離，也可以說是數(shù)據(jù)與呈現(xiàn)分離。08 七月 202277.1 基本概念A(yù)SP.NET AJAX 基于Microsoft Ajax技術(shù)的Web應(yīng)用程序架構(gòu)由兩種解決方案組成，一種是僅客戶端解決方案，另一種是客戶端與服務(wù)器解決方案。內(nèi)容如下：1使用客戶端腳本創(chuàng)建ajax風(fēng)格的應(yīng)用程序2集成客戶端腳本和ASP.NET3如何用ASP.NET AJAX開發(fā)Web應(yīng)用程序08 七月 202287.2 內(nèi)置的ASP.NET AJAX擴(kuò)展控件Scri

5、ptManager控件 ScriptManager控件是ASP.NET AJAX的核心，用來實(shí)現(xiàn)頁(yè)面上的所有服務(wù)器控件的ajax功能以及自動(dòng)管理所有的客戶端腳本庫(kù)。 一個(gè)頁(yè)面中只能包含一個(gè)ScriptManager控件，而且該控件必須聲明在form標(biāo)記內(nèi)。 ScriptManager控件的基本用法是，直接將該控件從工具箱中拖放到頁(yè)面的form標(biāo)記內(nèi)即可。08 七月 202297.2 內(nèi)置的ASP.NET AJAX擴(kuò)展控件UpdatePanel控件UpdatePanel控件是實(shí)現(xiàn)頁(yè)面局部更新的容器，當(dāng)客戶端向服務(wù)器首次發(fā)送請(qǐng)求時(shí)，服務(wù)器返回整個(gè)頁(yè)面，其他情況均通過異步回傳方式實(shí)現(xiàn)頁(yè)面的局部更新。

6、1ContentTemplate屬性2Triggers屬性3UpdateMode屬性和ChildrenAsTriggers屬性 【例8-1】演示UpdatePanel的基本用法。08 七月 2022107.2 內(nèi)置的ASP.NET AJAX擴(kuò)展控件UpdateProgress控件 UpdateProgress控件一般與UpdatePanel控件聯(lián)合使用，在UpdatePanel頁(yè)面內(nèi)容進(jìn)行異步更新過程中顯示提示信息。這些提示信息可以是一段文字，也可以是傳統(tǒng)的進(jìn)度條提示，還可以是各種動(dòng)畫提示。當(dāng)異步更新完成時(shí)，提示信息自動(dòng)消失。如果UpdatePanel頁(yè)面內(nèi)容更新處理耗時(shí)太長(zhǎng)，還可以提供一個(gè)選

7、項(xiàng)讓用戶來取消頁(yè)面更新。1AssociatedUpdatePanelID屬性2ProgressTemplate屬性3DynamicLayout屬性【例8-2】演示UpdateProgress控件的基本用法。08 七月 2022117.2 內(nèi)置的ASP.NET AJAX擴(kuò)展控件Timer控件Timer控件用于通過異步方式在服務(wù)器端定時(shí)執(zhí)行某些功能。通過它的Interval屬性和OnTick事件，可以指定觸發(fā)的時(shí)間間隔和觸發(fā)的事件，從而實(shí)現(xiàn)局部頁(yè)面定時(shí)更新、圖片自動(dòng)播放、廣告自動(dòng)顯示和關(guān)閉以及超時(shí)自動(dòng)退出登錄等功能。1常用的基本屬性（1）Interval屬性（2）Enabled屬性2常用的基本事件

8、：Tick事件【例8-3】演示Timer控件實(shí)現(xiàn)頁(yè)面局部定時(shí)更新的基本用法。08 七月 2022127.3 AJAX控件工具包AJAX控件工具包（AJAX Control Toolkit）中的控件主要分為兩大類：擴(kuò)展控件和獨(dú)立使用的控件。AJAX控件工具包與jQuery UI都是利用JavaScript實(shí)現(xiàn)頁(yè)面的局部更新，但一個(gè)是基于服務(wù)器的技術(shù)，一個(gè)是基于客戶端的技術(shù)。在實(shí)際的項(xiàng)目開發(fā)中，應(yīng)該將這兩種技術(shù)結(jié)合起來使用，包括聯(lián)合使用ASP.NET主題和jQuery主題，這樣才能極大地提高Web設(shè)計(jì)的效率，既縮短了項(xiàng)目開發(fā)周期，同時(shí)也能充分保證Web應(yīng)用程序的穩(wěn)定性和健壯性。08 七月 2022

9、137.3 AJAX控件工具包工具包自身還提供了一個(gè)ToolkitScriptManager控件，在VS2010開發(fā)環(huán)境下（ASP.NET 4.0），ScriptManager和ToolkitScriptManager的作用完全相同，開發(fā)人員只需要選擇其中的一個(gè)即可，建議使用ScriptManager。08 七月 2022147.3 AJAX控件工具包擴(kuò)展控件：擴(kuò)展控件是指不能單獨(dú)使用、只有和被其擴(kuò)展的服務(wù)器控件關(guān)聯(lián)在一起才能發(fā)揮作用的控件。彈出擴(kuò)展動(dòng)畫擴(kuò)展顯示擴(kuò)展數(shù)據(jù)輸入擴(kuò)展數(shù)據(jù)選擇擴(kuò)展其他擴(kuò)展08 七月 2022157.3 AJAX控件工具包彈出擴(kuò)展：彈出擴(kuò)展為服務(wù)器控件提供了非常多的擴(kuò)展

10、功能，包括對(duì)話框、動(dòng)畫、滑動(dòng)、輸入、輸出、縮放、拖動(dòng)、分頁(yè)、排序等。1彈出氣球式對(duì)話框（BalloonPopupExtender）【例8-4】演示氣球式對(duì)話框的基本用法。2彈出模式對(duì)話框（ModalPopupExtender）【例8-5】演示模式對(duì)話框的基本用法。08 七月 2022167.3 AJAX控件工具包彈出擴(kuò)展3彈出非模式對(duì)話框（PopupControlExtender）【例8-6】演示非模式對(duì)話框的基本用法。4彈出確認(rèn)按鈕對(duì)話框（ConfirmButtonExtender）【例8-7】演示確認(rèn)對(duì)話框的基本用法。5鼠標(biāo)滑過彈出快捷菜單（HoverMenuExtender）08 七月

11、2022177.3 AJAX控件工具包動(dòng)畫擴(kuò)展：AnimationExtender控件可以擴(kuò)展所有服務(wù)器控件的動(dòng)畫功能。1動(dòng)畫擴(kuò)展（AnimationExtender）2異步更新動(dòng)畫提示（UpdatePanelAnimationExtender）3AJAX工具包提供的動(dòng)畫和jQuery動(dòng)畫的比較08 七月 2022187.3 AJAX控件工具包顯示擴(kuò)展：除了彈出擴(kuò)展和動(dòng)畫擴(kuò)展之外，AJAX控件工具包中還提供了圓角效果、陰影效果以及始終顯示和折疊顯示的功能。1圓角（RoundedCornersExtender）2陰影（DropShadowExtender）3折疊和展開（CollapsiblePa

12、nelExtender）4始終在固定位置可見（AlwaysVisibleControlExtender）【例8-8】演示AlwaysVisibleControlExtender的基本用法。08 七月 2022197.3 AJAX控件工具包數(shù)據(jù)輸入擴(kuò)展:主要用于提示輸入信息、限制或過濾文本字符的輸入等。1空白文本框自動(dòng)提示（TextBoxWatermarkExtender）【例8-9】演示TextBoxWatermarkExtender的基本用法。2文本框輸入過濾（FilteredTextBoxExtender）3列表項(xiàng)自動(dòng)搜索（ListSearchExtender）4掩碼文本框編輯（Maske

13、dEditExtender）5輸入驗(yàn)證（ValidatorCalloutExtender）【例8-10】演示ValidatorCalloutExtender的基本用法。08 七月 2022207.3 AJAX控件工具包數(shù)據(jù)選擇擴(kuò)展:當(dāng)鼠標(biāo)進(jìn)入某些服務(wù)器控件區(qū)域或者在文本框中輸入信息時(shí)，AJAX控件工具包提供了多個(gè)輔助數(shù)據(jù)選擇的擴(kuò)展控件。1日期選擇（CalendarExtender）【例8-11】演示CalendarExtender的基本用法。2顏色選擇（ColorPickerExtender）【例8-12】演示ColorPickerExtender的基本用法。3滾動(dòng)數(shù)字選擇（NumericUp

14、DownExtender）08 七月 2022217.3 AJAX控件工具包數(shù)據(jù)選擇擴(kuò)展4自動(dòng)完成（AutoCompleteExtender）【例8-13】演示AutoCompleteExtender的基本用法。5下拉列表選擇（DropDownExtender）【例8-14】演示DropDownExtender的基本用法。6復(fù)選框式的單選按鈕（MutuallyExclusiveCheckBoxExtender）7圖片復(fù)選框（ToggleButtonExtender）08 七月 2022227.3 AJAX控件工具包其他擴(kuò)展1縮放（ResizableControlExtender）2拖動(dòng)（DragPanelExtender）3分頁(yè)（PagingBulletedListExtender）4滑動(dòng)（SliderExtender、MultiHandleSliderExtender）08 七月 2022237.3 AJAX控件工具包AJAX控件工具包中的獨(dú)立控件1防止自動(dòng)程序攻擊（NoBot） 2密碼強(qiáng)度檢查（PasswordStrength）【例8-15】演示Pass