本文英文原版及代碼下載：
http://aspnet.4guysfromrolla.com/articles/062106-1.aspx
淺談ASP.NET 2.0里面的AJAX 和 Atlas
導言：
傳統上，web應用程序主要運用"請求/回應"模式。然后頁面交互，典型的情況是向web服務器上請求一個回轉(一個請求)，然后執行服務器端工作并返回一個更新過的頁面(一個回應).這樣的話，當進行頁面交互的時候多少會有些延遲.要提高用戶體驗的話，其中一種方法是使用AJAX.AJAX是一種使用JavaScript 和 XMLHttpRequest對象的技術.它可以把從客戶端發往web服務器的HTTP requests進行“瘦身”(light-weight).一旦接收到回應，頁面就使用JavaScript通知頁面的 Document Object Model (DOM) 和 CSS 設置進行無縫刷新.
過去，向web程序添加AJAX類型是比較困難的，并且學習起來比較難，因為AJAX包括了很多技術(JavaScript, XML, XmlHttpObject, HTTP requests, DHTML等等)，不過隨著ASP.NET Atlas framework的出現.當談到AJAX時就用不著嘆氣了.
在本文，我們首先介紹AJAX a以及 Microsoft's Atlas framework的概念.接下來，我們通過一個簡單的示例講解這些概念.最后，通過一個稍微復雜點的示例見識 Atlas的威力，并向GridView控件添加AJAX行為，最后的案例顯示，向一個現有的或新建的web程序添加AJAX行為是很容易的.
AJAX 和 Atlas的基本概念
AJAX表示異步JavaScript和XML. (Asynchronous JavaScript and XML).AJAX技術的核心是XMLHttpRequest object對象，該對象便于以異步方式向web服務器傳送更少量的數據，而不是每次當用戶做出改動時刷新整個頁面.就像前面提到的那樣，在以前，AJAX技術很難執行，因為開發者需要寫客戶端JavaScript來進行異步請求并處理回應.自然，服務器端代碼也要處理這種“局部”回傳.此外，瀏覽器在執行DOM 和 XMLHttpObject的細微差異也會使事情變的不那么簡單.
針對執行AJAX技術面臨的這些困難，微軟推出了Atlas framework，它是對ASP.NET的擴充，用它可以很容易的貫徹到你的ASP.NET web應用程序中，真是難以置信.比如，使用Atlas的話，你不必再擔心瀏覽器的兼容性，因為Atlas framework會根據客戶端瀏覽器的不同，輸出相應的代碼.
本文接下來將演示如何構建一個使用AJAX技術的頁面；這2個例子可以在本文結尾處下載得到.假定你安裝的是Visual Studio 2005(或Web Developer)，以及SQL Server 2005 Express版.(對那些非SQL Server 2005Express版本的用戶，我們稍后會提供相應的用法說明，指導如何順利的運行第二個示例)
一個基本的Atlas示例
讓我們先來演示一個簡單的示例。首先我們要網站Atlas website(atlas.asp.net)上去下載并安裝April CTP setup (.msi)文件( http://www.microsoft.com/downloads/details.aspx?FamilyId=B01DC501-B3C1-4EC0-93F0-7DAC68D2F787&displaylang=en ). 在默認安裝即可，該安裝文件將在你的Visual Studio 2005 或 Visual Web Developer里安裝Atlas website 模板.
現在你已經安裝了Atlas模板.打開Visual Studio 2005，在File菜單里選“New Web Site” .
圖1：
在My Templates里選Atlas Web Site項，在location里做相應的設置，再點OK.該Atlas Web Site模板以已經做了最初的準備工作。比如，在解決資源管理器里，查看 /bin目錄的話,你將會看到一個Microsoft.Web.Atlas.dll編譯文件.此外，你查看Web.config文件的話，你將看到所有必須的“掛鉤”(hooks)開始向Web應用程序添加Atlas functionality.(在此，我不打算講解Web.config文件里有關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>標簽里的現有代碼：
<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>
簡單的說，這段代碼創建了2個用戶界面，且都用當前的服務器時間來更新一個 Label控件。第一個界面使用標準的，“請求/回應”模式完全回傳("Full Post Back"控件)；而第二個界面使用AJAX技術進行局部回傳.我們不談第一個界面，那是不言而喻的。 我們將重點看第二個"Partial Post Back"控件.
就像你看到的那樣，ScriptManager控件添加了EnablePatialRendering屬性，且設置為rue. 這將允許ASP.NET部分回傳頁面而不是全部回傳。這就是我們想要的！要異步地處理部分回傳給web服務器的數據，為此我們要添加一個UpdatePanel 控件：
<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>
</ContentTemplate>
</atlas:UpdatePanel>
將參與異步回傳的ASP.NET控件放置在UpdatePanel的<ContentTemplate>標簽里.該UpdatePanel的Mode屬性指示什么時候發生局部回傳.就本頁面而言，Mode屬性為Conditional，那就意味著下面3種事件之一發生時， UpdatePanel將會把其數據回傳給服務器：
1.明白無誤的調用UpdatePanel的Update()方法.
2.一個UpdatePanel事件導致Update()方法明白無誤的被調用.
3.包含在UpdatePanel里面的一個server控件導致一個頁面回傳
如果你忽略Mode特性的話,它默認為Always,那就是說，當頁面里的任何一個 server控件導致回傳時，UpdatePanel都要刷新.在本例中我們使用第三種方法來回傳UpdatePanel(那就是說，當UpdatePanel里面的一個控件引發回傳的時候，該UpdatePanel就會回傳)。就像你看到的一樣，我們將一個Label 和 Button控件包含在<ContentTemplate>標簽里，因此當點擊Button控件時UpdatePanel就會回傳.
最后，在頁面的<head>表簽里添加如下的服務器端<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控件的服務器端事件處理器(一個在UpdatePanel里面，一個在外面)，它們都會用服務器當前的時間來對Label控件進行更新.
我們來運行，點擊這2個按鈕，之后你的屏幕看起來和下面的差不多：
圖2：
當你點擊"Partial Post Back"按鈕時, 你將看到其上面的時間改變了但屏幕沒有任何的閃爍，頁面并沒有完全的回傳，也沒有改變其它部分的時間！點擊"Partial Post Back"按鈕的時候，使用XMLHttpRequest object對象向web服務器進行異步回傳；web服務器然后返回信息.該簡單的示例向我們展示在你的web程序里使用Atlas執行AJAX行為是很簡單的.
在下一個示例里，我們使用GridView控件，用局部回傳來更新、排序、分頁記錄！
構建一個使用Atlas技術的GridView控件
我們來使用GridView控件進行更具實踐性的示例。首先創建一個新個Atlas template工程.請下載本文的代碼，在AtlasSecondExample文件夾下的的App_Data文件夾里有一個名為Database.mdf的數據庫文件.將其復制到你新近創建的website的App_Data文件夾里
打開Default.aspx頁面，進入source模式，在<form>標簽里添加如下的代碼：
<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>
我們在第一個示例里解釋過了這些代碼，你理解起來應該已經沒有障礙了.
接下來，創建一個強類型的DataSet，在創建過程中你可以自動的生產nsert, update, delete SQL statements.關于使用強類型DataSet的好處已經超出了本文的范疇，你可以參閱Scott Mitchell寫的《Working with Data in ASP.NET 2.0》系列教程.
在File菜單里選New File,再選DataSet，點Add(將其命名為DataSet1).然后詢問你是否將其放在App_Code文件夾里，選Yes. 這將打開DataSet Designer and the TableAdapter Configuration Wizard向導.
圖3
確保在下拉列表里選中Database.mdf文件，再連續點3次Next，接著輸入SELECT statement，用從數據庫檢索的記錄填充到DataSet，鍵入下面的statement，再點2次Next，最后點Finish.
SELECT * FROM Employees
我們的SELECT statement僅僅返回Employees表的所有記錄.保存該強類型DataSet再關閉DataSet Designer.
現在我們將注意力轉移到構建使用AJAX的GridView控件.打開Default.aspx頁面并切換到design模式，拖一個GridView控件到UpdatePanel內部，在智能標簽里，在“選擇數據源”里選擇“新數據源”。然后就開啟了Data Source Configuration Wizard向導，選擇“Object”并使用其默認ID，再點OK. 接下來的屏幕我們將在下拉列表里看到我們創建的名為DataSet1TableAdapters.EmployeesTableAdapter的TableAdapter，選中它，點Next,再點Finish.
差不多就這些了！在GridView的智能標簽里啟用分頁、排序、編輯功能.運行該工程，你看到的輸出和下面的圖片差不多。
圖4
測試排序、分頁、編輯功能。我們注意到這些功能都是異步發生的！
最后我還想提一點，絕大多數用戶在與web頁面交互的時候，體驗的是頁面產生回傳，屏幕閃爍一下后又重新對頁面進行裝載.這樣用戶就可以知道頁面在進行處理.但隨著AJAX的出現，就不會出現屏幕閃爍的情況了，不過最后還是通過某種感官效果來提示用戶頁面正進行處理.一個比較簡單的方法是使用Atlas內置的，稱為UpdateProgess的服務器控件.你可以添加該控件到任何頁面，無論何時一個 UpdatePanel產生回傳，UpdateProgress的<ProgressTemplate>標簽里的所有內容都會顯示出來，直到頁面更新完為止.你甚至可以放一個GIF圖像文件出來，提示用戶頁面正在處理.
<atlas:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Please wait...
</ProgressTemplate>
</atlas:UpdateProgress>
結語：
在本文，我們看到使用Microsoft的Atlas來執行AJAX功能是多么的簡單。我們做了2個示例，第一個用來解釋AJAX和Atlas framework的基本概念.另一個示例演示了如何將一個ASP.NET server控件放在一個合適的Atlas server控件里，使其也可以使用AJAX技術.欣慰的是，通過本文我們為你揭開了AJAX 和 Atlas的神秘面紗.
附錄：
名稱解釋：Hook
Hook是Windows中提供的一種用以替換DOS下“中斷”的系統機制，中文譯為“掛鉤”或“鉤子”。在對特定的系統事件進行hook后，一旦發生已hook事件，對該事件進行hook的程序就會受到系統的通知，這時程序就能在第一時間對該事件做出響應。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
