ASP.NET AJAX客戶端編程之旅（一）——Hello！ASP.NET AJAX（轉載）

摘要

本文將首先介紹一下文章的寫作背景和用到的相關技術。然後將分別使用樸素的Ajax技術和ASP.NET AJAX框架分別實現經典的“Hello！XX”，通過兩個小例子，使朋友們對這個框架的特點和框架的使用方法有一個初步的認識。

前言

我想，如果今天哪個Web開發人員說沒有聽說過Ajax技術，那實在太不可思議了。確實，近幾年，Ajax這個詞以超乎想象的速度紅遍Web開發領域，大到Google、網易，小到一些地方公司的主頁，都普遍開始加入Ajax元素。這種技術，給Web開發帶來了革命性的意義，也使得Web產品及B/S系統的用戶體驗大大改善。

然而，Ajax用起來華麗、爽快，開發起來卻困難重重。JavaScript語言怪異的語法、沒有IDE支持以及難以調試，都成爲Ajax開發的硬傷。另外B/S系統和C/S不同，瀏覽器的多樣性也給Ajax的開發帶來很多困難，使得我們在做Ajax應用時，不得不考慮到各種瀏覽器的差異，開發過程痛苦至極。

針對這種情況，各種Ajax框架應運而生。這其中的佼佼者，便是微軟推出的ASP.NET AJAX框架。它不僅給使得開發Ajax應用變得容易很多，而且更可以與微軟的開發工具無縫集成，給.NET平臺的開發人員帶來很大方便。

這一系列文章，就是要介紹這個框架的客戶端編程。

ASP.NET AJAX能做什麼？

ASP.NET AJAX框架帶來的好處和特性實在太多了，這裏簡要列幾條：

1.擴展了JavaScript語言，增加了面向對象特性。簡化了一些DOM操作的語法。

2.一系列的服務器端控件可以讓程序員不編寫JS，而僅通過拖控件完成Ajax應用的開發。

3.開創性的提出了客戶端組件、行爲組件等概念，並提供了一種類似XML的標籤式語言，給Ajax客戶端編寫帶來革命性創新。

4.完善的代理模型機制，使得開發人員可以在JS中直接調用後臺程序，就像在後臺調用一樣。

5.各種數據類型的自動轉換，特別是對於複雜類型，內置自動序列化和反序列化機制，是的前後臺可以直接共用複雜類型，而不必手工轉換。

6.提供了大量的客戶端組件，方便程序開發。

7.屏蔽了瀏覽器之間的差異，讓開發人員可以不再處理那些令人頭疼的瀏覽器差異問題。

服務器端編程 VS 客戶端編程

ASP.NET AJAX框架提供了兩種開發模型：服務器端編程和客戶端編程。前者使用方便，開發人員可以不懂JS和Ajax，而是通過傳統的ASP.NET開發方式完成 Ajax應用的開發，但是其控制粒度較粗。而後者開發難度相對較大，需要開發人員熟悉JavaScript，並熟悉ASP.NET AJAX提供的各種語法支持及客戶端編程模型，但是其控制粒度精細，有利於提高應用的性能和質量。

本系列文章將重點介紹客戶端編程。

開始ASP.NET AJAX之旅：讓我們一起對ASP.NET AJAX說Hello！

下面，我將分別用兩種方式實現一個最簡單的Ajax應用：單擊按鈕，異步調用後臺類中的一個方法，返回一個字符串，顯示在頁面指定位置，整個過程不刷新頁面。其效果圖如下：

左圖爲單擊前，右圖爲單擊後。整個過程頁面無刷新，所顯示的字符串是從後臺程序得到的。下面，將用兩種方法實現這個小應用。

沒有ASP.NET AJAX的日子：想說Hello不容易！很難很費力！

首先，我們不使用任何框架，手工創建這個Ajax應用。

1.創建工程

打開VS（我用的是2005），創建一個新的Website，命名爲AjaxTest。完成後，添加系統文件夾App_Code。

2.創建後臺程序

下面我們要編寫供前臺調用的後臺程序，這個程序很簡單，只需要返回一個字符串。我們在App_Code文件夾下添加一個新的文件Hello.cs，這是個C#類文件，其詳細代碼如下：

Hello.cs:

using System;
2

public class Hello
4

{
5

public Hello()

{ }
6

public string SayHello()
8

{
9

return "Hello!Ajax";
10

}
11

}

代碼沒有什麼好解釋的，只有一個方法，就是返回“Hello!Ajax”這個字符串。

3.創建後臺頁面

只有一個類是不成的，Ajax最終要調用一個頁面，所以，這裏還需要做一個aspx頁面供前臺直接調用。在網站工程下新建一個文件Output.aspx，將其中的所有代碼都刪除，只保留第一行。因爲我們不需要完整顯示這個頁面，只是要它返回一行字符串。

Output.aspx:

@ Page Language="C#" AutoEventWireup="true" CodeFile="Output.aspx.cs" Inherits="Output" %>

然後，我們需要在這個頁面的Page_Load事件中調用Hello類的SayHello方法，並使用Response.Write方法將其輸出。

Output.aspx.cs:

using System;
2

using System.Data;
3

using System.Configuration;
4

using System.Collections;
5

using System.Web;
6

using System.Web.Security;
7

using System.Web.UI;
8

using System.Web.UI.WebControls;
9

using System.Web.UI.WebControls.WebParts;
10

using System.Web.UI.HtmlControls;
11

public 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.編寫JavaScript腳本

我們的主角終於要登場了。讓我們開始編寫Ajax代碼。首先在網站工程下新建ajax.js文件，這個文件將包含Ajax核心代碼，具體內容如下：

ajax.js:

var xmlHttp;//全局XMLHttpResquest對象
2

//針對不同瀏覽器，獲取XMLHttpRequest對象
4

function CreateXMLHttpRequest()
5

{
6

if(window.ActiveXObject)
7

{
8

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
9

}
10

else
11

{
12

xmlHttp=new XMLHttpResquest();
13

}
14

}
15

//單擊btnSayHello時調用的JS函數
17

function btnSayHello_onClick()
18

{
19

CreateXMLHttpRequest();
20

xmlHttp.onreadystatechange=HandleStateChange;
21

xmlHttp.open("POST","Output.aspx",true);
22

xmlHttp.send(null);
23

}
24

//回調函數
26

function HandleStateChange()
27

{
28

if(xmlHttp.readyState==4)
29

{
30

if(xmlHttp.status==200)
31

{
32

document.getElementById("result").innerHTML = xmlHttp.responseText;
33

}
34

}
35

}

下面我對這個代碼進行一個簡要的解釋。

首先，xmlHttp是一個全局變量，它被初始化後，將負責整個Ajax應用的核心。CreateXMLHttpRequest方法用來得到 XMLHttpRequest對象的實例，這裏我們注意到，由於不同瀏覽器的獲取對象方法不同，這裏首先要檢測瀏覽器類型，然後使用相應方法獲得對象，十分麻煩。btnSayHello_onClick是一個核心函數，當按鈕被單擊時，將調用這個函數。它首先初始化xmlHttp，然後指定回調函數爲 HandleStateChange，最後異步發佈POST請求，調用Output.aspx頁面。最後，HandleStateChange作爲回調函數，在xmlHttp的請求狀態發生改變時將自動被調用。而在這個函數中，當狀態正常時，將id爲“result”的DIV的內容設爲調用結果。即 Output.aspx輸出的字符串。

5.主頁

最後，當然我們要製作主要頁面。在這裏我直接使用Default.aspx，其代碼如下：

Defualt.aspx:

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4

<html xmlns="http://www.w3.org/1999/xhtml" >
6

<head runat="server">
7

<title>Hello!Ajax</title>
8

</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關聯。而result這個DIV則用於顯示結果。

現在運行Default.aspx，點擊SayHello按鈕，即可看到效果。

使用ASP.NET AJAX：讓Hello說的輕鬆一點

可以看出，在上面的實現過程中，JS腳本非常麻煩，不僅要處理各種瀏覽器的差別（其實我上面的代碼還沒有照顧到所有瀏覽器），還要在回調函數中判斷相應狀態。調用過程也必須手工進行。那麼，我們可不可以在JS中直接調用後臺代碼中的某個方法呢？就像在後臺調用一樣。答案是肯定的，只要我們使用 ASP.NET AJAX。

ASP.NET AJAX框架在VS2008中是自帶的，但如果你和我一樣使用的是VS2005和.net framework2.0和話，則需要手工安裝。在微軟官方網站有下載，安裝過程也和普通軟件安裝很相似，這裏不再贅述。

下面，我們使用ASP.NET AJAX框架再次實現這個應用。

1.創建工程

這一次，我們還是需要創建一個新的網站，不同的是，我們選擇ASP.NET AJAX-Enabled Web Site，使用這個項目創建網站後，VS將自動在Web.config中配置好這個框架需要的配置項，而且會在頁面中自動加入一個 ScriptManager控件，這個控件是ASP.NET AJAX應用所必不可少的。創建完成後，仍需要新建App_Code文件夾。

2.創建後臺程序

這個和上一部分的後臺程序非常類似，仍是在App_Code文件夾下建立Hello.cs，代碼如下：

Hello.cs:

using System;
2

public class Hello
4

{
5

public Hello()

{ }
6

public string SayHello()
8

{
9

return "Hello!ASP.NET AJAX";
10

}
11

}

3.創建WebService

其實，使用ASP.NET AJAX框架後，JS是可以直接調用後臺類中的方法的，但是這裏不建議這樣做，而是使用WebService作爲過渡，讓JS調用WebService。關於其中的理由，將在以後介紹。

在網站工程下新建WebService文件SayHelloService，這時VS會自動在App_Code文件夾下建立對應的代碼文件，SayHelloService.cs，具體程序代碼如下：

SayHelloService.cs:

using System;
2

using System.Web;
3

using System.Collections;
4

using System.Web.Services;
5

using System.Web.Services.Protocols;
6

using System.Web.Script.Services;
7

[WebService(Namespace = "http://tempuri.org/")]
9

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
10

[ScriptService]
11

public class SayHelloService : System.Web.Services.WebService
12

{
13

public SayHelloService()

{ }
14

[WebMethod]
16

public string SayHello()
17

{
18

Hello myHello = new Hello();
19

return myHello.SayHello();
20

}
21

}
22

其中要特別注意三個地方，一個是using Web.Script.Services，這裏必須引入這個命名空間。然後就是SayHelloService類上面的[ScriptService]屬性（Attribute）和SayHello方法上面的[WebMethod]屬性，這兩個屬性對於JS的訪問是不可缺少的。

4.編寫JavaScript

這時，ajax.js文件的代碼如下：

ajax.js:

//單擊btnSayHello時調用的JS函數
2

function btnSayHello_onClick()
3

{
4

SayHelloService.SayHello(HandleStateChange);
5

}
6

//回調函數
8

function HandleStateChange(reusltText)
9

{
10

$get("result").innerHTML=reusltText;
11

}

這裏我們看到了神奇的事情：35行JS代碼變成了11行，並且這裏直接使用了SayHelloService.SayHello()這樣的方法，這個方法是定義在SayHelloService.cs裏的，而在這裏的JS中就像在後臺一樣，直接調用了這個方法，並不需要創建對象、發送請求等一大套東西。這裏也不用擔心瀏覽器差別問題，因爲這個框架已經爲我們屏蔽了瀏覽器差異。

而且回調函數中，不需要判斷狀態了，因爲ASP.NET AJAX自動分開了成功時調用的回調函數和失敗時調用的回調函數。而且這裏用“$get”代替了“getElementById”，這也是這個框架給我們提供的便利。

5.主頁

現在我們再看看主頁代碼：

Default.aspx:

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2

<!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</title>
7

</head>
8

<body>
9

<form id="form1" runat="server">
10

<asp:ScriptManager ID="ScriptManager1" runat="server">
11

<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>

可以看到，唯一變化就是多了一個ScriptManager控件，這是使用ASP.NET AJAX框架必須引入的控件。控件中還定義了需要引入的外部JS腳本文件和WebService文件。

現在運行Default.aspx，也達到了同樣效果。

結束語

我想通過上面的兩個例子，應該能從感性層面上體會到ASP.NET AJAX這個框架的一些特性及優勢。當然，其特性還遠不止這些，像實體類的自動序列化和反序列化、客戶端組件等一系列內容，將在後續章節討論。

這裏也沒有對技術進行細緻講解，意在使朋友們將注意力集中在對這個框架的感性理解上。後續文章會對一些技術性問題進行講述。

文中的兩個小例子可以在這裏下載：AjaxTest.rar ASPNETAJAXTest.rar

主要參考文獻

[1] 陳黎夫，ASP.NET AJAX程序設計-第II卷：客戶端，人民郵電出版社，2007年10月

[2] Ryan Asleson等，Ajax基礎教程，人民郵電出版社，2006年2月

作者：T2噬菌體
出處：http://leoo2sk.cnblogs.com
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。

ASP.NET AJAX客戶端編程之旅（一）——Hello！ASP.NET AJAX（轉載）

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

KubeKey 部署 K8s v1.28.8 實戰

ASP.NET AJAX客戶端編程之旅（三）——讓JavaScript和C#無障礙溝通：數據類型自動轉換&序列化（轉載）

ASP.NET AJAX客戶端編程之旅（二）——知其所以然（轉載）

ASP.NET AJAX客戶端編程之旅（六）——來做一個自己的客戶端控件（轉載）

轉:asp.net性能的技巧

ASP.NET刷新頁面總結（轉載）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結