ASP.NET-AJAX-在Web開發(fā)中的應用

ASP.NETAJAX在Web開發(fā)中的應用

摘要AJAX實現(xiàn)了Web頁面豐富的部分刷新效果。本文通過介紹AJAX原理，引申到AJAX原理，并總結了在Web開發(fā)應用中要注意的若干問題。合理地利用AJAX技術，Web開發(fā)應用就能獲得更好的交互效果。關鍵詞AJAXWeb開發(fā)AJAX控件

1引言當前，Web技術的不斷發(fā)展使得B/S得以廣泛地應用。但Web傳統(tǒng)的開發(fā)技術使得網(wǎng)頁的交互性能大打折扣。隨著AJAX技術的興起，Web開發(fā)技術超越了傳統(tǒng)的開發(fā)模式，發(fā)生了質(zhì)的飛躍。而微軟公司推出的AJAX框架與的結合，使得Web的開發(fā)方式在.NET環(huán)境下更加簡單易用，頁面交互性能也得到很大提高。

2Ajax引擎的原理AJAX是現(xiàn)有多種技術的綜合，包括JavaScript、XHTML、CSS、DOM、XML、XSTL和XMLHttpRequest。AJAX使用XHTML和CSS標準化呈現(xiàn)數(shù)據(jù)，使用DOM實現(xiàn)動態(tài)顯示和交互數(shù)據(jù)，使用XML和XSTL進行數(shù)據(jù)交換與處理，使用XMLHttpRequest對象進行異步數(shù)據(jù)讀取，使用JavaScript綁定和處理所有數(shù)據(jù)。AJAX為交互操作較多、數(shù)據(jù)讀寫頻繁和數(shù)據(jù)分類良好的Web應用提供了一個很好的解決方案。其中XMLHttpRequest、JavaScript和DOM是AJAX技術的核心。

XMLHttpRequestXMLHttpRequest是AJAX引擎的核心技術，是AJAX引擎解決無需刷新整個頁面即可從服務器獲取所需數(shù)據(jù)問題的關鍵。在微軟IE平臺下XMLHttpRequest是XMLHTTP組件的一個對象，它通過允許開發(fā)人員在Web頁面內(nèi)部使用XMLHTTPActiveX組件擴展自身功能，開發(fā)人員不必從當前的Web頁面導航而直接與服務器上的數(shù)據(jù)庫進行雙向數(shù)據(jù)傳輸。該項功能相當重要，它彌補了無狀態(tài)連接的缺點，排除下載冗余Web數(shù)據(jù)的需要，從而提高了進程速度。

DOM(DocumentobjectModel)DOM是給HTML和XML文件使用的一組API。它提供了文件的結構表述，允許開發(fā)人員改變其中的內(nèi)容，建立網(wǎng)頁與程序語言溝通的橋梁。所有Web開發(fā)人員操作及建立文件的屬性、方法及事件都以對象方式來展現(xiàn)，這些對象均可由當今大多數(shù)瀏覽器以腳本取用。一個用HTML或XHTML構建的網(wǎng)頁可看作是一組結構化數(shù)據(jù)，這些數(shù)據(jù)被封在DOM(DocumentObjectModel）中，且DOM提供對網(wǎng)頁中各個對象的讀寫支持。

JavaScriptJavaScript是一種在瀏覽器中大量使用的跨平臺編程語言，常被用來制作網(wǎng)頁特效或表單驗證。在AJAX中JavaScript則是XMLHttpRequest與DOM交互的橋梁以及AJAX引擎工作的主要推動力。JavaScript通過調(diào)用XMLHttpRequest的屬性和方法獲取服務器端數(shù)據(jù)，調(diào)用DOM的API更新Web頁面內(nèi)容，從而實現(xiàn)整個頁面的無刷新更新頁面的效果。

3AJAX架構AJAX由客戶端腳本庫和服務端組件組成，這兩者被集成在一起提供了一個功能強大的開發(fā)框架?？蛻舳四_本庫中包含兩種最熟悉的動態(tài)網(wǎng)頁技術，分別是跨瀏覽器使用的ECMAScript(JavaScript)技術和動態(tài)的HTML(DHTML)網(wǎng)頁開發(fā)技術，并且將這兩種技術集成到了基于服務器端的開發(fā)平臺中。圖1解釋說明了包含客戶端腳本庫和服務端組件的AJAX的功能。

服務器端架構服務器端組件由控件和組件構成，用于管理UI和應用程序流，管理序列，驗證和控件擴展性等。此外，Web服務也能用于訪問應用服務，包括窗體驗證和用戶驗證。

服務器控件AJAX控件由服務器端和客戶端代碼構成在一起以產(chǎn)生類似于AJAX的行為。以下是最常用的AJAX控件?！馭criptManager控件●UpdatePanel控件●UpdateProgress控件●Timer控件

AJAX客戶端架構AJAX客戶端腳本庫由JavaScript(.js)文件構件。這些.js文件提供了面向?qū)ο箝_發(fā)的特性。這一特性使得連續(xù)性和模塊化在客戶端腳本中達到一個新的層次。以下是AJAX中客戶端的各個層次。⑴瀏覽器的兼容層。通過最常用的瀏覽器為AJAX腳本提供兼容性。⑵AJAX核心服務，這種核心服務已經(jīng)擴展到了JavaScript。例如classes，namespaces，eventhandling，inheritance，datatypes，andobjectserialization。⑶AJAX基礎類庫，包括組件如stringbuildersandextendederrorhandling。⑷網(wǎng)絡工作層。該層用于處理基于Web服務和應用之間的通信，管理異步式遠程方法的調(diào)用。圖1AJAX服務器和客戶端架構

4AJAX在Web開發(fā)中的應用

AJAX開發(fā)環(huán)境圖2AJAX服務器控件在Web開發(fā)應用中，利用VS2005開發(fā)工具和框架進行Web頁面的開發(fā)是值得推薦的一種方法。VS2005開發(fā)工具本身并沒有集成這一框架，因此，在做Web開發(fā)時就必須安裝這一框架?？梢詮奈④浌俜骄W(wǎng)站上下載。下載安裝后，可在VS2005開發(fā)環(huán)境中看到AJAX服務器控件。如圖2所示。要注意的是，安裝AJAX框架后，并不是VS2005開發(fā)環(huán)境中的所有頁面模板都能支持AJAX技術。只有AJAX提供的默認模板才能支持。對于其他模板，如果要想支持AJAX，就必須配置文件。具體配置可以參考微軟官方文檔。

AJAX控件在Web開發(fā)中的應用ScriptManager控件用來處理頁面上的所有組件以及頁面局部更新，生成相關的客戶端代理腳本以便能夠在JavaScript中訪問WebService，所有需要支持AJAX的頁面上有且只能有一個ScriptManager控件，并且，如果要使用其他AJAX控件，就必須要有ScriptManager控件的支持。在ScriptManager控件中我們可以指定需要的腳本庫，或者指定通過JS來調(diào)用的WebService，還可以指定頁面錯誤處理等。使用asp：ScriptManager/來定義一個ScriptManager，簡單的ScriptManager定義形式是：asp：ScriptManagerID="ScriptManager1"runat="server"AuthenticationServicePath=""/ProfileServiceLoadProperties=""Path=""/Scriptsasp：ScriptReference//ScriptsServicesasp：ServiceReference//Services/asp：ScriptManager默認情況下，ScriptManager控件為頁面中的微軟腳本庫注冊腳本。以使客戶端腳本庫進行各種系統(tǒng)擴展，并且支持局部頁面刷新和WebServices回調(diào)的特性。在Web應用開發(fā)中，ScriptManager控件是必須的。要使用AJAX控件，每個.aspx頁面上必須有且只有一個ScriptMangeger控件。當.aspx頁面與母版頁結合作為內(nèi)容頁使用時，只須在母版頁上放置一個ScriptManger控件，內(nèi)容頁上無須再放該控件。值得注意的是，頁面上任何用ScriptManger控件注冊的腳本和所有事件處理腳本都必須在頁面form元素內(nèi)。否則腳本將不會被注冊或者被執(zhí)行。UpdatePanel控件該控件可以用來創(chuàng)建豐富的局部更新Web應用程序，它是AJAXExtensions中很重要的一個控件，其強大之處在于不用編寫任何客戶端腳本，只要在一個頁面上添加幾個UpdatePanel控件和一個ScriptManager控件就可以自動實現(xiàn)局部更新。一個頁面上可以放一個或者多個UpdatePanel控件，并且UpdatePanel控件還可以嵌套使用。UpdatePanel的工作依賴于ScriptManager服務端控件UpdatePanel的工作原理如圖3如示。圖3UpdatePanel的工作原理圖

簡單的UpdatePanel定義asp：UpdatePanelID="UpdatePanel1"runat="server"ContentTemplate/ContentTemplateTriggersasp：AsyncPostBackTrigger/asp：PostBackTrigger//Triggers/asp：UpdatePanelContentTemplate標簽用來定義UpdatePanel的內(nèi)容，在它里面可以放任何元素。Triggers屬性有兩種：分別為AsyncPostBackTrigger和PostBackTrigger。AsyncPostBackTrigge用來指定某個服務器端控件以及其將觸發(fā)的服務器端事件作為該UpdatePanel的異步更新觸發(fā)器，它需要設置的屬性有控件ID和服務端控件的事件；PostBackTrigger用來指定在UpdatePanel中的某個服務端控件，它所引發(fā)的回送不使用異步回送，而仍然是傳統(tǒng)的整頁回送。UpdateProgress控件在UpdatePanel控件中的內(nèi)容進行局部刷新時，該控件可以提供刷新狀態(tài)的信息。前文所述，一個頁面上可以放一個或者多個UpdatePanel控件，但是，當其中一個UpdatePanel中更新的內(nèi)容很緩慢，需要用戶等待很長時間時，很容易讓用戶誤以為應用程序處于“死機”狀態(tài)。在這種情況下，UpdateProgress控件就發(fā)揮出它的特性，提供頁面部分內(nèi)容刷新時的狀態(tài)信息。一個頁面上，一個UpdateProgress控件可以和一個UpdataPanel控件關聯(lián)，也可以和多個UpdatePanel控件關聯(lián)。UpdateProgress控件提供了AssociatedUpdatePanelID屬性，可以指定UpdateProgress控件顯示哪一個UpdatePanel控件。UpdateProgress控件的簡單定義asp：UpdateProgressID=”UpdateProgress1”runat=”server”AssociatedUpdatePanelID=UpdatePanel1"ProgressTemplate數(shù)據(jù)正在讀取中，請稍后……/ProgressTemplate/asp：Timer控件該控件用于在一個規(guī)定的時間內(nèi)執(zhí)行提交操作。使用Timer控件可以執(zhí)行提交整個頁面操作，也可以和UpdatePanel控件一起使用，在規(guī)定時間內(nèi)執(zhí)行頁面的局部刷新操作。Timer控件作為服務器控件將JavaScript部件嵌入到了Web頁面中，當Timer控件的Interval屬性設置的間隔時間到達時，該部件便會激發(fā)來自于瀏覽器的提交操作。Timer控件設置的屬性操作在服務器端運行，并且將這些屬性值傳遞給JavaScript部件。與其他控件一樣，Timer控件也需要依賴于ScriptManager控件。Timer控件既可以放在UpdatePanel控件外，也可以放在UpdatePanel控件內(nèi)。其簡單的定義asp：TimerID="Timer1"runat="server"/asp：Timer值得注意的是，如果把Timer控件的Interval屬性值設置得過小，會對Web服務器造成嚴重的阻塞。所以，當頁面上要刷新的內(nèi)容部分是必要的而且是頻繁的時候，才考慮使用Timer控件。

5VS2005開發(fā)環(huán)境中使用AJAX控件要注意的問題在利用VS2005進行Web開發(fā)的過程中，需要使用各種服務器控件。一般情況下，VS2005的常用控件都是可以和AJAX控件結合使用的。但是，以下控件與AJAX控件有不相兼容的地方，是需要注意的。

與UpdatePanel控件不兼容的控件⑴TreeView和Menu控件；WebParts控件；Substitution控件。⑵登錄控件，如Login，PasswordRecovery，ChangePassword和CreateUserWizard控件。在默認情況下，上述控件與UpdatePanel控件是不相兼容的。當上述控件轉(zhuǎn)換為可編輯狀態(tài)時，登錄控件中的驗證控件便可以與UpdatePanel控件兼容。⑶驗證控件類。如BaseCompareValidator，BaseValidator，CompareValidator，customValidator，RangeValidator，RegularExpressionValidator，RequiredFieldValidator和ValidationSummary控件。這些控件在默認情況下也可以與UpdatePanel控件結合使用，但是在Web應用程序發(fā)布之后，上述驗證功能可能會出現(xiàn)失效情形。要使得這些驗證控件能與UpdatePanel控件兼容，需要把上述驗證類控件的EnableClientScript屬性設置為false。這樣，就不允許客戶端腳本被用于在瀏覽器端執(zhí)行驗證操作。在異步式提交操作中，驗證控件就會在服務器端執(zhí)行驗證操作。⑷GridView和DetailsView控件。在默認情況下，GridView和DetailsView控件與UpdatePanel控件可正常兼容使用。但是，如果把它們的EnableSortingAndPagingCallbacks屬性設置為True的時候(默認值為False)，在UpdatePanle中的GridView和DetailsView控件的排序和分頁功能將失效。⑸FileUpload控件。FileUpload控件在默認情況下，放在UpdatePanel中并且有控件觸發(fā)時，不能發(fā)揮上傳作用。但是當UpdatePanel的Triggers屬性中，設置觸發(fā)控件為PostBack時，F(xiàn)ileUpload可以發(fā)揮上傳功能，只是整個頁面不能局部刷新。

頁面跳轉(zhuǎn)要注意的問題通常情況下，開發(fā)Web應用程序就必然會有頁面之間的傳值與跳轉(zhuǎn)。如果UpdatePanel內(nèi)有觸發(fā)頁面跳轉(zhuǎn)的控件，那么該控件的事件中就不能用如下的語句，否則會彈出異常的對話框。⑴調(diào)用()：⑵調(diào)用Responsefilters：⑶HttpModules：⑷調(diào)用()。

利用AJAX控件后，彈出對話框的問題在使用AJAX控件后，如果想利用Js腳本來輸出一些提示對話框，往往會想到利用