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

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