揭開AJAX神秘的面紗(AJAX個人學習筆記)第4/5頁
更新時間:2009年09月18日 13:50:55 作者:
寫這個學習筆記,只是記載一下自己的學習經過和體會,把一些學習重點記錄下來,以備今后的鞏固復習及應用,很多知識點沒有詳細介紹,所以并不完全適用于初學者,如果你是初學者,最好選擇一本AJAX學習的書籍,然后與這篇學習筆記對照學習,效果會更好。
二、學習體會及重點
學習應用的語言和工具軟件:本人是自學C#語言的,所以開發(fā)環(huán)境是NET框架下(ASP.NET),開發(fā)工具采用VS2008(VS2005也可以)。
學習重點:
AJAX控件的安裝,特別是AJAX Control Toolkit部分的安裝,詳見我的博客日志,有較為詳細的介紹,這里就不多說了,唯一提醒的是:VS2008和VS2005在AJAX控件安裝和使用上有點區(qū)別,但不大!
AJAX控件5個基本控件的介紹
這是微軟所提供的AJAX最基本的五大控件,也是最實用的。使用它,你完全可以不用編寫任何代碼,只是簡單的設置一下相關屬性,就可以實現(xiàn)AJAX異步數(shù)據(jù)更新的效果。這是讓學習AJAX技術的人最為心動的,是一種傻瓜式的應用,效果不錯。如果你想在以前編寫的程序中應用AJAX技術,用這五大基本控件,可以在十幾分鐘內搞定。下面具體介紹一下:
(1)ScriptManager是腳本管理器,負責管理頁面中的Ajax控件的有關腳本資源。在一個Web頁面中只能有一個ScriptManager,在任何情況下使用ASP.NET Ajax控件必須在頁面中添加一個ScriptManager。(這個控件一般不需設置,如果想了解具體屬和和事件,可以查找有關資料。)
ScriptManager控件的前臺代碼形式如下所示:
復制代碼 代碼如下:
<asp:ScriptManager ID="asm1" runat=” server” >
<AuthenticationService Path="" />
<ProfileService LoadProperties="" Path="" />
<Scripts>
<asp:ScriptReference />
</Scripts>
<Services>
<asp:ServiceReference Path="" />
</Services>
</asp:ScriptManager>
下面重點介紹一下容易出錯的一些屬性和方法:
1、ScriptMode屬性:指定發(fā)送模式。一個枚舉屬性,四個值:Auto、Debug、Release、Inherit。
Auto:默認值。即根據(jù)Web.config中retail配置節(jié)的值來決定發(fā)送腳本的模式。如果retail節(jié)點值為true,即將發(fā)布模式的腳本發(fā)送至客戶端,否則發(fā)送調試版本。
Debug:當retail屬性值為false時,ScriptManager控件將Debug版本的腳本發(fā)送至客戶端。
Release:當retail屬性值為false時,ScriptManager控件將Release版本的腳本發(fā)送至客戶端。
Inherit:與Auto用法相同,但一般不用。
2、Services屬性:用以指定當前頁面所引用的WEB服務,使用<asp:ServiceReference>節(jié)點可以注冊WEB服務,ScritpManage控件將為每一個注冊的Web服務生成客戶端代理。
(2)ScriptManagerProxy是ScriptManager的擴展,是專門為使用了母版頁或用戶控件的工程中使用的腳本管理器。當工程頁面中已使用了ScriptManager,那么在母版頁或用戶控件中就可以使用一個ScriptManagerProxy來代理ScripManager的工作。屬性上基本與ScriptManager控件一樣。
(3)UpdatePanel是使用最廣泛的Ajax控件,在頁面中嵌入UpdatePanel,就可以實現(xiàn)頁面的局部刷新。頁面中可以有多個UpdatePanel,UpdataPanel之間也可以相互嵌套。(應用重點)
Updatapanel就是實現(xiàn)頁面局部刷新的控件,UpdatePanel控件的前臺代碼如下所示:
復制代碼 代碼如下:
<asp:UpdatePanel runat="server" ID="udp1">
<ContentTemplate> //模板
內容模板 放置內容的區(qū)域
</ContentTemplate>
<Triggers> //設置提交服務器的方式:異步或同步
<asp:AsyncPostBackTrigger ControlID="" EventName="" /> //指設置異步模式及controlID(引發(fā)更新的控件ID)和EventName(引發(fā)更新事件名稱)
<asp:PostBackTrigger ControlID="" /> //指同步模式,一般不設置這個,可以不寫這行代碼,因為ajax實現(xiàn)的就是異步更新,同步就失去了意義!
</Triggers>
</asp:UpdatePanel>
重要屬性和事件:
ChildrenAsTriggers:當UpdateMode屬性值為Conditional時,設定UpdatePanel中的子控件的異步請求服務器是否會引起UpdatePanel的更新。
RenderMode:表示UpdatePanel解釋至前臺HTML代碼樣式,默認值為Block即解釋為<div></div>,當該屬性設置為Inline時,UpdatePanel被解釋為<span></span>
Triggers:設定觸發(fā)當前UpdatePanel更新的控件和事件。(這個是重點)
UpdateMode:設定當前UpdatePancl的更新模式:Always和Conditional。當設定為Always時,UpdatePanel不管當前是否存在Trigger都會更新。當設定為Conditional時,只有當前UpdatePancl設定了Trigger或ChildTrigger時,當前UpdatePanel控件才會更新或提交頁面,或者當服務器端調用Update()方法時才會更新UpdatePanel.
需要特別說明的屬性和事件:
Trigger屬性:指示當前UpdatePanel使用的提交服務器方式,有同步提交或異步提交兩種。同步提交只需要指定觸發(fā)提交的控件ID,同步提交將會提交整個頁面。異步提交需要設定觸發(fā)異步提交的控件ID和服務器端的事件。
頁面中多個UpdatePanel共存:當頁面上有多個UpdatePanel共存時,需要設定頁面上所有的UpdatePanel控件的UpdateMode屬性為Conditional,否則只要任何一個UpdatePanel局部更新被觸發(fā),將會更新所有頁面上的UpdatePanel。原因很簡單,頁面上所有的UpdatePanel控件的UpdateMode默認為Always。
多個UpdatePanel的嵌套使用:當多個UpdatePanel控件嵌套使用時,處于并列的UpdatePanel更新時互不影響。但當兩個UpdatePanel相互嵌套時,處于內層的UpdatePanel局部更新時并不會影響到處層的UpdatePanel,但是外層的UpdatePanel局部更新時會更新所有嵌套在它內部的UpdatePanel。
(4)顧名思義UpdateProgress執(zhí)行的是頁面局部刷新過程中的工作。UpdateProgress可以提供一個刷新過程中用戶狀態(tài)的友好信息,如向客戶提示“正在加載數(shù)據(jù)”等。
UpdateProgress控件前臺代碼非常簡單,如下所示:
復制代碼 代碼如下:
<asp:UpdateProgress runat="server" ID="upg1">
<ProgressTemplate> //模板
<div alige=”ecnter” style=”width:1100px”> //以下代碼是顯示的信息或圖片部分
<img src=”image/loading.gif” align=middle />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
重點屬性:
AssociatedUpdatePanelID:設定觸發(fā)UpdateProgress的UpdatePanel的ID,一般用于頁面中具有多個UpdatePanel的情況。
DisplayAfter:進度信息顯示多少毫秒數(shù)。
DynamicLayout:布爾值屬性,設定當前UpdateProgress是否動態(tài)繪制,而不是直接解釋在前臺。
(5)在WinForm的開發(fā)中,很多程序員都被Timer控件的功能所傾倒。Timer控件可以定期的觸發(fā)一些事件,比如提交整個頁面或刷新部分頁面等。
Timer控件的定義相當簡單,只需聲明控件即可,代碼如下所示:
<asp:Timer runat="server" ID="timer1" Interval="1000" OnTick="timer1_Tick"></asp:Timer>
重點屬性:
Enabled:是否啟動Timer控件,并觸發(fā)Tick事件。
Interval:Timer控件觸發(fā)Tick事件的間隔事件,單位ms.
Tick:Timer控件在設定Enabled屬性為true時,每隔Interval屬性限定的時間執(zhí)行事件。
提示:一般把Timer控件放置在UpdatePanel之處,不然局部更新時又會重新設置間隔時間。前臺代碼:
復制代碼 代碼如下:
<asp:ScriptManager ID=”ScriptManagel” runat=”server”></asp:ScriptManager>
<asp:Timer ID=”Timer1” runat=”server” onTick=”Timer1_Tick” Interval=”1000” >
</asp:Timer>
<asp:UpdatePanel runat="server" ID="udp1">
<ContentTemplate>
內容模板 放置內容的區(qū)域
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>