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

　　介紹

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

　　為什麼使用AJAX

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

　　由於這項技術的實現需要依賴於前端的浏覽器因此它的使用受到了限制但在最近的幾年由於浏覽器功能的加強和一些公司如Google的許多基於AJAX的應用的不俗表現終於使這項技術鳳凰涅磐欲火重生

　　現在AJAX的使用已經非常廣泛任何帶有豐富用戶體驗的動態網頁都會不約而同地使用AJAX

　　解決方案

　　本文所描述的使用AJAX的方法非常簡單而且效率很高同時這種方法還非常容易維護並且開發人員無需任何的特殊技巧就可以實現它而且使用這種方法還可以跨浏覽器

　　一個基本的AJAX實現需要兩個主要部分一個使用JavaScript代碼編寫的客戶端HTML頁這些JavaScript用來向服務端發送請求和接收響應一個可以接收請求和向客戶端發送響應信息的遠程頁面客戶端的JavaScript代碼的任務是建立一個XmlHttp對象然後向服務端發送請求信息最後通過回調方式處理服務端返回的響應信息這一切都是由JavaScript代碼實現的

　　本文的例子使用ASPNET程序實現在實現上要做到以下幾點

　　AJAX可以在不同的ASPNET頁上向不同的服務端頁發送請求

　　遠程頁面URL可以包含動態可計算的參數這樣做可以在ASPNET的後端代碼中更方便地建立URL字符串

　　遠程頁在更新HTML頁之前可以使用復雜的數據進行響應這也可以由ASPNET的後端代碼完成

　　一個服務端頁面可以是一個擴展的第三方的頁面也可以是本身的web頁或服務

　　以上的幾點如圖所示

　　

圖

　　實現基本的AJAX JavaScript方法

　　我將JavaScript方法分成兩部分調用特殊頁的JavaScript方法和一般的JavaScript方法特殊的方法包括一個回調方法它的作用是更新頁面內容而其它的AJAX方法負責建立一個XmlHttp對象並向服務端發出一個異步的HTTP請求

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

　　 function GetXmlHttpObject(handler)
{
　var objXmlHttp = null;
　if (!windowXMLHttpRequest)
　{
　　// Microsoft
　　objXmlHttp = GetMSXmlHttp();
　　if (objXmlHttp != null)
　　{
　　　objXmlHttponreadystatechange = handler;
　　}
　}
　else
　{
　　// Mozilla | Netscape | Safari
　　objXmlHttp = new XMLHttpRequest();
　　if (objXmlHttp != null)
　　{
　　　objXmlHttponload = handler;
　　　objXmlHttponerror = handler;
　　}
　}
　return objXmlHttp;
}

function GetMSXmlHttp()
{
　var xmlHttp = null;
　var clsids = [MsxmlXMLHTTPMsxmlXMLHTTPMsxmlXMLHTTPMsxmlXMLHTTP
MsxmlXMLHTTPMicrosoftXMLHTTP
MicrosoftXMLHTTPMicrosoftXMLHTTP];
　for(var i=; 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設計的，因此，我們可以不考慮MSXML5。tw.WINgwIT.coM所以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　　xmlHttp = CreateXmlHttp(clsids[i]);
　}
　return xmlHttp;
}

　　我們可以看出，GetXmlHttpObject方法有一個handle參數，這個參數指向一個回調方法，這個回調方法將被定義在每一個需要刷新的aspx頁中。現在我們已經有了一個XmlHttp對象，接下來我們可以發送一個異步的HTTP請求了。

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

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

　　寫在aspx頁中的方法

　　現在我們已經編寫完調用遠程頁面的所有方法。為了執行這些方法，我們需要為GetXmlHttpObject方法傳遞一個回調方法名，然後向SendXmlHttpRequest方法傳遞一個URL字符串。下面是相應的實現代碼：

　　 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。但在實際應用中，可以更新更多的內容。

　　最後要解決的問題是我們如何在aspx頁中調用ExecuteCall方法。如何調用ExecuteCall方法取決於這個頁面要做什麼。在一些情況下，ExecuteCall方法可以在JavaScript事件出發時調用。如果這樣做，我們還可以使用相應的aspx頁後端C#代碼將這個方法注冊為啟動腳本。

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

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

　　服務端頁面

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

　　例如，我們有一個將攝氏度轉換為華氏度的web service。如果你將這個web service的URL的引用加入到你的工程中，Visual Studio將產生一個叫"com.developerdays.ItempConverterservice"的代理類，這個代理類使用當前的命名空間。有一個名為getTemp.aspx的aspx頁，它接收一個叫"temp"的查詢參數，這參數包含一個整數的攝氏度值。如x?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();
}

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

　　 int tempC = 25;
string url = String.Format("x?temp={0}", tempC);

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

　　結論

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

From:http://tw.wingwit.com/Article/program/net/201311/11662.html