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

為什麼使用AJAX

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

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

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

　　解決方案

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

　　一個基本的AJAX實現需要兩個主要部分：一個使用JavaScript程式碼編寫的客戶端HTML頁，這些JavaScript用來向服務端傳送請求和接收響應;一個可以接收請求和向客戶端傳送響應資訊的遠端頁面。客戶端的JavaScript程式碼的任務是建立一個XmlHttp物件，然後向服務端傳送請求資訊，最後通過回撥方式處理服務端返回的響應資訊。這一切都是由JavaScript程式碼實現的。

　　本文的例子使用ASP.NET程式實現，在實現上要做到以下幾點：

　　1、AJAX可以在不同的ASP.NET頁上向不同的服務端頁傳送請求。

　　2、遠端頁面URL可以包含動態可計算的引數，這樣做可以在ASP.NET的後端程式碼中更方便地建立URL字串。

　　3、遠端頁在更新HTML頁之前可以使用複雜的資料進行響應，這也可以由ASP.NET的後端程式碼完成。

　　4、一個服務端頁面可以是一個擴充套件的第三方的頁面，也可以是本身的web頁或服務。

　　以上的幾點如圖1所示

　　

　　圖1

實現基本的AJAX JavaScript方法

　　我將JavaScript方法分成兩部分：呼叫特殊頁的JavaScript方法和一般的JavaScript方法。特殊的方法包括一個回撥方法，它的作用是更新頁面內容。而其它的AJAX方法負責建立一個XmlHttp物件，並向服務端發出一個非同步的HTTP請求。

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

      function GetXmlHttpObject(handler)
　　{

　　var bjXmlHttp = 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

　　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。所以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(" ", 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"的查詢引數，這引數包含一個整數的攝氏度值。如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();

　　}

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

　　int tempC = 25;

　　string url = String.Format("http://localhost/" +

　　"getTemp.aspx?temp={0}", tempC);
 
　　在一些簡單情況，如果要傳遞的只是簡單的文字，可以通過URL直接傳給executeCall方法。

　　結論

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

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-526834/，如需轉載，請註明出處，否則將追究法律責任。