在ASP.NET中使用AJAX的簡單方法

　　介紹

　　本文介紹了使用AJAX和ASP.NET編寫web應用程序的一個簡單方法。同時，討論了使用AJAX的好處和不足。為了舉例說明，本文給出了相應的JavaScript代碼和用C#.NET編寫的ASP.NET代碼。

　　為什么使用AJAX

　　也許大多數(shù)人已經(jīng)知道AJAX的意思是異步JavaScript和XML（Asynchronous JavaScript and XML）。據(jù)我所知，這項技術(shù)最初是由Microsoft在1999年提出來的，也就是我們所熟知的"使用遠程調(diào)用(remote calls)的DHTML / JavaScript web應用程序"。這項技術(shù)的核心就是通過瀏覽器發(fā)出一個異步的HTTP請求來調(diào)用服務(wù)端的網(wǎng)頁或服務(wù)，在返回結(jié)果后，無需刷新就可以更新整個網(wǎng)頁。這項技術(shù)經(jīng)過不斷地完善，到目前為此，使用AJAX的web程序從表現(xiàn)上看已經(jīng)非常類似于Windows程序了。

　　由于這項技術(shù)的實現(xiàn)需要依賴于前端的瀏覽器，因此，它的使用受到了限制。但在最近的幾年，由于瀏覽器功能的加強和一些公司，如Google、Amazon.com的許多基于AJAX的應用的不俗表現(xiàn)，終于使這項技術(shù)鳳凰涅磐、欲火重生。

　　現(xiàn)在AJAX的使用已經(jīng)非常廣泛，任何帶有豐富用戶體驗的動態(tài)網(wǎng)頁都會不約而同地使用AJAX。

　　解決方案

　　本文所描述的使用AJAX的方法非常簡單，而且效率很高。同時這種方法還非常容易維護，并且開發(fā)人員無需任何的特殊技巧就可以實現(xiàn)它，而且使用這種方法還可以跨瀏覽器。

　　一個基本的AJAX實現(xiàn)需要兩個主要部分：一個使用JavaScript代碼編寫的客戶端HTML頁，這些JavaScript用來向服務(wù)端發(fā)送請求和接收響應；一個可以接收請求和向客戶端發(fā)送響應信息的遠程頁面�？蛻舳说腏avaScript代碼的任務(wù)是建立一個XmlHttp對象，然后向服務(wù)端發(fā)送請求信息，最后通過回調(diào)方式處理服務(wù)端返回的響應信息。這一切都是由JavaScript代碼實現(xiàn)的。

　　本文的例子使用ASP.NET程序?qū)崿F(xiàn)，在實現(xiàn)上要做到以下幾點：

　　1、AJAX可以在不同的ASP.NET頁上向不同的服務(wù)端頁發(fā)送請求。

　　2、遠程頁面URL可以包含動態(tài)可計算的參數(shù)，這樣做可以在ASP.NET的后端代碼中更方便地建立URL字符串。

　　3、遠程頁在更新HTML頁之前可以使用復雜的數(shù)據(jù)進行響應，這也可以由ASP.NET的后端代碼完成。

　　4、一個服務(wù)端頁面可以是一個擴展的第三方的頁面，也可以是本身的web頁或服務(wù)。

　　以上的幾點如圖1所示

圖1

　　實現(xiàn)基本的AJAX JavaScript方法

　　我將JavaScript方法分成兩部分：調(diào)用特殊頁的JavaScript方法和一般的JavaScript方法。特殊的方法包括一個回調(diào)方法，它的作用是更新頁面內(nèi)容。而其它的AJAX方法負責建立一個XmlHttp對象，并向服務(wù)端發(fā)出一個異步的HTTP請求。

　　建立的XmlHttp對象因客戶端瀏覽器的不同而有所差異。本文只考慮兩種瀏覽器：一個是Microsoft的IE系列瀏覽器；另一個是Mozilla系列瀏覽器，包括Mozilla Firefox、Netscape和Safari。我也在Opera瀏覽器上測試過，但我不能保證本文的代碼可以很好地運行Opera瀏覽器上。下面是如何建立XmlHttp對象的代碼：

function GetXmlHttpObject(handler) { 　var objXmlHttp = null; 　if (!window.XMLHttpRequest) 　{ 　　// Microsoft 　　objXmlHttp = GetMSXmlHttp(); 　　if (objXmlHttp != null) 　　{ 　　　objXmlHttp.onreadystatechange = handler; 　　} 　} 　else 　{ 　　// Mozilla | Netscape | Safari 　　objXmlHttp = new XMLHttpRequest(); 　　if (objXmlHttp != null) 　　{ 　　　objXmlHttp.onload = handler; 　　　objXmlHttp.onerror = handler; 　　} 　} 　return objXmlHttp; } function GetMSXmlHttp() { 　var xmlHttp = null; 　var clsids = ["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0", "Msxml2.XMLHTTP.2.6","Microsoft.XMLHTTP.1.0", "Microsoft.XMLHTTP.1","Microsoft.XMLHTTP"]; 　for(var i=0; i<clsids.length && xmlHttp == null; i++) { 　　xmlHttp = CreateXmlHttp(clsids[i]); 　} 　return xmlHttp; } function CreateXmlHttp(clsid) { 　var xmlHttp = null; 　try { 　　xmlHttp = new ActiveXObject(clsid); 　　lastclsid = clsid; 　　return xmlHttp; 　} 　catch(e) {} }

　　由于MSXML5只是為Office設(shè)計的，因此，我們可以不考慮MSXML5。所以GetMSXmlHttp方法可以簡化為以下形式：

function GetMSXmlHttp() { 　var xmlHttp = null; 　var clsids = ["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0"]; 　for(var i=0; i<clsids.length && xmlHttp == null; i++) { 　　xmlHttp = CreateXmlHttp(clsids[i]); 　} 　return xmlHttp; }

　　我們可以看出，GetXmlHttpObject方法有一個handle參數(shù)，這個參數(shù)指向一個回調(diào)方法，這個回調(diào)方法將被定義在每一個需要刷新的aspx頁中�，F(xiàn)在我們已經(jīng)有了一個XmlHttp對象，接下來我們可以發(fā)送一個異步的HTTP請求了。

function SendXmlHttpRequest(xmlhttp, url) { 　xmlhttp.open('GET', url, true); 　xmlhttp.send(null); }

　　在以上代碼中我使用了一個GET HTTP請求發(fā)送了一個URL，你可以很容易修改以上的JavaScript代碼，使其發(fā)送其它的HTTP方法。

　　寫在aspx頁中的方法

　　現(xiàn)在我們已經(jīng)編寫完調(diào)用遠程頁面的所有方法。為了執(zhí)行這些方法，我們需要為GetXmlHttpObject方法傳遞一個回調(diào)方法名，然后向SendXmlHttpRequest方法傳遞一個URL字符串。下面是相應的實現(xiàn)代碼：

var xmlHttp; function ExecuteCall(url) { 　try 　{ 　　xmlHttp = GetXmlHttpObject(CallbackMethod); 　　SendXmlHttpRequest(xmlHttp, url); 　} 　catch(e){} } //CallbackMethod will fire when the state //has changed, i.e. data is received back function CallbackMethod() { 　try 　{ 　　//readyState of 4 or 'complete' represents 　　//that data has been returned 　　if (xmlHttp.readyState == 4 || xmlHttp.readyState == 'complete') 　　{ 　　　var response = xmlHttp.responseText; 　　　if (response.length > 0) 　　　{ 　　　　//update page 　　　　document.getElementById("elementId").innerHTML = response; 　　　} 　　} 　} 　catch(e){} }

　　CallbackMethod方法負責更新頁面。在我們的例子中，它只更新了指定的HTTP對象的inner HTML。但在實際應用中，可以更新更多的內(nèi)容。

　　最后要解決的問題是我們?nèi)绾卧赼spx頁中調(diào)用ExecuteCall方法。如何調(diào)用ExecuteCall方法取決于這個頁面要做什么。在一些情況下，ExecuteCall方法可以在JavaScript事件出發(fā)時調(diào)用。如果這樣做，我們還可以使用相應的aspx頁后端C#代碼將這個方法注冊為啟動腳本。

Page.RegisterStartupScript("ajaxMethod", String.Format("<script>ExecuteCall('{0}');</script>", url));

　　我們可以將上面代碼加到ASP.NET后端代碼的Page_Prerender或Page_Load方法中。

　　服務(wù)端頁面

　　讓我們看看服務(wù)端頁面象什么。如果它是一個ASP.NET頁（我們假設(shè)的），我們僅僅對它的后端代碼感性趣。我們可以將.aspx文件中代碼都刪除，這樣絲毫不會影響這個aspx頁的功能。

　　例如，我們有一個將攝氏度轉(zhuǎn)換為華氏度的web service。如果你將這個web service的URL的引用加入到你的工程中，Visual Studio將產(chǎn)生一個叫"com.developerdays.ItempConverterservice"的代理類，這個代理類使用當前的命名空間。有一個名為getTemp.aspx的aspx頁，它接收一個叫"temp"的查詢參數(shù)，這參數(shù)包含一個整數(shù)的攝氏度值。如http://localhost/getTemp.aspx?temp=25。這個aspx頁的后端代碼如下：

private void Page_Load(object sender, EventArgs e) { 　Response.Clear(); 　string temp = Request.QueryString["temp"]; 　if (temp != null) 　{ 　　try 　　{ 　　　int tempC = int.Parse(temp); 　　　string tempF = getTempF(tempC); 　　　Response.Write(tempF); 　　} 　　catch 　　{} 　} 　Response.End(); } private string getTempF(int tempC) { 　com.developerdays.ITempConverterservice 　svc = new ITempConverterservice(); 　int tempF = svc.CtoF(tempC); 　return tempF.ToString(); }

　　現(xiàn)在我們要建立一個可以調(diào)用上面的getTemp.aspx頁的請求字符串，這個字符串將傳遞到RegisterStartupScript方法中。代碼如下：

int tempC = 25; string url = String.Format("http://localhost/" + "getTemp.aspx?temp={0}", tempC);

　　在一些簡單情況，如果要傳遞的只是簡單的文本，可以通過URL直接傳給ExecuteCall方法。

　　結(jié)論

　　本文舉了一個在任何ASP.NET程序都可以使用AJAX技術(shù)的簡單例子。AJAX除了能給用戶一些全新的體驗外，也有一些缺點和不足。至于是否使用AJAX技術(shù)，這完全取決于開發(fā)人員自身，在本文中我只是舉了個簡單的例子，學習它并不需要太多的時間，也不需要任何特殊的技能。