AJAX技術(shù)是多種計(jì)算機(jī)技術(shù)的結(jié)晶，它的名稱來自：Asynchronism(異步)、JavaScript、And、XML這4個(gè)單詞首字母，即異步JavaScript請(qǐng)求處理XML技術(shù)。簡單的描述就是數(shù)據(jù)異步傳輸網(wǎng)頁局部刷新的技術(shù)。AJAX很流行，WEB程序設(shè)計(jì)中如果不應(yīng)用AJAX技術(shù)，可以說是不完善的設(shè)計(jì)。就好象黑白電視機(jī)與彩電一樣，AJAX就是后者，是一種技術(shù)更新的革命！
本人學(xué)習(xí)AJAX時(shí)間并不長，僅10余天，不能說百分之百掌握，但也有所領(lǐng)悟?，F(xiàn)在把自己的學(xué)習(xí)經(jīng)過和體會(huì)寫下來，與君共分享。
一、學(xué)習(xí)經(jīng)過：
AJAX技術(shù)的文章和書籍很多，視頻也不少，可以說是近兩年最熱的技術(shù)。但大多書籍介紹的全而不細(xì)，或是重點(diǎn)不突出，給人一種云山霧罩的感覺！這其中不乏清華大學(xué)等知名教授寫的書。本人就有此方面的親身體會(huì)，我先是下載了傳智播客ajax視頻教程，看了幾節(jié)就看不下去了，后來又買了一本AJAX技術(shù)的書，很厚的一本60元人民幣。也是天很熱，耐心看了八天實(shí)在看不下去了，感覺AJAX技術(shù)很深?yuàn)W，無法真正領(lǐng)會(huì)，就放棄了，去登山、游泳、下海、和美眉聊天、游戲，過起較為靡爛的幸福生活。后來，天氣涼爽了，閑暇之余又想起AJAX這件事，于是就買來幾瓶冰鎮(zhèn)啤酒，幾袋小食品，一袋瓜子，在家里邊看邊飲，好生自在！沒有想到的是，這一看卻是一通百通，AJAX技術(shù)就這樣在一天時(shí)間里掌握了，而且還有自己對(duì)AJAX技術(shù)的獨(dú)到領(lǐng)悟：AJAX應(yīng)用很簡單，完全可以不用編碼或少量編碼。
二、學(xué)習(xí)體會(huì)及重點(diǎn)
學(xué)習(xí)應(yīng)用的語言和工具軟件：本人是自學(xué)C#語言的，所以開發(fā)環(huán)境是NET框架下（ASP.NET），開發(fā)工具采用VS2008（VS2005也可以）。
學(xué)習(xí)重點(diǎn)：
AJAX控件的安裝，特別是AJAX Control Toolkit部分的安裝，詳見我的博客日志，有較為詳細(xì)的介紹，這里就不多說了，唯一提醒的是：VS2008和VS2005在AJAX控件安裝和使用上有點(diǎn)區(qū)別，但不大！
1、AJAX控件5個(gè)基本控件的介紹
這是微軟所提供的AJAX最基本的五大控件，也是最實(shí)用的。使用它，你完全可以不用編寫任何代碼，只是簡單的設(shè)置一下相關(guān)屬性，就可以實(shí)現(xiàn)AJAX異步數(shù)據(jù)更新的效果。這是讓學(xué)習(xí)AJAX技術(shù)的人最為心動(dòng)的，是一種傻瓜式的應(yīng)用，效果不錯(cuò)。如果你想在以前編寫的程序中應(yīng)用AJAX技術(shù)，用這五大基本控件，可以在十幾分鐘內(nèi)搞定。下面具體介紹一下：
（1）ScriptManager是腳本管理器，負(fù)責(zé)管理頁面中的Ajax控件的有關(guān)腳本資源。在一個(gè)Web頁面中只能有一個(gè)ScriptManager，在任何情況下使用ASP.NET Ajax控件必須在頁面中添加一個(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é)的值來決定發(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)前頁面所引用的WEB服務(wù)，使用asp:ServiceReference>節(jié)點(diǎn)可以注冊(cè)WEB服務(wù)，ScritpManage控件將為每一個(gè)注冊(cè)的Web服務(wù)生成客戶端代理。
（2）ScriptManagerProxy是ScriptManager的擴(kuò)展，是專門為使用了母版頁或用戶控件的工程中使用的腳本管理器。當(dāng)工程頁面中已使用了ScriptManager，那么在母版頁或用戶控件中就可以使用一個(gè)ScriptManagerProxy來代理ScripManager的工作。屬性上基本與ScriptManager控件一樣。
（3）UpdatePanel是使用最廣泛的Ajax控件，在頁面中嵌入U(xiǎn)pdatePanel，就可以實(shí)現(xiàn)頁面的局部刷新。頁面中可以有多個(gè)UpdatePanel，UpdataPanel之間也可以相互嵌套。（應(yīng)用重點(diǎn)）
Updatapanel就是實(shí)現(xiàn)頁面局部刷新的控件，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è)，可以不寫這行代碼，因?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ì)更新或提交頁面，或者當(dāng)服務(wù)器端調(diào)用Update()方法時(shí)才會(huì)更新UpdatePanel.
需要特別說明的屬性和事件：
Trigger屬性：指示當(dāng)前UpdatePanel使用的提交服務(wù)器方式，有同步提交或異步提交兩種。同步提交只需要指定觸發(fā)提交的控件ID，同步提交將會(huì)提交整個(gè)頁面。異步提交需要設(shè)定觸發(fā)異步提交的控件ID和服務(wù)器端的事件。
頁面中多個(gè)UpdatePanel共存：當(dāng)頁面上有多個(gè)UpdatePanel共存時(shí)，需要設(shè)定頁面上所有的UpdatePanel控件的UpdateMode屬性為Conditional，否則只要任何一個(gè)UpdatePanel局部更新被觸發(fā)，將會(huì)更新所有頁面上的UpdatePanel。原因很簡單，頁面上所有的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í)行的是頁面局部刷新過程中的工作。UpdateProgress可以提供一個(gè)刷新過程中用戶狀態(tài)的友好信息，如向客戶提示“正在加載數(shù)據(jù)”等。
UpdateProgress控件前臺(tái)代碼非常簡單，如下所示：
復(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，一般用于頁面中具有多個(gè)UpdatePanel的情況。
DisplayAfter:進(jìn)度信息顯示多少毫秒數(shù)。
DynamicLayout:布爾值屬性，設(shè)定當(dāng)前UpdateProgress是否動(dòng)態(tài)繪制，而不是直接解釋在前臺(tái)。
（5）在WinForm的開發(fā)中，很多程序員都被Timer控件的功能所傾倒。Timer控件可以定期的觸發(fā)一些事件，比如提交整個(gè)頁面或刷新部分頁面等。
Timer控件的定義相當(dāng)簡單，只需聲明控件即可，代碼如下所示：
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>
2、AJAX基本原理及案例代碼
AJAX技術(shù)：我的理解就是JavaScritp前后臺(tái)參數(shù)傳遞的技術(shù)，這里參數(shù)可以是參數(shù)值或數(shù)據(jù)流。學(xué)習(xí)AJAX基本原理，有助于對(duì)AJAX擴(kuò)展控件的應(yīng)用，是不會(huì)缺少的一部分。
下面列舉兩個(gè)AJAX最常用的方式，以便學(xué)習(xí)者體會(huì)AJAX應(yīng)用原理。如初學(xué)者對(duì)部分代碼不能理解，可以查找相關(guān)命令及資料！
應(yīng)用方式一：
在日常的ASP.NET Ajax實(shí)現(xiàn)中，這種方式是最簡單的、最常用的開發(fā)方式。這種方式典型的實(shí)現(xiàn)步驟如下所示：
創(chuàng)建XMLHttpRequest對(duì)象，請(qǐng)求特定的Ajax處理頁面。
Ajax處理頁面在Page_Load事件中，接收XMLHttpRequest對(duì)象的異步請(qǐng)求。
Ajax處理頁面根據(jù)請(qǐng)求內(nèi)容，做出相應(yīng)的回應(yīng)，回應(yīng)可以采用this.Response.Write或this.Response.OutPutStream將響應(yīng)文本或響應(yīng)的XML Document放入Response對(duì)象的方式。
前臺(tái)JavaScript腳本通過XMLHttpRequest對(duì)象的responseText或responseXml來接收服務(wù)器回應(yīng)，并動(dòng)態(tài)修改頁面內(nèi)容，從而實(shí)現(xiàn)Ajax異步無刷新應(yīng)用。
12345下一頁閱讀全文
您可能感興趣的文章:- 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
- 從零開始學(xué)習(xí)jQuery (六) jquery中的AJAX使用
- AJax 學(xué)習(xí)筆記二(onreadystatechange的作用)
- AJax 學(xué)習(xí)筆記一(XMLHTTPRequest對(duì)象)
- Jquery Ajax學(xué)習(xí)實(shí)例 向頁面發(fā)出請(qǐng)求，返回XML格式數(shù)據(jù)
- Ajax學(xué)習(xí)全套(最全最經(jīng)典)
