本文英文原版及代碼下載：
http://aspnet.4guysfromrolla.com/articles/062106-1.aspx

淺談ASP.NET 2.0里面的AJAX 和 Atlas

導(dǎo)言：

傳統(tǒng)上，web應(yīng)用程序主要運(yùn)用"請求/回應(yīng)"模式。然后頁面交互，典型的情況是向web服務(wù)器上請求一個回轉(zhuǎn)(一個請求)，然后執(zhí)行服務(wù)器端工作并返回一個更新過的頁面(一個回應(yīng)).這樣的話，當(dāng)進(jìn)行頁面交互的時候多少會有些延遲.要提高用戶體驗(yàn)的話，其中一種方法是使用AJAX.AJAX是一種使用JavaScript 和 XMLHttpRequest對象的技術(shù).它可以把從客戶端發(fā)往web服務(wù)器的HTTP requests進(jìn)行“瘦身”(light-weight).一旦接收到回應(yīng)，頁面就使用JavaScript通知頁面的 Document Object Model (DOM) 和 CSS 設(shè)置進(jìn)行無縫刷新.

過去，向web程序添加AJAX類型是比較困難的，并且學(xué)習(xí)起來比較難，因?yàn)锳JAX包括了很多技術(shù)(JavaScript, XML, XmlHttpObject, HTTP requests, DHTML等等)，不過隨著ASP.NET Atlas framework的出現(xiàn).當(dāng)談到AJAX時就用不著嘆氣了.

在本文，我們首先介紹AJAX a以及 Microsoft's Atlas framework的概念.接下來，我們通過一個簡單的示例講解這些概念.最后，通過一個稍微復(fù)雜點(diǎn)的示例見識 Atlas的威力，并向GridView控件添加AJAX行為，最后的案例顯示，向一個現(xiàn)有的或新建的web程序添加AJAX行為是很容易的.

AJAX 和 Atlas的基本概念

AJAX表示異步JavaScript和XML. (Asynchronous JavaScript and XML).AJAX技術(shù)的核心是XMLHttpRequest object對象，該對象便于以異步方式向web服務(wù)器傳送更少量的數(shù)據(jù)，而不是每次當(dāng)用戶做出改動時刷新整個頁面.就像前面提到的那樣，在以前，AJAX技術(shù)很難執(zhí)行，因?yàn)殚_發(fā)者需要寫客戶端JavaScript來進(jìn)行異步請求并處理回應(yīng).自然，服務(wù)器端代碼也要處理這種“局部”回傳.此外，瀏覽器在執(zhí)行DOM 和 XMLHttpObject的細(xì)微差異也會使事情變的不那么簡單.

針對執(zhí)行AJAX技術(shù)面臨的這些困難，微軟推出了Atlas framework，它是對ASP.NET的擴(kuò)充，用它可以很容易的貫徹到你的ASP.NET web應(yīng)用程序中，真是難以置信.比如，使用Atlas的話，你不必再擔(dān)心瀏覽器的兼容性，因?yàn)锳tlas framework會根據(jù)客戶端瀏覽器的不同，輸出相應(yīng)的代碼.

本文接下來將演示如何構(gòu)建一個使用AJAX技術(shù)的頁面；這2個例子可以在本文結(jié)尾處下載得到.假定你安裝的是Visual Studio 2005(或Web Developer)，以及SQL Server 2005 Express版.(對那些非SQL Server 2005Express版本的用戶，我們稍后會提供相應(yīng)的用法說明，指導(dǎo)如何順利的運(yùn)行第二個示例)

一個基本的Atlas示例

讓我們先來演示一個簡單的示例。首先我們要網(wǎng)站Atlas website(atlas.asp.net)上去下載并安裝April CTP setup (.msi)文件( http://www.microsoft.com/downloads/details.aspx?FamilyId=B01DC501-B3C1-4EC0-93F0-7DAC68D2F787&displaylang=en ). 在默認(rèn)安裝即可，該安裝文件將在你的Visual Studio 2005 或 Visual Web Developer里安裝Atlas website 模板.

現(xiàn)在你已經(jīng)安裝了Atlas模板.打開Visual Studio 2005，在File菜單里選“New Web Site” .

圖1：

在My Templates里選Atlas Web Site項(xiàng)，在location里做相應(yīng)的設(shè)置，再點(diǎn)OK.該Atlas Web Site模板以已經(jīng)做了最初的準(zhǔn)備工作。比如，在解決資源管理器里，查看 /bin目錄的話,你將會看到一個Microsoft.Web.Atlas.dll編譯文件.此外，你查看Web.config文件的話，你將看到所有必須的“掛鉤”(hooks)開始向Web應(yīng)用程序添加Atlas functionality.(在此，我不打算講解Web.config文件里有關(guān)Atlas的屬性，你想更多的了解的話，請參閱Atlas documentation： http://www.asp.net/ajax/documentation/live/ )

最后，如果你查看Default.aspx頁面的源代碼，你可以看到Atlas新添加了一個 server控件：

<atlas:ScriptManager ID="ScriptManager1" runat="server" />

在每一個使用Atlas functionality的頁面，你必須使用ScriptManager控件聲明.我們先忽略頁面底部的<script>模塊，直接看我們的示例.

首先，在Default.aspx頁面里輸入如下的代碼片段，以替換<form>標(biāo)簽里的現(xiàn)有代碼：

<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>

<div style="background-color: Yellow; float: left; width: 100px;">
<asp:Label ID="FullPostBackLabel" runat="server" /><br />
<asp:Button ID="FullPostBackButton" runat="server" text="Full Post Back" OnClick="FullPostBackButton_OnClick" />
</div>

<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>
<div style="background-color: Lime; width: 100px;">
<asp:Label ID="PartialPostBackLabel" runat="server" /><br />
<asp:Button ID="PartialPostBackButton" runat="server" text="Partial Post Back" OnClick="PartialPostBackButton_OnClick" />
</div>
</ContentTemplate>
</atlas:UpdatePanel>
</form>

簡單的說，這段代碼創(chuàng)建了2個用戶界面，且都用當(dāng)前的服務(wù)器時間來更新一個 Label控件。第一個界面使用標(biāo)準(zhǔn)的，“請求/回應(yīng)”模式完全回傳("Full Post Back"控件)；而第二個界面使用AJAX技術(shù)進(jìn)行局部回傳.我們不談第一個界面，那是不言而喻的。 我們將重點(diǎn)看第二個"Partial Post Back"控件.

就像你看到的那樣，ScriptManager控件添加了EnablePatialRendering屬性，且設(shè)置為rue. 這將允許ASP.NET部分回傳頁面而不是全部回傳。這就是我們想要的！要異步地處理部分回傳給web服務(wù)器的數(shù)據(jù)，為此我們要添加一個UpdatePanel 控件：

<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>
</ContentTemplate>
</atlas:UpdatePanel>

將參與異步回傳的ASP.NET控件放置在UpdatePanel的<ContentTemplate>標(biāo)簽里.該UpdatePanel的Mode屬性指示什么時候發(fā)生局部回傳.就本頁面而言，Mode屬性為Conditional，那就意味著下面3種事件之一發(fā)生時， UpdatePanel將會把其數(shù)據(jù)回傳給服務(wù)器：

1.明白無誤的調(diào)用UpdatePanel的Update()方法.
2.一個UpdatePanel事件導(dǎo)致Update()方法明白無誤的被調(diào)用.
3.包含在UpdatePanel里面的一個server控件導(dǎo)致一個頁面回傳

如果你忽略Mode特性的話,它默認(rèn)為Always,那就是說，當(dāng)頁面里的任何一個 server控件導(dǎo)致回傳時，UpdatePanel都要刷新.在本例中我們使用第三種方法來回傳UpdatePanel(那就是說，當(dāng)UpdatePanel里面的一個控件引發(fā)回傳的時候，該UpdatePanel就會回傳)。就像你看到的一樣，我們將一個Label 和 Button控件包含在<ContentTemplate>標(biāo)簽里，因此當(dāng)點(diǎn)擊Button控件時UpdatePanel就會回傳.

最后，在頁面的<head>表簽里添加如下的服務(wù)器端<script>模塊(如果你愿意的話，也可以添加到頁面的后臺代碼類里)

<script runat="server">
void FullPostBackButton_OnClick(object sender, EventArgs e)
{
FullPostBackLabel.Text = DateTime.Now.ToString();
}

void PartialPostBackButton_OnClick(object sender, EventArgs e)
{
PartialPostBackLabel.Text = DateTime.Now.ToString();
}
</script>

它們是頁面上2個Button控件的服務(wù)器端事件處理器(一個在UpdatePanel里面，一個在外面)，它們都會用服務(wù)器當(dāng)前的時間來對Label控件進(jìn)行更新.

我們來運(yùn)行，點(diǎn)擊這2個按鈕，之后你的屏幕看起來和下面的差不多：

圖2：

當(dāng)你點(diǎn)擊"Partial Post Back"按鈕時, 你將看到其上面的時間改變了但屏幕沒有任何的閃爍，頁面并沒有完全的回傳，也沒有改變其它部分的時間！點(diǎn)擊"Partial Post Back"按鈕的時候，使用XMLHttpRequest object對象向web服務(wù)器進(jìn)行異步回傳；web服務(wù)器然后返回信息.該簡單的示例向我們展示在你的web程序里使用Atlas執(zhí)行AJAX行為是很簡單的.

在下一個示例里，我們使用GridView控件，用局部回傳來更新、排序、分頁記錄！

構(gòu)建一個使用Atlas技術(shù)的GridView控件

我們來使用GridView控件進(jìn)行更具實(shí)踐性的示例。首先創(chuàng)建一個新個Atlas template工程.請下載本文的代碼，在AtlasSecondExample文件夾下的的App_Data文件夾里有一個名為Database.mdf的數(shù)據(jù)庫文件.將其復(fù)制到你新近創(chuàng)建的website的App_Data文件夾里

打開Default.aspx頁面，進(jìn)入source模式，在<form>標(biāo)簽里添加如下的代碼：

<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>

<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>

</ContentTemplate>
</atlas:UpdatePanel>
</form>

我們在第一個示例里解釋過了這些代碼，你理解起來應(yīng)該已經(jīng)沒有障礙了.

接下來，創(chuàng)建一個強(qiáng)類型的DataSet，在創(chuàng)建過程中你可以自動的生產(chǎn)nsert, update, delete SQL statements.關(guān)于使用強(qiáng)類型DataSet的好處已經(jīng)超出了本文的范疇，你可以參閱Scott Mitchell寫的《Working with Data in ASP.NET 2.0》系列教程.

在File菜單里選New File,再選DataSet，點(diǎn)Add(將其命名為DataSet1).然后詢問你是否將其放在App_Code文件夾里，選Yes. 這將打開DataSet Designer and the TableAdapter Configuration Wizard向?qū)?

圖3

確保在下拉列表里選中Database.mdf文件，再連續(xù)點(diǎn)3次Next，接著輸入SELECT statement，用從數(shù)據(jù)庫檢索的記錄填充到DataSet，鍵入下面的statement，再點(diǎn)2次Next，最后點(diǎn)Finish.

SELECT * FROM Employees

我們的SELECT statement僅僅返回Employees表的所有記錄.保存該強(qiáng)類型DataSet再關(guān)閉DataSet Designer.

現(xiàn)在我們將注意力轉(zhuǎn)移到構(gòu)建使用AJAX的GridView控件.打開Default.aspx頁面并切換到design模式，拖一個GridView控件到UpdatePanel內(nèi)部，在智能標(biāo)簽里，在“選擇數(shù)據(jù)源”里選擇“新數(shù)據(jù)源”。然后就開啟了Data Source Configuration Wizard向?qū)Вx擇“Object”并使用其默認(rèn)ID，再點(diǎn)OK. 接下來的屏幕我們將在下拉列表里看到我們創(chuàng)建的名為DataSet1TableAdapters.EmployeesTableAdapter的TableAdapter，選中它，點(diǎn)Next,再點(diǎn)Finish.

差不多就這些了！在GridView的智能標(biāo)簽里啟用分頁、排序、編輯功能.運(yùn)行該工程，你看到的輸出和下面的圖片差不多。

圖4

測試排序、分頁、編輯功能。我們注意到這些功能都是異步發(fā)生的！

最后我還想提一點(diǎn)，絕大多數(shù)用戶在與web頁面交互的時候，體驗(yàn)的是頁面產(chǎn)生回傳，屏幕閃爍一下后又重新對頁面進(jìn)行裝載.這樣用戶就可以知道頁面在進(jìn)行處理.但隨著AJAX的出現(xiàn)，就不會出現(xiàn)屏幕閃爍的情況了，不過最后還是通過某種感官效果來提示用戶頁面正進(jìn)行處理.一個比較簡單的方法是使用Atlas內(nèi)置的，稱為UpdateProgess的服務(wù)器控件.你可以添加該控件到任何頁面，無論何時一個 UpdatePanel產(chǎn)生回傳，UpdateProgress的<ProgressTemplate>標(biāo)簽里的所有內(nèi)容都會顯示出來，直到頁面更新完為止.你甚至可以放一個GIF圖像文件出來，提示用戶頁面正在處理.

<atlas:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Please wait...
</ProgressTemplate>
</atlas:UpdateProgress>

結(jié)語：

在本文，我們看到使用Microsoft的Atlas來執(zhí)行AJAX功能是多么的簡單。我們做了2個示例，第一個用來解釋AJAX和Atlas framework的基本概念.另一個示例演示了如何將一個ASP.NET server控件放在一個合適的Atlas server控件里，使其也可以使用AJAX技術(shù).欣慰的是，通過本文我們?yōu)槟憬议_了AJAX 和 Atlas的神秘面紗.

附錄：

名稱解釋：Hook

Hook是Windows中提供的一種用以替換DOS下“中斷”的系統(tǒng)機(jī)制，中文譯為“掛鉤”或“鉤子”。在對特定的系統(tǒng)事件進(jìn)行hook后，一旦發(fā)生已hook事件，對該事件進(jìn)行hook的程序就會受到系統(tǒng)的通知，這時程序就能在第一時間對該事件做出響應(yīng)。

淺談ASP.NET 2.0里面的AJAX 和 Atlas