網(wǎng)絡(luò)編程：第12章 ASP.NET AJAX

1第12章ASP.NETAJAX2本章要點(diǎn)：了解AJAX基礎(chǔ)知識(shí)理解AJAX工作原理理解ASP.NETAJAX技術(shù)掌握ASP.NETAJAX服務(wù)器控件的用法3目錄12.1AJAX基礎(chǔ)12.1.1AJAX概述12.1.2ASP.NETAJAX技術(shù)12.2ASP.NETAJAX服務(wù)器控件12.2.1ScriptManager控件12.2.2UpdatePanel控件12.2.3Timer控件12.2.4UpdateProgress控件12.3ASP.NETAJAXControlToolkit12.4小結(jié)412.1AJAX基礎(chǔ)AJAX是AsynchronousJavaScriptandXML的縮寫(異步JavaScript和XML），是一種利用已經(jīng)成熟的技術(shù)構(gòu)建具有良好交互性的Web應(yīng)用程序的好方法，它使得瀏覽器可以為用戶提供更為自然的瀏覽體驗(yàn)。通常稱AJAX頁(yè)面為無(wú)刷新Web頁(yè)面。ASP.NETAJAX是AJAX的Microsoft實(shí)現(xiàn)方式，對(duì)AJAX的使用以控件形式提供，提高了易用性。512.1.1AJAX概述AJAX技術(shù)將桌面應(yīng)用程序具有的交互性應(yīng)用于Web應(yīng)用程序AJAX所用到的技術(shù)包括：文檔對(duì)象模型DOM:通過JavaScript代碼使用DOM處理HTML結(jié)構(gòu)和服務(wù)器返回的XML。JavaScript代碼:這是運(yùn)行AJAXWeb應(yīng)用程序的核心代碼，幫助改進(jìn)與服務(wù)器應(yīng)用程序的通信。DHTML:通過使用<div>、<span>和其他動(dòng)態(tài)HTML元素來(lái)動(dòng)態(tài)更新表單。XMLHttpRequest對(duì)象:該對(duì)象允許瀏覽器與Web服務(wù)器通信，通過MSXMLActiveX組件可以在IE5.0以上的瀏覽器中使用。6同步與異步傳統(tǒng)B/S模式（同步）同步：提交請(qǐng)求→等待服務(wù)器處理→處理完畢返回（這個(gè)期間客戶端瀏覽器不能干任何事）同步是指發(fā)送方發(fā)出數(shù)據(jù)后，等接收方發(fā)回響應(yīng)后才發(fā)下一個(gè)數(shù)據(jù)包的通訊方式。AJAX技術(shù)（異步）異步：請(qǐng)求通過事件觸發(fā)→服務(wù)器處理（這時(shí)瀏覽器仍然可以作其他事情）→處理完畢。異步是指發(fā)送方發(fā)出數(shù)據(jù)后，不等接收方發(fā)回響應(yīng)，接著發(fā)送下個(gè)數(shù)據(jù)包的通訊方式。傳統(tǒng)Web應(yīng)用（同步）請(qǐng)求信息請(qǐng)求信息果結(jié)理處端器務(wù)服果結(jié)理處端器務(wù)服服務(wù)器客戶端瀏覽器用戶瀏覽器發(fā)出請(qǐng)求瀏覽器接收結(jié)果服務(wù)器處理Ajax技術(shù)（異步）服務(wù)器客戶端瀏覽器用戶請(qǐng)求信息請(qǐng)求信息請(qǐng)求信息果結(jié)理處端器務(wù)服果結(jié)理處端器務(wù)服果結(jié)理處端器務(wù)服

XMLHttpRequest是Ajax的核心機(jī)制，它是在IE5中首先引入的，是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)單的說，也就是javascript可以及時(shí)向服務(wù)器提出請(qǐng)求和處理響應(yīng)，而不阻塞用戶，達(dá)到無(wú)刷新的效果。

9Ajax的主要內(nèi)容及原理

Ajax實(shí)現(xiàn)的基本原理是，當(dāng)用戶與瀏覽器中的頁(yè)面進(jìn)行交互時(shí)，將觸發(fā)頁(yè)面元素對(duì)象的相應(yīng)事件，客戶端捕獲這些事件后，如果需要將交互動(dòng)作引起的邏輯實(shí)現(xiàn)提交給服務(wù)器進(jìn)行處理，則將要處理的數(shù)據(jù)（包括狀態(tài)描述）轉(zhuǎn)換為XML格式的字符串，并使用異步傳輸方式提交給服務(wù)器。服務(wù)器處理結(jié)束后，同樣使用XML格式和異步傳輸方式將處理結(jié)果送回?？蛻舳藦姆祷亟Y(jié)果中提取需要的部分，交由JavaScript對(duì)網(wǎng)頁(yè)進(jìn)行“局部更新”，而不是刷新整個(gè)頁(yè)面。10AJAX技術(shù)和傳統(tǒng)Web應(yīng)用程序比較1112.1.2ASP.NETAJAX技術(shù)ASP.NETAJAX是AJAX的Microsoft實(shí)現(xiàn)方式，專用于ASP.NET開發(fā)人員。使用ASP.NET中的AJAX功能，可以生成豐富的Web應(yīng)用程序。與傳統(tǒng)的Web應(yīng)用程序相比，基于ASP.NETAJAX的Web應(yīng)用程序具有以下優(yōu)點(diǎn)：局部頁(yè)刷新，即只刷新已發(fā)生更改的網(wǎng)頁(yè)部分，通過異步模式，提升了用戶體驗(yàn)。優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用。Ajax引擎在客戶端運(yùn)行，承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的工作，從而減少了服務(wù)器負(fù)載。1212.1.2ASP.NETAJAX技術(shù)（續(xù)）ASP.NETAJAX功能框架組成：包含客戶端腳本庫(kù)和服務(wù)器端AJAXExtensions。兩部分組合在一起提供了可靠的開發(fā)框架?？蛻舳四_本庫(kù)：包含一系列的JavaScript腳本，簡(jiǎn)化了開發(fā)人員創(chuàng)建AJAX窗體的復(fù)雜性。服務(wù)器端AJAXExtensions：包含ASP.NETAJAX服務(wù)器控件。13實(shí)例12-1認(rèn)識(shí)ASP.NETAJAX本實(shí)例創(chuàng)建了一個(gè)AJAXWeb窗體，在窗體上既包含傳統(tǒng)的控件，也包含ASP.NETAJAX控件。當(dāng)單擊“沒有使用AJAX”按鈕，則會(huì)刷新整個(gè)頁(yè)面，兩個(gè)標(biāo)簽的內(nèi)容都會(huì)改變。如果單擊“使用AJAX”按鈕，則只刷新頁(yè)面的部分區(qū)域，只有下面的標(biāo)簽內(nèi)容會(huì)改變。源程序：FirstAjax.aspx

14程序說明事件處理程序btnNoAjax_Click和btnUseAjax_Click都回送服務(wù)器當(dāng)前時(shí)間。不同的是前者將刷新整個(gè)網(wǎng)頁(yè)，而后者只刷新lblUseAjax所在的UpdatePanel區(qū)。其中<ContentTemplate>子元素標(biāo)識(shí)需要刷新的區(qū)域。1512.2ASP.NETAJAX服務(wù)器控件當(dāng)把ASP.NETAJAX控件添加到ASP.NET網(wǎng)頁(yè)上后，再瀏覽這些網(wǎng)頁(yè)會(huì)自動(dòng)將支持的客戶端JavaScript腳本發(fā)送到瀏覽器以獲取AJAX功能。16常用的ASP.NETAJAX服務(wù)器控件ScriptManager：管理客戶端組件、局部頁(yè)刷新、本地化、全球化和自定義用戶腳本的腳本資源。如果使用UpdatePanel、UpdateProgress和Timer控件，就必須包含ScriptManager控件。UpdatePanel：實(shí)現(xiàn)刷新頁(yè)的選定部分，而不是使用同步回發(fā)來(lái)刷新整個(gè)頁(yè)面。17常用的ASP.NETAJAX服務(wù)器控件（續(xù)）UpdateProgress：提供有關(guān)UpdatePanel控件中的局部頁(yè)刷新的狀態(tài)信息。Timer：按定義的時(shí)間間隔執(zhí)行回發(fā)?？梢允褂肨imer控件來(lái)發(fā)送整個(gè)頁(yè)面，或配合使用UpdatePanel控件以按定義的時(shí)間間隔執(zhí)行局部頁(yè)刷新。1812.2.1ScriptManager控件ASP.NET中AJAX功能的核心，管理一個(gè)頁(yè)面上的所有ASP.NETAJAX資源。包括將MicrosoftAJAX庫(kù)的JavaScript腳本下載到瀏覽器和協(xié)調(diào)通過使用控件UpdatePanel啟用的局部頁(yè)面刷新。每個(gè)實(shí)現(xiàn)AJAX功能的頁(yè)面都需要添加一個(gè)且僅允許添加一個(gè)ScriptManager控件。語(yǔ)法格式如下：<asp:ScriptManagerID="ScriptManager1"runat="server"/>1912.2.1ScriptManager控件（續(xù)）如果僅在一個(gè)ASP.NET網(wǎng)頁(yè)上添加了一個(gè)ScriptManager控件，而沒有添加其它的ASP.NETAJAX服務(wù)器控件，則在瀏覽該網(wǎng)頁(yè)時(shí)就會(huì)將MicrosoftAJAX庫(kù)的JavaScript腳本下載到瀏覽器。屬性EnablePartialRendering：確定了網(wǎng)頁(yè)是否能實(shí)現(xiàn)局部頁(yè)刷新功能。源程序：ScriptManager.aspx

2012.2.2UpdatePanel控件UpdatePanel控件是一個(gè)容器控件，該控件自身不會(huì)在頁(yè)面上顯示任何內(nèi)容，主要作用是放置在其中的控件將具有局部刷新的功能。通過使用UpdatePanel控件，減少了整頁(yè)回發(fā)時(shí)的屏幕閃爍并提高了網(wǎng)頁(yè)交互性，改善了用戶體驗(yàn)，同時(shí)也減少了在客戶端和服務(wù)器之間傳輸?shù)臄?shù)據(jù)量。21

(1)UpdateMode屬性：UpdateMode屬性表示UpdatPanel控件的更新模式。

(2)ChildrenAsTrigger屬性：該屬性為一個(gè)bool值，用來(lái)說明UpdatePanel控件的子控件引起的回發(fā)是否能導(dǎo)致Update-Panel控件的更新。

(3)Triggers屬性：表示可以導(dǎo)致UpdatePanel控件更新的觸發(fā)器集合。Always：表示頁(yè)面中任何一個(gè)控件引起的回發(fā)事件都會(huì)引起UpdatePanel控件內(nèi)部區(qū)域所有控件的更新Conditional：只在特定的情況下才產(chǎn)生頁(yè)面的回發(fā)，如執(zhí)行UpdatePanel控件的update()方法或在指定的觸發(fā)器的操作下。

1.UpdatePanel控件的常用屬性

指示UpdatePanel內(nèi)部控件引起的回發(fā)是否產(chǎn)生當(dāng)前UpdatePanel控件的局部更新。如果UpdateMode設(shè)為Always的話，那ChildAsTrigger局性必須設(shè)為True，否則運(yùn)行出錯(cuò)。

22使用UpdatePanel實(shí)現(xiàn)的條件更新UpdatePanel控件的UpdateMode屬性默認(rèn)為Always，表示頁(yè)面中任何一個(gè)控件引起的回發(fā)事件都會(huì)引起UpdatePanel控件內(nèi)部區(qū)域所有控件的更新（無(wú)條件更新）。若要求只有頁(yè)面中某個(gè)或某幾個(gè)控件的某個(gè)事件，才能引起Updatepanel區(qū)域更新（有條件更新），可設(shè)置Updatepanel控件的UpdateMode屬性為Conditional，ChildrenAsTrigger為False，后利用UpdatePanel的Trigger屬性，為其指定一個(gè)或多個(gè)觸發(fā)器。條件更新實(shí)例23<asp:AsyncPostBackTrigger>元素定義觸發(fā)器

<asp:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate>

……//添加需要刷新的控件

</ContentTemplate><Triggers><asp:AsyncPostBackTrigger

ControlID="Button1"EventName="Click"/></Triggers></asp:UpdatePanel>24使用外部按鈕刷新UpdatePanel控件

外部按鈕是指未包含在UpdatePanel控件內(nèi)的按鈕。若要在單擊按鈕時(shí)實(shí)現(xiàn)局部刷新功能，就需要在UpdatePanel控件的<Triggers>元素中進(jìn)行觸發(fā)器設(shè)置。25實(shí)例12-3使用外部按鈕刷新UpdatePanel控件單擊命令按鈕時(shí)會(huì)引發(fā)頁(yè)面往返，頁(yè)面上的Label1控件將被刷新，而Button1控件不刷新。源程序：UpdatePanel2.aspx26程序說明為了避免不必要的數(shù)據(jù)回送，可以只將需要更新的控件放在UpdatePanel控件內(nèi)部的<ContentTemplate>子元素中。而將引發(fā)回送事件的控件放在UpdatePanel控件外部。同時(shí)為UpdatePanel控件建立<Triggers>子元素標(biāo)識(shí)的觸發(fā)器。與實(shí)例12-2比較，本實(shí)例將返回一個(gè)較小的異步響應(yīng)。2712.2.2UpdatePanel控件（續(xù)）可以放置多個(gè)UpdatePanel控件。每個(gè)UpdatePanel控件可以指定獨(dú)立的頁(yè)面區(qū)域，實(shí)現(xiàn)獨(dú)立的局部刷新功能。實(shí)際使用時(shí)將需要局部刷新的控件放在UpdatePanel控件內(nèi)部的<ContentTemplate>子元素中。28同一個(gè)頁(yè)面使用多個(gè)UpdatePanel控件是否導(dǎo)致異步回發(fā)并刷新UpdatePanel控件將根據(jù)屬性UpdateMode的值而定。值為Always，則每次執(zhí)行回發(fā)時(shí)都會(huì)刷新控件UpdatePanel的內(nèi)容。回發(fā)包括來(lái)自其他UpdatePanel控件所包含的控件的異步回發(fā)，也包括來(lái)自UpdatePanel控件未包含的控件的回發(fā)。29UpdateMode的值為Conditional

將屬性ChildrenAsTriggers值設(shè)置為true并且UpdatePanel控件的子控件導(dǎo)致回發(fā)時(shí)。通過使用UpdatePanel控件的Triggers屬性定義為觸發(fā)器的控件導(dǎo)致回發(fā)時(shí)。在這種情況下，該控件顯式觸發(fā)UpdatePanel內(nèi)容的刷新。30實(shí)例12-4同一個(gè)頁(yè)面使用多個(gè)UpdatePanel控件

當(dāng)單擊命令按鈕“刷新面板1”時(shí)會(huì)引發(fā)頁(yè)面往返，頁(yè)面上的Label1和Button1控件被刷新。當(dāng)單擊命令按鈕“刷新面板2”時(shí)會(huì)引發(fā)頁(yè)面往返，頁(yè)面上的Label2控件被刷新。源程序：

MultiUpdatePanel.aspx

MultiUpdatePanel.aspx

MultiUpdatePanel.aspx3112.2.3Timer控件1.Timer控件的常用屬性和事件(1)Interval屬性Interval屬性用于設(shè)置頁(yè)面向服務(wù)器發(fā)送回傳的，以毫秒為單位的時(shí)間間隔，默認(rèn)值為60000毫秒。(2)Enable屬性Enable屬性與其他標(biāo)準(zhǔn)控件的Enable屬性相同，用來(lái)決定Timer控件是否可用。(3)Tick事件Tick事件是Timer控件周期性觸發(fā)的事件，寫在該事件過程中的代碼能被應(yīng)用程序周期性的自動(dòng)執(zhí)行。2.使用Timer控件

實(shí)例