ASP.NET AJAX 在Web開發中的應用

1  引言     當前，Web技術的不斷髮展使得B/S得以廣泛地應用。但Web傳統的開發技術使得網頁的互動效能大打折扣。隨著AJAX技術的興起，Web開發技術超越了傳統的開發模式，發生了質的飛躍。而微軟公司推出的ASP.NET AJAX架構與ASP.NET的結合，使得Web的開發方式在.NET環境下更加簡單易用，頁面互動效能也得到很大提高。2  Ajax引擎的原理     AJAX（Asynchronous JavaScript and XML）是現有多種技術的綜合，包括JavaScript、XHTML、CSS、DOM、XML、XSTL和XMLHttpRequest。AJAX使用XHTML和CSS標準化呈現資料，使用DOM實現動態顯示和互動資料，使用XML和XSTL進行資料交換與處理，使用XMLHttpRequest對象進行非同步資料讀取，使用JavaScript綁定和處理所有資料。AJAX為互動操作較多、資料讀寫頻繁和資料分類良好的Web應用提供了一個很好的解決方案。其中XMLHttpRequest、JavaScript和DOM是AJAX技術的核心。2.1  XMLHttpRequest     XMLHttpRequest是AJAX引擎的核心技術，是AJAX引擎解決無需重新整理整個頁面即可從伺服器擷取所需資料問題的關鍵。在微軟IE 平台下XMLHttpRequest 是XMLHTTP 組件的一個對象，它通過允許開發人員在Web 頁面內部使用XMLHTTP ActiveX 組件擴充自身功能，開發人員不必從當前的Web 頁面導航而直接與伺服器上的資料庫進行雙向資料轉送。該項功能相當重要，它彌補了無狀態串連的缺點，排除下載冗餘Web 資料的需要，從而提高了進程速度。2.2  DOM ( Document object Model )     DOM 是給HTML 和XML 檔案使用的一組API。它提供了檔案的結構表述，允許開發人員改變其中的內容，建立網頁與程式語言溝通的橋樑。所有Web 開發人員操作及建立檔案的屬性、方法及事件都以對象方式來展現，這些對象均可由當今大多數瀏覽器以指令碼取用。一個用HTML 或XHTML 構建的網頁可看作是一組結構化資料，這些資料被封在DOM (Document Object Model）中，且DOM 提供對網頁中各個對象的讀寫支援。2.3  JavaScript     JavaScript是一種在瀏覽器中大量使用的跨平台程式設計語言，常被用來製作網頁特效或表單驗證。在AJAX 中JavaScript 則是XMLHttpRequest與DOM 互動的橋樑以及AJAX 引擎工作的主要推動力。JavaScript 通過調用XMLHttpRequest 的屬性和方法擷取伺服器端資料，調用DOM 的API更新Web 頁面內容，從而實現整個頁面的無重新整理更新頁面的效果。3  ASP.NET AJAX架構     ASP.NET AJAX由用戶端指令碼庫和服務端組件組成，這兩者被整合在一起提供了一個功能強大的開發架構。用戶端指令碼庫中包含兩種最熟悉的動態網頁技術，分別是跨瀏覽器使用的ECMAScript(JavaScript)技術和動態HTML (DHTML)網頁開發技術，並且將這兩種技術整合到了ASP.NET 2.0 基於伺服器端的開發平台中。圖1解釋說明了包含用戶端指令碼庫和服務端組件的ASP.NET AJAX的功能。3.1  ASP.NET伺服器端架構     ASP.NET伺服器端組件由ASP.NET控制項和組件構成，用於管理UI和應用程式流程，管理序列，驗證和控制項擴充性等。此外，ASP.NET Web服務也能用於訪問ASP.NET應用服務，包括表單驗證和使用者驗證。3.2  ASP.NET伺服器控制項     ASP.NET AJAX控制項由伺服器端和用戶端代碼構成在一起以產生類似於AJAX的行為。以下是最常用的ASP.NET AJAX控制項。     ●ScriptManager控制項     ●UpdatePanel控制項     ●UpdateProgress控制項     ●Timer控制項3.3  ASP.NET AJAX用戶端架構     ASP.NET AJAX用戶端指令碼庫由JavaScript(.js)檔案構件。這些.js檔案提供了物件導向開發的特性。這一特性使得連續性和模組化在用戶端指令碼中達到一個新的層次。以下是ASP.NET AJAX中用戶端的各個層次。     ⑴瀏覽器的相容層。通過最常用的瀏覽器為ASP.NET AJAX指令碼提供相容性。     ⑵ASP.NET AJAX 核心服務，這種核心服務已經擴充到了JavaScript。例如classes，namespaces，event handling，inheritance，data types，and object serialization。     ⑶ASP.NET AJAX基礎類庫，包括組件如string builders and extended error handling。     ⑷網路工作層。該層用於處理基於Web服務和應用之間的通訊，管理非同步式遠程方法的調用。

圖1  ASP.NET AJAX伺服器和用戶端架構4  ASP.NET AJAX在Web開發中的應用4.1  ASP.NET AJAX開發環境圖2  ASP.NET AJAX伺服器控制項     在Web開發應用中，利用VS2005開發工具和ASP.NET AJAX1.0架構進行Web頁面的開發是值得推薦的一種方法。VS2005開發工具本身並沒有整合這一架構，因此，在做Web開發時就必須安裝這一架構。可以從微軟官方網站上下載（www.asp.net）。下載安裝後，可在VS2005開發環境中看到ASP.NET AJAX伺服器控制項。2所示。     要注意的是，安裝ASP.NET AJAX架構後，並不是VS2005開發環境中的所有頁面模板都能支援AJAX技術。只有ASP.NET AJAX提供的預設範本才能支援。對於其他ASP.NET模板，如果要想支援AJAX，就必須配置Web.config檔案。具體配置可以參考微軟官方文檔。4.2  ASP.NET AJAX控制項在Web開發中的應用 4.2.1  ScriptManager控制項     用來處理頁面上的所有組件以及頁面局部更新，產生相關的用戶端代理指令碼以便能夠在JavaScript中訪問Web Service，所有需要支援ASP.NET AJAX的ASP.NET頁面上有且只能有一個ScriptManager控制項，並且，如果要使用其他ASP.NET AJAX控制項，就必須要有ScriptManager控制項的支援。在ScriptManager控制項中我們可以指定需要的指令碼庫，或者指定通過JS來調用的Web Service，還可以指定分頁錯誤處理等。使用<asp：ScriptManager/>來定義一個ScriptManager，簡單的ScriptManager定義形式是：<asp：ScriptManager ID="ScriptManager1"  runat="server">  <AuthenticationService Path="" />   <ProfileService LoadProperties="" Path="" />      <Scripts>   <asp：ScriptReference/>     </Scripts>      <Services>   <asp：ServiceReference />  </Services></asp：ScriptManager>     預設情況下，ScriptManager控制項為頁面中的微軟指令碼庫註冊指令碼。以使用戶端指令碼庫進行各種系統擴充，並且支援局部頁面重新整理和Web Services回調的特性。在Web應用開發中，ScriptManager控制項是必須的。要使用ASP.NET AJAX控制項，每個.aspx頁面上必須有且只有一個ScriptMangeger控制項。當.aspx頁面與主版頁面結合作為內容頁使用時，只須在主版頁面上放置一個ScriptManger控制項，內容頁上無須再放該控制項。     值得注意的是，頁面上任何用ScriptManger控制項註冊的指令碼和所有事件處理指令碼都必須在頁面<form>元素內。否則指令碼將不會被註冊或者被執行。 4.2.2  UpdatePanel控制項    該控制項可以用來建立豐富的局部更新Web應用程式，它是ASP.NET 2.0 AJAX Extensions中很重要的一個控制項，其強大之處在於不用編寫任何用戶端指令碼，只要在一個頁面上添加幾個UpdatePanel控制項和一個ScriptManager控制項就可以自動實現局部更新。一個頁面上可以放一個或者多個UpdatePanel控制項，並且UpdatePanel控制項還可以嵌套使用。UpdatePanel的工作依賴於ScriptManager服務端控制項和用戶端PageRequestManager類。當ScriptManager中允許頁面局部更新時，它會以非同步方式回傳給伺服器，與傳統的整頁回傳方式不同的是只有包含在UpdatePanel中的頁面部分會被更新，在從服務端返回HTML之後，PageRequestManager會通過操作DOM對象來替換需要更新的程式碼片段。UpdatePanel的工作原理3如示。

圖3  UpdatePanel的工作原理圖

簡單的UpdatePanel定義如下：<asp：UpdatePanel ID="UpdatePanel1" runat="server">    <ContentTemplate>    </ContentTemplate>    <Triggers>        <asp：AsyncPostBackTrigger />        <asp：PostBackTrigger />    </Triggers></asp：UpdatePanel>    <ContentTemplate>標籤用來定義UpdatePanel的內容，在它裡面可以放任何ASP.NET元素。<Triggers>屬性有兩種：分別為AsyncPostBackTrigger和PostBackTrigger。AsyncPostBackTrigge用來指定某個伺服器端控制項以及其將觸發的伺服器端事件作為該UpdatePanel的非同步更新觸發器，它需要設定的屬性有控制項ID和服務端控制項的事件；PostBackTrigger用來指定在UpdatePanel中的某個服務端控制項，它所引發的回送不使用非同步回送，而仍然是傳統的整頁回送。4.2.3  UpdateProgress控制項    在UpdatePanel控制項中的內容進行局部重新整理時，該控制項可以提供重新整理狀態的資訊。前文所述，一個頁面上可以放一個或者多個UpdatePanel控制項，但是，當其中一個UpdatePanel中更新的內容很緩慢，需要使用者等待很長時間時，很容易讓使用者誤以為應用程式處於“死機”狀態。在這種情況下，UpdateProgress控制項就發揮出它的特性，提供頁面部分內容重新整理時的狀態資訊。一個頁面上，一個UpdateProgress控制項可以和一個UpdataPanel控制項關聯，也可以和多個UpdatePanel控制項關聯。UpdateProgress控制項提供了AssociatedUpdate PanelID屬性，可以指定UpdateProgress控制項顯示哪一個UpdatePanel控制項。UpdateProgress控制項的簡單定義如下：<asp：UpdateProgressID=”UpdateProgress1” runat=”server” AssociatedUpdatePanelID=UpdatePanel1"><ProgressTemplate>資料正在讀取中，請稍後……</ProgressTemplate></asp：UpdateProgress>4.2.4  Timer控制項    該控制項用於在一個規定的時間內執行提交操作。使用Timer控制項可以執行提交整個頁面操作，也可以和UpdatePanel控制項一起使用，在規定時間內執行頁面的局部重新整理操作。Timer控制項作為伺服器控制項將JavaScript組件嵌入到了Web頁面中，當Timer控制項的Interval屬性設定的間隔時間到達時，該組件便會激發來自於瀏覽器的提交操作。Timer控制項設定的屬性操作在伺服器端運行，並且將這些屬性值傳遞給JavaScript組件。與其他控制項一樣，Timer控制項也需要依賴於ScriptManager控制項。Timer控制項既可以放在UpdatePanel控制項外，也可以放在UpdatePanel控制項內。其簡單的定義如下：<asp：Timer ID="Timer1" runat="server"></asp：Timer>    值得注意的是，如果把Timer控制項的Interval屬性值設定得過小，會對Web伺服器造成嚴重的阻塞。所以，當頁面上要重新整理的內容部分是必要的而且是頻繁的時候，才考慮使用Timer控制項。5  VS2005開發環境中使用ASP.NET AJAX控制項要注意的問題    在利用VS2005進行Web開發的過程中，需要使用各種伺服器控制項。一般情況下，VS2005的常用控制項都是可以和ASP.NET AJAX控制項結合使用的。但是，以下控制項與ASP.NET AJAX控制項有不相相容的地方，是需要注意的。5.1  與UpdatePanel控制項不相容的控制項    ⑴TreeView和Menu控制項； Web Parts 控制項； Substitution控制項。    ⑵登入控制項，如Login，PasswordRecovery，Change Password和CreateUserWizard控制項。在預設情況下，上述控制項與UpdatePanel控制項是不相相容的。當上述控制項轉換為可編輯狀態時，登入控制項中的驗證控制項便可以與UpdatePanel控制項相容。    ⑶驗證控制項類。如BaseCompareValidator，BaseValidator，CompareValidator，customValidator，RangeValidator，Regular ExpressionValidator，RequiredFieldValidator和Validation Summary控制項。這些控制項在預設情況下也可以與UpdatePanel控制項結合使用，但是在Web應用程式發布之後，上述驗證功能可能會出現失效情形。要使得這些驗證控制項能與UpdatePanel控制項相容，需要把上述驗證類控制項的Enable ClientScript屬性設定為false。這樣，就不允許用戶端指令碼被用於在瀏覽器端執行驗證操作。在非同步式提交操作中，驗證控制項就會在伺服器端執行驗證操作。    ⑷GridView和DetailsView控制項。在預設情況下，GridView和DetailsView控制項與UpdatePanel控制項可正常相容使用。但是，如果把它們的EnableSortingAndPagingCallbacks屬性設定為True的時候(預設值為False)，在UpdatePanle中的GridView和DetailsView控制項的排序和分頁功能將失效。    ⑸FileUpload控制項。FileUpload控制項在預設情況下，放在UpdatePanel中並且有控制項觸發時，不能發揮上傳作用。但是當UpdatePanel的Triggers屬性中，設定觸發控制項（例如Button，）為PostBack時，FileUpload可以發揮上傳功能，只是整個頁面不能局部重新整理。5.2  頁面跳轉要注意的問題    通常情況下，開發Web應用程式就必然會有頁面之間的傳值與跳轉。如果UpdatePanel內有觸發頁面跳轉的控制項（如Button），那麼該控制項的事件中就不能用如下的語句，否則會彈出異常的對話方塊。    ⑴ 調用Response.Write()：    ⑵ 調用Response filters：    ⑶ HttpModules：    ⑷ 調用Server.Transfer()。5.3  利用ASP.NET AJAX控制項後，彈出對話方塊的問題    在使用ASP.NET AJAX控制項後，如果想利用Js指令碼來輸出一些提示對話方塊，往往會想到利用 Page.Register ClientScriptBlock或者 Page.RegisterStartupScript註冊，但是，頁面上仍然沒有提示資訊。利用如下語句即可以解決這個問題：    ScriptManager.RegisterClientScriptBlock(UpdatePanel1，this.GetType()，"click"，"alert('提示資訊')"，true)； 就可以正常的彈出alert對話方塊了。    需要注意的是，如果在頁面中有多個UpdatePanel，如果每個UpdatePanel的UpdateMode的屬性值都是“always”(預設值)，則可以使用那個UpdatePanel的執行個體作為參數；如果每個UpdaePanel的UpdateMode屬性值為conditional，那麼就必須使用正在更新的那個UpdatePanel作為參數，這樣指令碼才能起作用。6  小結    AJAX因具有獨特的優勢，迅速成為Web研究熱點，並在實際開發得到廣泛應用，使網頁開發的效能得到了很大的擴充。本文從AJAX的理論出發，引申到ASP.NET AJAX的原理，總結了利用VS2005開發工具和ASP.NET AJAX架構開發WEB應用程式中的若干問題，為Web應用的開發提供了很好的借鑒作用。ASP.NET AJAX將會是Web開發中重要的利器，應用也將會越來越廣泛。參考文獻[1]奚江華. ASP.NET 2.0 開發詳解—使用C#[M].北京： 清化大學出版社，2006[2]謝小魁. Ajax技術及其在WebGIS中的應用.電腦與資訊技術[J].2007，第3期[3]微軟官方網站：http：//www.asp.net/ajax[4]陳冠軍.征服ASP.NET 2.0 Ajax——Web開發技術詳解[M].北京：人民教育出版社，2007 [5]http：//weblogs.asp.net/leftslipper/archive/2007/02/26/ sys-webforms-pagerequestmanagerparsererrorexception-what-it-is-and-how-to-avoid-it.aspx