《ASP NET 3.5從基礎(chǔ)到項(xiàng)目實(shí)戰(zhàn)》課件第10章ASP.NET AJAX

第10章ASP.NETAJAXAJAX并不是一項(xiàng)新技術(shù)，它的本質(zhì)是結(jié)合JavaScript語(yǔ)言、css樣式以及異步傳輸?shù)染幊碳夹g(shù)來(lái)創(chuàng)建動(dòng)態(tài)網(wǎng)站。AJAX與其說(shuō)是一種技術(shù)，倒不如說(shuō)是一種Web開(kāi)發(fā)理念，它的出現(xiàn)，使無(wú)刷新技術(shù)得到廣泛應(yīng)用和推廣。目前使用AJAX理念制作的網(wǎng)站中，比較有代表性的主要有Google主頁(yè)、GoogleSuggest、GoogleMaps、Gmail等，它們從視覺(jué)和可用性上大大滿足了用戶的需要。本章將結(jié)合ASP.NET3.5技術(shù)與AJAX理念來(lái)學(xué)習(xí)AJAX在ASP.NET平臺(tái)中的使用。章節(jié)內(nèi)容10.1AJAX基本思想10.2ASP.NET3.5對(duì)AJAX的支持與開(kāi)發(fā)10.3異步調(diào)用WebService和頁(yè)面中的類方法10.1AJAX基本思想AJAX改變了傳統(tǒng)的Web中客戶端和服務(wù)器的“請(qǐng)求→等待→請(qǐng)求→等待”模式。在AJAX理念中，它將頁(yè)面劃分為多個(gè)部分，當(dāng)用戶對(duì)其中的一部分進(jìn)行數(shù)據(jù)操作時(shí)，Web頁(yè)面的這一部分會(huì)立即向服務(wù)器發(fā)送請(qǐng)求，而用戶可以對(duì)Web頁(yè)面中的其他數(shù)據(jù)進(jìn)行操作，無(wú)需等待服務(wù)器發(fā)送回的處理結(jié)果，從而減少了用戶的等待時(shí)間和服務(wù)器與客戶端之間的“請(qǐng)求→回發(fā)”時(shí)間。10.1.1應(yīng)用場(chǎng)景AJAX最主要的特點(diǎn)是異步通信、按需求讀取數(shù)據(jù)和動(dòng)態(tài)更新Web頁(yè)面，其功能十分強(qiáng)大，但是AJAX并不適用于所有情況，它所適用的環(huán)境，常常是客戶端與服務(wù)器端頻繁的交互數(shù)據(jù)、需要?jiǎng)討B(tài)更新Web頁(yè)面等情況。對(duì)于客戶端與服務(wù)器端之間極少進(jìn)行數(shù)據(jù)交互或客戶端Web頁(yè)面并非動(dòng)態(tài)實(shí)時(shí)更新的情況，應(yīng)該盡量避免使用AJAX。這是為什么呢？因?yàn)槭褂肁JAX時(shí)，在提供了良好的用戶體驗(yàn)的同時(shí)，也增加了服務(wù)器端的壓力，服務(wù)器端需要花費(fèi)大量的資源來(lái)進(jìn)行數(shù)據(jù)處理，因此AJAX只有在適當(dāng)?shù)牡胤绞褂?，才能發(fā)揮出它的優(yōu)勢(shì)。10.1.1應(yīng)用場(chǎng)景（1）表單數(shù)據(jù)的交互。在傳統(tǒng)的Web開(kāi)發(fā)中，數(shù)據(jù)通過(guò)表單提交。在文本框輸入內(nèi)容后單擊提交按鈕，客戶端頁(yè)面中的數(shù)據(jù)會(huì)發(fā)送到服務(wù)器端。等服務(wù)器端處理完數(shù)據(jù)之后，再將處理的結(jié)果發(fā)送到客戶端，這個(gè)時(shí)候頁(yè)面會(huì)刷新，用戶需要花費(fèi)大量的時(shí)間來(lái)等待處理的結(jié)果。使用AJAX之后，單擊提交按鈕，立刻進(jìn)行異步處理，并在頁(yè)面上快速顯示了更新后的結(jié)果，這時(shí)AJAX只會(huì)控制做數(shù)據(jù)提交的那部分刷新，而整個(gè)Web頁(yè)面不會(huì)刷新，在服務(wù)器處理數(shù)據(jù)時(shí)，用戶可以瀏覽Web頁(yè)面中的其他信息，而不再需要面對(duì)一個(gè)空白頁(yè)面等待。10.1.1應(yīng)用場(chǎng)景（2）快速的用戶與用戶之間的交流響應(yīng)。許多人通過(guò)Web進(jìn)行交流時(shí)，經(jīng)常需要不停的刷新頁(yè)面，從而將用戶最新發(fā)表的看法呈現(xiàn)出來(lái)。特別是在使用Web聊天室時(shí)，如果使用傳統(tǒng)的開(kāi)發(fā)技術(shù)來(lái)實(shí)現(xiàn)，用戶需要不停地刷新頁(yè)面。使用AJAX之后，用戶就可以省去這些操作，AJAX會(huì)將最新的發(fā)言動(dòng)態(tài)地刷新出來(lái)，使網(wǎng)絡(luò)中的用戶可以及時(shí)看到。用戶可以專心地來(lái)進(jìn)行指定話題的思考與討論。10.1.1應(yīng)用場(chǎng)景（3）對(duì)數(shù)據(jù)進(jìn)行過(guò)濾和操縱相關(guān)數(shù)據(jù)的場(chǎng)景。對(duì)數(shù)據(jù)使用過(guò)濾器，按照時(shí)間排序，或者按照時(shí)間和名稱排序，開(kāi)關(guān)過(guò)濾器等。任何要求具備很高交互性數(shù)據(jù)操縱的場(chǎng)合都應(yīng)該用JavaScript，而不是用一系列的服務(wù)器請(qǐng)求來(lái)完成。在每次數(shù)據(jù)更新后，再對(duì)其進(jìn)行查找和處理需要耗費(fèi)較多的時(shí)間，而AJAX可以加速這個(gè)過(guò)程。10.1.1應(yīng)用場(chǎng)景（4）數(shù)據(jù)驗(yàn)證。數(shù)據(jù)驗(yàn)證是Web開(kāi)發(fā)中經(jīng)常會(huì)遇到的問(wèn)題。數(shù)據(jù)驗(yàn)證通常有兩種方式：一種是直接填寫，然后提交表單，這種方式需要將整個(gè)頁(yè)面提交到服務(wù)器端進(jìn)行驗(yàn)證，整個(gè)過(guò)程不僅時(shí)間長(zhǎng)而且造成了服務(wù)器不必要的負(fù)擔(dān)；第二種方式是改進(jìn)了的驗(yàn)證過(guò)程，用戶可以通過(guò)單擊相應(yīng)的驗(yàn)證按鈕，打開(kāi)新窗口查看驗(yàn)證結(jié)果，但是這樣需要新開(kāi)一個(gè)瀏覽器窗口，還需要專門編寫驗(yàn)證的頁(yè)面，比較耗費(fèi)系統(tǒng)資源。使用AJAX技術(shù)，可以由XMLHttpRequest對(duì)象發(fā)出驗(yàn)證請(qǐng)求，根據(jù)返回的HTTP響應(yīng)判斷驗(yàn)證是否成功，整個(gè)過(guò)程不需要彈出新窗口，也不需要將整個(gè)頁(yè)面提交到服務(wù)器，快速而又不會(huì)加重服務(wù)器的負(fù)擔(dān)。10.1.2開(kāi)發(fā)模式通過(guò)ASP.NET使用AJAX時(shí)，通常會(huì)有以下幾種開(kāi)發(fā)模式。（1）XMLHttp+WebForm模式XMLHttp+WebForm模式是ASP.NET下最原始的開(kāi)發(fā)模式。這種模式直接利用JavaScript操作XMLHttp對(duì)象，發(fā)送異步請(qǐng)求到服務(wù)器端的Web窗體。服務(wù)器端頁(yè)面接到請(qǐng)求，進(jìn)行數(shù)據(jù)處理，并將處理結(jié)果返回給XMLHttp對(duì)象，最后用JavaScript言語(yǔ)代碼將返回的結(jié)果顯示出來(lái)。10.1.2開(kāi)發(fā)模式（2）XMLHttp+HttpHandler模式XMLHttp+HttpHandler模式是對(duì)XMLHttp+WebForm模式的改進(jìn)，其客戶端代碼沒(méi)有任何變化，而在服務(wù)器端使用HttpHandler來(lái)接收和處理異步請(qǐng)求信息，對(duì)于數(shù)據(jù)的處理使用HttpHandler的ProcessRequest方法來(lái)處理。10.1.2開(kāi)發(fā)模式（3）ASP.NET回調(diào)模式回調(diào)模式使用ICallbackEventHandler接口，通過(guò)實(shí)現(xiàn)GetCallbackResult()方法來(lái)實(shí)現(xiàn)回調(diào)，最后通過(guò)調(diào)用ClientScript.GetCallbackEventReference()方法實(shí)現(xiàn)AJAX效果，這樣可以避免開(kāi)發(fā)者直接操縱XMLHTTP對(duì)象，在一定程度上簡(jiǎn)化了AJAX的開(kāi)發(fā)。10.1.2開(kāi)發(fā)模式（4）AJAX框架模式AJAX框架模式使用ASP.NET內(nèi)容提供的框架集合來(lái)開(kāi)發(fā)。這種框架比較多，如客戶端框架Prototype，服務(wù)器端框架ASP.NETAJAX、RadAJAX、AJAX.NET、ANTHEM.NET、MAGICAJAX.NET等。采用AJAX框架開(kāi)發(fā)的效率比較高，代碼穩(wěn)定性好，但同時(shí)也容易受到框架的束縛。在這些框架中最常用的當(dāng)屬ASP.NETAJAX，其中包括客戶端MicrosoftAJAXlibrary，服務(wù)器端的ASP.NET2.0AJAXExtensions，以及ASP.NETAJAXControlToolkit等，是一套完整的AJAX解決方案。10.2.1ASP.NET3.5AJAX在ASP.NET2.0以及以前的版本中，要想使用AJAX組件，需要下載和安裝。另外開(kāi)發(fā)人員還需要將相應(yīng)的DLL文件分類存放，并配置Web.config文件才能夠?qū)崿F(xiàn)AJAX功能。但是在ASP.NET3.5中微軟對(duì)此做了修正，AJAX組件已經(jīng)封裝在.NET框架中。在ASP.NET3.5創(chuàng)建的網(wǎng)站項(xiàng)目中，可以直接使用內(nèi)部封裝的AJAX控件。這些AJAX控件讀者可以在VS2008“工具箱”中找到。10.2.1ASP.NET3.5AJAXASP.NET3.5中的Web.config支持AJAX技術(shù)的代碼如下。<pages><controls><addtagPrefix="asp"namespace="System.Web.UI"assembly="System.Web.Extensions,Version=,Culture=neutral,ublicKeyToken=31BF3856AD364E35"/><addtagPrefix="asp"namespace="System.Web.UI.WebControls"assembly="System.Web.Extensions,Version=,Culture=neutral,PublicKeyToken=31BF3856AD364E35"/></controls></pages>10.2.1ASP.NET3.5AJAXASP.NET3.5AJAX擴(kuò)展組件。組件描述Control基本UI組件，包括TextBox、Button等Behavior行為組件，用于給組件添加行為Action動(dòng)作響應(yīng)組件，響應(yīng)特定的動(dòng)作Animation動(dòng)畫組件，用來(lái)給組件添加動(dòng)畫效果Data數(shù)據(jù)組件，包括DataView等與數(shù)據(jù)顯示有關(guān)的組件Validator驗(yàn)證組件，用于用戶輸入數(shù)據(jù)的驗(yàn)證Drag拖放組件，用于創(chuàng)建可拖放式的AJAX應(yīng)用Bind綁定組件，用于實(shí)現(xiàn)綁定技術(shù)Counter客戶端計(jì)數(shù)器10.2.2ASP.NET中的AJAX控件在ASP.NET3.5中，.NET框架封裝了AJAX功能，這使開(kāi)發(fā)人員可以更加方便快捷地使用AJAX來(lái)創(chuàng)建無(wú)刷新的網(wǎng)站項(xiàng)目。ASP.NET3.5中提供的AJAX控件主要包括ScriptManger、UpdatePanel、ScriptMangerProxy、Timer、UpdateProgress。10.2.2ASP.NET中的AJAX控件（1）腳本管理控件（ScriptManger）腳本管理控件主要用來(lái)管理頁(yè)面中的腳本語(yǔ)言，在ASP.NETAJAX中具有非常重要的作用。ScriptManger控件只能在頁(yè)面中使用一次，也就是說(shuō)每個(gè)頁(yè)面中只能放置一個(gè)ScriptManger控件。ScriptManger控件用來(lái)對(duì)頁(yè)面進(jìn)行全局管理，處理頁(yè)面上的局部更新，同時(shí)生成相關(guān)的代理腳本語(yǔ)言代碼，從而實(shí)現(xiàn)頁(yè)面的異步通信，通過(guò)JavaScript語(yǔ)言對(duì)WebService進(jìn)行訪問(wèn)。10.2.2ASP.NET中的AJAX控件（2）更新區(qū)域控件（UpdatePanel）更新區(qū)域控件主要用來(lái)控制頁(yè)面中局部刷新的區(qū)域，頁(yè)面中所有需要頻繁與服務(wù)器端交互的操作都可以放在此控件內(nèi)部。使用UpdatePanel控件來(lái)限定頁(yè)面刷新區(qū)域的好處是，凡是在UpdatePanel控件內(nèi)部的操作，不會(huì)引起頁(yè)面的整體刷新，它只會(huì)刷新UpdatePanel控件內(nèi)部的內(nèi)容。10.2.2ASP.NET中的AJAX控件（3）腳本管理控件（ScriptMangerProxy）在使用ASP.NET開(kāi)發(fā)應(yīng)用程序時(shí)，會(huì)經(jīng)常使用母版頁(yè)來(lái)對(duì)網(wǎng)站的風(fēng)格進(jìn)行統(tǒng)一布局，但是ScriptManger控件只能在頁(yè)面中使用一次，當(dāng)在母版頁(yè)中使用了ScriptManger控件之后，在其他內(nèi)容頁(yè)面中就無(wú)法使用ScriptManger控件了，這樣就妨礙了在內(nèi)容頁(yè)中使用無(wú)刷新技術(shù)。10.2.2ASP.NET中的AJAX控件（4）時(shí)間控件（Timer）時(shí)間控件是用來(lái)設(shè)置頁(yè)面定時(shí)刷新的控件，其用處比較廣泛，但是在使用Timer控件來(lái)刷新頁(yè)面時(shí)，總是會(huì)引起整個(gè)頁(yè)面的刷新。在ASP.NET3.5AJAX中結(jié)合AJAX無(wú)刷新技術(shù)，解決了這個(gè)問(wèn)題，開(kāi)發(fā)人員可以在頁(yè)面中隨意使用Timer控件，而不用擔(dān)心頁(yè)面會(huì)整體刷新。10.2.2ASP.NET中的AJAX控件（5）更新進(jìn)度控件（UpdateProgress）更新進(jìn)度控件的主要功能是在前臺(tái)頁(yè)面等待服務(wù)器回傳數(shù)據(jù)的過(guò)程中呈現(xiàn)一個(gè)動(dòng)畫。有些時(shí)候，由于網(wǎng)絡(luò)的問(wèn)題，頁(yè)面反應(yīng)比較慢，從而使服務(wù)器回傳的數(shù)據(jù)呈現(xiàn)在用戶面前也比較慢，這個(gè)時(shí)候，用戶需要花費(fèi)比較長(zhǎng)的時(shí)間來(lái)面對(duì)枯燥的頁(yè)面，而UpdateProgress控件的出現(xiàn)使用戶的等待不再枯燥，而且還能及時(shí)地了解到數(shù)據(jù)回傳的進(jìn)度。10.3ASP.NETAJAX對(duì)JavaScript的擴(kuò)展JavaScript語(yǔ)言對(duì)于Web前臺(tái)頁(yè)面具有重要的作用，其具有非常靈活的特性，而且支持面向?qū)ο缶幊蹋瑑?nèi)部封裝的類庫(kù)可以支持一般性的Web網(wǎng)站開(kāi)發(fā)。但是它也有不足之處，畢竟JavaScript語(yǔ)言不是純面向?qū)ο缶幊痰恼Z(yǔ)言，在對(duì)面向?qū)ο蠓矫孢€有一些不足，而且內(nèi)部封裝的類庫(kù)也有限，無(wú)法滿足當(dāng)前網(wǎng)站開(kāi)發(fā)的需要。而在ASP.NET平臺(tái)，使用Atlas技術(shù)對(duì)JavaScript語(yǔ)言進(jìn)行了一些擴(kuò)展，從而彌補(bǔ)JavaScript語(yǔ)言自身的不足，也滿足了當(dāng)前網(wǎng)站開(kāi)發(fā)的需要。在ASP.NETAJAX中對(duì)JavaScript語(yǔ)言的擴(kuò)展主要包括：String對(duì)象的擴(kuò)展、Array對(duì)象的擴(kuò)展和Number對(duì)象的擴(kuò)展。10.3ASP.NETAJAX對(duì)JavaScript的擴(kuò)展成員描述StringString.ltrim()移除原String開(kāi)頭部分所有的空格，并返回一個(gè)新String對(duì)象StringString.rtrim()移除原String結(jié)尾部分所有的空格，并返回一個(gè)新String對(duì)象StringString.trim()移除原String開(kāi)頭和結(jié)尾部分所有的空格，并返回一個(gè)新String對(duì)象BooleanString.endsWidth(strEnd)該String是否以傳入的String結(jié)束B(niǎo)ooleanString.startsWith(strStart)該String是否以傳入的String開(kāi)始StringString.format(args1,args2,.)類似于C#中的String.Format()，被操作的String中的{n}將被代替為相應(yīng)的第n個(gè)參數(shù)，并返回一個(gè)新String對(duì)象StringString.removeSpaces()移除原String中的所有空格，并返回一個(gè)新String對(duì)象StringString.removeExtraSpaces()將原String中連續(xù)的空格置換成單一的空格（包括回車），并返回一個(gè)新String對(duì)象StringString.removeSpaceDelimitedString(str)將原String中的指定單詞（被空格分開(kāi)的文字片斷）移除，并返回一個(gè)新String對(duì)象。這個(gè)方法可以用在刪除包含多個(gè)class名稱DOM元素的某個(gè)class名稱時(shí)10.4異步調(diào)用WebService和頁(yè)面中的類方法1．異步調(diào)用WebService在ASP.NETAJAX中WebService具有重要的作用，是ASP.NETAJAX服務(wù)中最受推崇的實(shí)現(xiàn)方式。WebService的誕生是純粹為了業(yè)務(wù)邏輯而設(shè)計(jì)的。在WebService服務(wù)中，用戶界面比較簡(jiǎn)單，沒(méi)有像ASP.NET服務(wù)器控件那樣提供過(guò)多的樣式特征，它把精力都放在了程序邏輯實(shí)現(xiàn)上了，這與ASP.NETAJAX客戶端編程模型所倡導(dǎo)的“將表現(xiàn)層和業(yè)務(wù)邏