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