揭開AJAX神秘的面紗(AJAX個人學習筆記)第1/5頁

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非同步無重新整理應用。