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

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

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

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

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

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

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

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

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

服務(wù)器端架構(gòu)服務(wù)器端組件由控件和組件構(gòu)成，用于管理UI和應(yīng)用程序流，管理序列，驗(yàn)證和控件擴(kuò)展性等。此外，Web服務(wù)也能用于訪問應(yīng)用服務(wù)，包括窗體驗(yàn)證和用戶驗(yàn)證。

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

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

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

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

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

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

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

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

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

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