摘要
本文將首先介紹一下文章的寫(xiě)作背景和用到的相關(guān)技術(shù)。然后將分別使用樸素的Ajax技術(shù)和ASP.NET AJAX框架分別實(shí)現經(jīng)典的“Hello！XX”，通過(guò)兩個(gè)小例子，使朋友們對這個(gè)框架的特點(diǎn)和框架的使用方法有一個(gè)初步的認識。
前言
我想，如果今天哪個(gè)Web開(kāi)發(fā)人員說(shuō)沒(méi)有聽(tīng)說(shuō)過(guò)Ajax技術(shù)，那實(shí)在太不可思議了。確實(shí)，近幾年，Ajax這個(gè)詞以超乎想象的速度紅遍Web開(kāi)發(fā)領(lǐng)域，大到Google、網(wǎng)易，小到一些地方公司的主頁(yè)，都普遍開(kāi)始加入Ajax元素。這種技術(shù)，給Web開(kāi)發(fā)帶來(lái)了革命性的意義，也使得Web產(chǎn)品及B/S系統的用戶(hù)體驗大大改善。
然而，Ajax用起來(lái)華麗、爽快，開(kāi)發(fā)起來(lái)卻困難重重。JavaScript語(yǔ)言怪異的語(yǔ)法、沒(méi)有IDE支持以及難以調試，都成為Ajax開(kāi)發(fā)的硬傷。另外B/S系統和C/S不同，瀏覽器的多樣性也給Ajax的開(kāi)發(fā)帶來(lái)很多困難，使得我們在做Ajax應用時(shí)，不得不考慮到各種瀏覽器的差異，開(kāi)發(fā)過(guò)程痛苦至極。
針對這種情況，各種Ajax框架應運而生。這其中的佼佼者，便是微軟推出的ASP.NET AJAX框架。它不僅給使得開(kāi)發(fā)Ajax應用變得容易很多，而且更可以與微軟的開(kāi)發(fā)工具無(wú)縫集成，給.NET平臺的開(kāi)發(fā)人員帶來(lái)很大方便。
這一系列文章，就是要介紹這個(gè)框架的客戶(hù)端編程。
ASP.NET AJAX能做什么？
ASP.NET AJAX框架帶來(lái)的好處和特性實(shí)在太多了，這里簡(jiǎn)要列幾條：
1.擴展了JavaScript語(yǔ)言，增加了面向對象特性。簡(jiǎn)化了一些DOM操作的語(yǔ)法。
2.一系列的服務(wù)器端控件可以讓程序員不編寫(xiě)JS，而僅通過(guò)拖控件完成Ajax應用的開(kāi)發(fā)。
3.開(kāi)創(chuàng )性的提出了客戶(hù)端組件、行為組件等概念，并提供了一種類(lèi)似XML的標簽式語(yǔ)言，給Ajax客戶(hù)端編寫(xiě)帶來(lái)革命性創(chuàng )新。
4.完善的代理模型機制，使得開(kāi)發(fā)人員可以在JS中直接調用后臺程序，就像在后臺調用一樣。
5.各種數據類(lèi)型的自動(dòng)轉換，特別是對于復雜類(lèi)型，內置自動(dòng)序列化和反序列化機制，是的前后臺可以直接共用復雜類(lèi)型，而不必手工轉換。
6.提供了大量的客戶(hù)端組件，方便程序開(kāi)發(fā)。
7.屏蔽了瀏覽器之間的差異，讓開(kāi)發(fā)人員可以不再處理那些令人頭疼的瀏覽器差異問(wèn)題。
服務(wù)器端編程 VS 客戶(hù)端編程
ASP.NET AJAX框架提供了兩種開(kāi)發(fā)模型：服務(wù)器端編程和客戶(hù)端編程。前者使用方便，開(kāi)發(fā)人員可以不懂JS和Ajax，而是通過(guò)傳統的ASP.NET開(kāi)發(fā)方式完成Ajax應用的開(kāi)發(fā)，但是其控制粒度較粗。而后者開(kāi)發(fā)難度相對較大，需要開(kāi)發(fā)人員熟悉JavaScript，并熟悉ASP.NET AJAX提供的各種語(yǔ)法支持及客戶(hù)端編程模型，但是其控制粒度精細，有利于提高應用的性能和質(zhì)量。
本系列文章將重點(diǎn)介紹客戶(hù)端編程。
開(kāi)始ASP.NET AJAX之旅：讓我們一起對ASP.NET AJAX說(shuō)Hello！
下面，我將分別用兩種方式實(shí)現一個(gè)最簡(jiǎn)單的Ajax應用：?jiǎn)螕舭粹o，異步調用后臺類(lèi)中的一個(gè)方法，返回一個(gè)字符串，顯示在頁(yè)面指定位置，整個(gè)過(guò)程不刷新頁(yè)面。其效果圖如下：
左圖為單擊前，右圖為單擊后。整個(gè)過(guò)程頁(yè)面無(wú)刷新，所顯示的字符串是從后臺程序得到的。下面，將用兩種方法實(shí)現這個(gè)小應用。
沒(méi)有ASP.NET AJAX的日子：想說(shuō)Hello不容易！很難很費力！
首先，我們不使用任何框架，手工創(chuàng )建這個(gè)Ajax應用。
1.創(chuàng )建工程
打開(kāi)VS（我用的是2005），創(chuàng )建一個(gè)新的Website，命名為AjaxTest。完成后，添加系統文件夾App_Code。
2.創(chuàng )建后臺程序
下面我們要編寫(xiě)供前臺調用的后臺程序，這個(gè)程序很簡(jiǎn)單，只需要返回一個(gè)字符串。我們在A(yíng)pp_Code文件夾下添加一個(gè)新的文件Hello.cs，這是個(gè)C#類(lèi)文件，其詳細代碼如下：
Hello.cs:
1using System;
2
3public class Hello
4{
5 public Hello() { }
6
7 public string SayHello()
8 {
9 return "Hello!Ajax";
10 }
11}
代碼沒(méi)有什么好解釋的，只有一個(gè)方法，就是返回“Hello!Ajax”這個(gè)字符串。
3.創(chuàng )建后臺頁(yè)面
只有一個(gè)類(lèi)是不成的，Ajax最終要調用一個(gè)頁(yè)面，所以，這里還需要做一個(gè)aspx頁(yè)面供前臺直接調用。在網(wǎng)站工程下新建一個(gè)文件Output.aspx，將其中的所有代碼都刪除，只保留第一行。因為我們不需要完整顯示這個(gè)頁(yè)面，只是要它返回一行字符串。
Output.aspx:
1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Output.aspx.cs" Inherits="Output" %>
然后，我們需要在這個(gè)頁(yè)面的Page_Load事件中調用Hello類(lèi)的SayHello方法，并使用Response.Write方法將其輸出。
Output.aspx.cs:
1using System;
2using System.Data;
3using System.Configuration;
4using System.Collections;
5using System.Web;
6using System.Web.Security;
7using System.Web.UI;
8using System.Web.UI.WebControls;
9using System.Web.UI.WebControls.WebParts;
10using System.Web.UI.HtmlControls;
11
12public partial class Output : System.Web.UI.Page
13{
14 protected void Page_Load(object sender, EventArgs e)
15 {
16 Hello myHello = new Hello();
17 Response.Write(myHello.SayHello());
18 }
19}
4.編寫(xiě)JavaScript腳本
我們的主角終于要登場(chǎng)了。讓我們開(kāi)始編寫(xiě)Ajax代碼。首先在網(wǎng)站工程下新建ajax.js文件，這個(gè)文件將包含Ajax核心代碼，具體內容如下：
ajax.js:
1var xmlHttp;//全局XMLHttpResquest對象
2
3//針對不同瀏覽器，獲取XMLHttpRequest對象
4function CreateXMLHttpRequest()
5{
6 if(window.ActiveXObject)
7 {
8 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
9 }
10 else
11 {
12 xmlHttp=new XMLHttpResquest();
13 }
14}
15
16//單擊btnSayHello時(shí)調用的JS函數
17function btnSayHello_onClick()
18{
19 CreateXMLHttpRequest();
20 xmlHttp.onreadystatechange=HandleStateChange;
21 xmlHttp.open("POST","Output.aspx",true);
22 xmlHttp.send(null);
23}
24
25//回調函數
26function HandleStateChange()
27{
28 if(xmlHttp.readyState==4)
29 {
30 if(xmlHttp.status==200)
31 {
32 document.getElementById("result").innerHTML = xmlHttp.responseText;
33 }
34 }
35}
下面我對這個(gè)代碼進(jìn)行一個(gè)簡(jiǎn)要的解釋。
首先，xmlHttp是一個(gè)全局變量，它被初始化后，將負責整個(gè)Ajax應用的核心。CreateXMLHttpRequest方法用來(lái)得到XMLHttpRequest對象的實(shí)例，這里我們注意到，由于不同瀏覽器的獲取對象方法不同，這里首先要檢測瀏覽器類(lèi)型，然后使用相應方法獲得對象，十分麻煩。btnSayHello_onClick是一個(gè)核心函數，當按鈕被單擊時(shí)，將調用這個(gè)函數。它首先初始化xmlHttp，然后指定回調函數為HandleStateChange，最后異步發(fā)布POST請求，調用Output.aspx頁(yè)面。最后，HandleStateChange作為回調函數，在xmlHttp的請求狀態(tài)發(fā)生改變時(shí)將自動(dòng)被調用。而在這個(gè)函數中，當狀態(tài)正常時(shí)，將id為“result”的DIV的內容設為調用結果。即Output.aspx輸出的字符串。
5.主頁(yè)
最后，當然我們要制作主要頁(yè)面。在這里我直接使用Default.aspx，其代碼如下：
Defualt.aspx:
1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5<html xmlns="http://www.w3.org/1999/xhtml" >
6<head runat="server">
7 <title>Hello!Ajax http://www.dwww.cn</title>
8 <script src="ajax.js" type="text/javascript"></script>
9</head>
10<body>
11 <form id="form1" runat="server">
12 <div>
13 <input id="btnSayHello" type="button" value="SayHello" onclick="btnSayHello_onClick()" />
14 <div id="result"></div>
15 </div>
16 </form>
17</body>
18</html>
這里將ajax.js作為外部腳本引入，讓后讓btnSayHello的onclick事件與btnSayHello_onClick關(guān)聯(lián)。而result這個(gè)DIV則用于顯示結果。
現在運行Default.aspx，點(diǎn)擊SayHello按鈕，即可看到效果。
使用ASP.NET AJAX：讓Hello說(shuō)的輕松一點(diǎn)
可以看出，在上面的實(shí)現過(guò)程中，JS腳本非常麻煩，不僅要處理各種瀏覽器的差別（其實(shí)我上面的代碼還沒(méi)有照顧到所有瀏覽器），還要在回調函數中判斷相應狀態(tài)。調用過(guò)程也必須手工進(jìn)行。那么，我們可不可以在JS中直接調用后臺代碼中的某個(gè)方法呢？就像在后臺調用一樣。答案是肯定的，只要我們使用ASP.NET AJAX。
ASP.NET AJAX框架在VS2008中是自帶的，但如果你和我一樣使用的是VS2005和.net framework2.0和話(huà)，則需要手工安裝。在微軟官方網(wǎng)站有下載，安裝過(guò)程也和普通軟件安裝很相似，這里不再贅述。
下面，我們使用ASP.NET AJAX框架再次實(shí)現這個(gè)應用。
1.創(chuàng )建工程
這一次，我們還是需要創(chuàng )建一個(gè)新的網(wǎng)站，不同的是，我們選擇ASP.NET AJAX-Enabled Web Site，使用這個(gè)項目創(chuàng )建網(wǎng)站后，VS將自動(dòng)在Web.config中配置好這個(gè)框架需要的配置項，而且會(huì )在頁(yè)面中自動(dòng)加入一個(gè)ScriptManager控件，這個(gè)控件是ASP.NET AJAX應用所必不可少的。創(chuàng )建完成后，仍需要新建App_Code文件夾。
2.創(chuàng )建后臺程序
這個(gè)和上一部分的后臺程序非常類(lèi)似，仍是在A(yíng)pp_Code文件夾下建立Hello.cs，代碼如下：
Hello.cs:
1using System;
2
3public class Hello
4{
5 public Hello() { }
6
7 public string SayHello()
8 {
9 return "Hello!ASP.NET AJAX";
10 }
11}
3.創(chuàng )建WebService
其實(shí)，使用ASP.NET AJAX框架后，JS是可以直接調用后臺類(lèi)中的方法的，但是這里不建議這樣做，而是使用WebService作為過(guò)渡，讓JS調用WebService。關(guān)于其中的理由，將在以后介紹。
在網(wǎng)站工程下新建WebService文件SayHelloService，這時(shí)VS會(huì )自動(dòng)在A(yíng)pp_Code文件夾下建立對應的代碼文件，SayHelloService.cs，具體程序代碼如下：
SayHelloService.cs:
1using System;
2using System.Web;
3using System.Collections;
4using System.Web.Services;
5using System.Web.Services.Protocols;
6using System.Web.Script.Services;
7
8[WebService(Namespace = "http://tempuri.org/")]
9[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
10[ScriptService]
11public class SayHelloService : System.Web.Services.WebService
12{
13 public SayHelloService() { }
14
15 [WebMethod]
16 public string SayHello()
17 {
18 Hello myHello = new Hello();
19 return myHello.SayHello();
20 }
21}
22
其中要特別注意三個(gè)地方，一個(gè)是using Web.Script.Services，這里必須引入這個(gè)命名空間。然后就是SayHelloService類(lèi)上面的[ScriptService]屬性（Attribute）和SayHello方法上面的[WebMethod]屬性，這兩個(gè)屬性對于JS的訪(fǎng)問(wèn)是不可缺少的。
4.編寫(xiě)JavaScript
這時(shí)，ajax.js文件的代碼如下：
ajax.js:
1//單擊btnSayHello時(shí)調用的JS函數
2function btnSayHello_onClick()
3{
4 SayHelloService.SayHello(HandleStateChange);
5}
6
7//回調函數
8function HandleStateChange(reusltText)
9{
10 get("result").innerHTML=reusltText;
11}
這里我們看到了神奇的事情：35行JS代碼變成了11行，并且這里直接使用了SayHelloService.SayHello()這樣的方法，這個(gè)方法是定義在SayHelloService.cs里的，而在這里的JS中就像在后臺一樣，直接調用了這個(gè)方法，并不需要創(chuàng )建對象、發(fā)送請求等一大套東西。這里也不用擔心瀏覽器差別問(wèn)題，因為這個(gè)框架已經(jīng)為我們屏蔽了瀏覽器差異。
而且回調函數中，不需要判斷狀態(tài)了，因為ASP.NET AJAX自動(dòng)分開(kāi)了成功時(shí)調用的回調函數和失敗時(shí)調用的回調函數。而且這里用“get”代替了“getElementById”，這也是這個(gè)框架給我們提供的便利。
5.主頁(yè)
現在我們再看看主頁(yè)代碼：
Default.aspx:
1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml">
5<head runat="server">
6 <title>Untitled Page http://dwww.cn</title>
7</head>
8<body>
9 <form id="form1" runat="server">
10 <asp:ScriptManager ID="ScriptManager1" runat="server">
11 <Scripts>
12 <asp:ScriptReference Path="~/ajax.js" />
13 </Scripts>
14 <Services>
15 <asp:ServiceReference Path="~/SayHelloService.asmx" />
16 </Services>
17 </asp:ScriptManager>
18 <div>
19 <input id="btnSayHello" type="button" value="SayHello" onclick="btnSayHello_onClick()" />
20 <div id="result"></div>
21 </div>
22 </form>
23</body>
24</html>
可以看到，唯一變化就是多了一個(gè)ScriptManager控件，這是使用ASP.NET AJAX框架必須引入的控件?？丶羞€定義了需要引入的外部JS腳本文件和WebService文件。
現在運行Default.aspx，也達到了同樣效果。
結束語(yǔ)
我想通過(guò)上面的兩個(gè)例子，應該能從感性層面上體會(huì )到ASP.NET AJAX這個(gè)框架的一些特性及優(yōu)勢。當然，其特性還遠不止這些，像實(shí)體類(lèi)的自動(dòng)序列化和反序列化、客戶(hù)端組件等一系列內容，將在后續章節討論。
這里也沒(méi)有對技術(shù)進(jìn)行細致講解，意在使朋友們將注意力集中在對這個(gè)框架的感性理解上。后續文章會(huì )對一些技術(shù)性問(wèn)題進(jìn)行講述。
文中的兩個(gè)小例子可以在這里下載：AjaxTest.rar ASPNETAJAXTest.rar
主要參考文獻
[1] 陳黎夫，ASP.NET AJAX程序設計-第II卷：客戶(hù)端，人民郵電出版社，2007年10月
[2] Ryan Asleson等，Ajax基礎教程，人民郵電出版社，2006年2月
來(lái)源：http://www.cnblogs.com/leoo2sk
