AJAX技術是多種計算機技術的結晶，它的名稱來自：Asynchronism(異步)、JavaScript、And、XML這4個單詞首字母，即異步JavaScript請求處理XML技術。簡單的描述就是數據異步傳輸網頁局部刷新的技術。AJAX很流行，WEB程序設計中如果不應用AJAX技術，可以說是不完善的設計。就好象黑白電視機與彩電一樣，AJAX就是後者，是一種技術更新的革命！
本人學習AJAX時間並不長，僅10余天，不能說百分之百掌握，但也有所領悟。現在把自己的學習經過和體會寫下來，與君共分享。
一、學習經過：
AJAX技術的文章和書籍很多，視頻也不少，可以說是近兩年最熱的技術。但大多書籍介紹的全而不細，或是重點不突出，給人一種雲山霧罩的感覺！這其中不乏清華大學等知名教授寫的書。本人就有此方面的親身體會，我先是下載了傳智播客ajax視頻教程，看了幾節就看不下去了，後來又買了一本AJAX技術的書，很厚的一本60元人民幣。也是天很熱，耐心看了八天實在看不下去了，感覺AJAX技術很深奧，無法真正領會，就放棄了，去登山、游泳、下海、和美眉聊天、游戲，過起較為靡爛的幸福生活。後來，天氣涼爽了，閒暇之余又想起AJAX這件事，於是就買來幾瓶冰鎮啤酒，幾袋小食品，一袋瓜子，在家裡邊看邊飲，好生自在！沒有想到的是，這一看卻是一通百通，AJAX技術就這樣在一天時間裡掌握了，而且還有自己對AJAX技術的獨到領悟：AJAX應用很簡單，完全可以不用編碼或少量編碼。
二、學習體會及重點
學習應用的語言和工具軟件：本人是自學C#語言的，所以開發環境是NET框架下（ASP.NET），開發工具采用VS2008（VS2005也可以）。
學習重點：
AJAX控件的安裝，特別是AJAX Control Toolkit部分的安裝，詳見我的博客日志，有較為詳細的介紹，這裡就不多說了，唯一提醒的是：VS2008和VS2005在AJAX控件安裝和使用上有點區別，但不大！
1、AJAX控件5個基本控件的介紹
這是微軟所提供的AJAX最基本的五大控件，也是最實用的。使用它，你完全可以不用編寫任何代碼，只是簡單的設置一下相關屬性，就可以實現AJAX異步數據更新的效果。這是讓學習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屬性：指定發送模式。一個枚舉屬性，四個值：Auto、Debug、Release、Inherit。
Auto：默認值。即根據Web.config中retail配置節的值來決定發送腳本的模式。如果retail節點值為true，即將發布模式的腳本發送至客戶端，否則發送調試版本。
Debug:當retail屬性值為false時，ScriptManager控件將Debug版本的腳本發送至客戶端。
Release:當retail屬性值為false時，ScriptManager控件將Release版本的腳本發送至客戶端。
Inherit：與Auto用法相同，但一般不用。
2、Services屬性：用以指定當前頁面所引用的WEB服務，使用<asp:ServiceReference>節點可以注冊WEB服務，ScritpManage控件將為每一個注冊的Web服務生成客戶端代理。
（2）ScriptManagerProxy是ScriptManager的擴展，是專門為使用了母版頁或用戶控件的工程中使用的腳本管理器。當工程頁面中已使用了ScriptManager，那麼在母版頁或用戶控件中就可以使用一個ScriptManagerProxy來代理ScripManager的工作。屬性上基本與ScriptManager控件一樣。
（3）UpdatePanel是使用最廣泛的Ajax控件，在頁面中嵌入UpdatePanel，就可以實現頁面的局部刷新。頁面中可以有多個UpdatePanel，UpdataPanel之間也可以相互嵌套。（應用重點）
Updatapanel就是實現頁面局部刷新的控件，UpdatePanel控件的前台代碼如下所示：
復制代碼 代碼如下:
<asp:UpdatePanel runat="server" ID="udp1">
<ContentTemplate> //模板
內容模板 放置內容的區域
</ContentTemplate>
<Triggers> //設置提交服務器的方式：異步或同步
<asp:AsyncPostBackTrigger ControlID="" EventName="" /> //指設置異步模式及controlID(引發更新的控件ID)和EventName（引發更新事件名稱）
<asp:PostBackTrigger ControlID="" /> //指同步模式，一般不設置這個，可以不寫這行代碼，因為ajax實現的就是異步更新，同步就失去了意義！
</Triggers>
</asp:UpdatePanel>
重要屬性和事件：
ChildrenAsTriggers：當UpdateMode屬性值為Conditional時，設定UpdatePanel中的子控件的異步請求服務器是否會引起UpdatePanel的更新。
RenderMode:表示UpdatePanel解釋至前台HTML代碼樣式，默認值為Block即解釋為<div></div>，當該屬性設置為Inline時，UpdatePanel被解釋為<span></span>
Triggers:設定觸發當前UpdatePanel更新的控件和事件。（這個是重點）
UpdateMode:設定當前UpdatePancl的更新模式：Always和Conditional。當設定為Always時，UpdatePanel不管當前是否存在Trigger都會更新。當設定為Conditional時，只有當前UpdatePancl設定了Trigger或ChildTrigger時，當前UpdatePanel控件才會更新或提交頁面，或者當服務器端調用Update()方法時才會更新UpdatePanel.
需要特別說明的屬性和事件：
Trigger屬性：指示當前UpdatePanel使用的提交服務器方式，有同步提交或異步提交兩種。同步提交只需要指定觸發提交的控件ID，同步提交將會提交整個頁面。異步提交需要設定觸發異步提交的控件ID和服務器端的事件。
頁面中多個UpdatePanel共存：當頁面上有多個UpdatePanel共存時，需要設定頁面上所有的UpdatePanel控件的UpdateMode屬性為Conditional，否則只要任何一個UpdatePanel局部更新被觸發，將會更新所有頁面上的UpdatePanel。原因很簡單，頁面上所有的UpdatePanel控件的UpdateMode默認為Always。
多個UpdatePanel的嵌套使用：當多個UpdatePanel控件嵌套使用時，處於並列的UpdatePanel更新時互不影響。但當兩個UpdatePanel相互嵌套時，處於內層的UpdatePanel局部更新時並不會影響到處層的UpdatePanel，但是外層的UpdatePanel局部更新時會更新所有嵌套在它內部的UpdatePanel。
（4）顧名思義UpdateProgress執行的是頁面局部刷新過程中的工作。UpdateProgress可以提供一個刷新過程中用戶狀態的友好信息，如向客戶提示“正在加載數據”等。
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:設定觸發UpdateProgress的UpdatePanel的ID，一般用於頁面中具有多個UpdatePanel的情況。
DisplayAfter:進度信息顯示多少毫秒數。
DynamicLayout:布爾值屬性，設定當前UpdateProgress是否動態繪制，而不是直接解釋在前台。
（5）在WinForm的開發中，很多程序員都被Timer控件的功能所傾倒。Timer控件可以定期的觸發一些事件，比如提交整個頁面或刷新部分頁面等。
Timer控件的定義相當簡單，只需聲明控件即可，代碼如下所示：
<asp:Timer runat="server" ID="timer1" Interval="1000" OnTick="timer1_Tick"></asp:Timer>
重點屬性：
Enabled：是否啟動Timer控件，並觸發Tick事件。
Interval:Timer控件觸發Tick事件的間隔事件，單位ms.
Tick：Timer控件在設定Enabled屬性為true時，每隔Interval屬性限定的時間執行事件。
提示：一般把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>
內容模板 放置內容的區域
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
2、AJAX基本原理及案例代碼
AJAX技術：我的理解就是JavaScritp前後台參數傳遞的技術，這裡參數可以是參數值或數據流。學習AJAX基本原理，有助於對AJAX擴展控件的應用，是不會缺少的一部分。
下面列舉兩個AJAX最常用的方式，以便學習者體會AJAX應用原理。如初學者對部分代碼不能理解，可以查找相關命令及資料！
應用方式一：
在日常的ASP.NET Ajax實現中，這種方式是最簡單的、最常用的開發方式。這種方式典型的實現步驟如下所示：
創建XMLHttpRequest對象，請求特定的Ajax處理頁面。
Ajax處理頁面在Page_Load事件中，接收XMLHttpRequest對象的異步請求。
Ajax處理頁面根據請求內容，做出相應的回應，回應可以采用this.Response.Write或this.Response.OutPutStream將響應文本或響應的XML Document放入Response對象的方式。
前台JavaScript腳本通過XMLHttpRequest對象的responseText或responseXml來接收服務器回應，並動態修改頁面內容，從而實現Ajax異步無刷新應用。
當前1/5頁 12345下一頁閱讀全文