在ASP.NET中實現AJAX(1)

來源:互聯網
上載者:User
ajax|asp.net

Asynchronous JavaScript and XML(Ajax)最近掀起的高潮,要完全歸功於Google在Google Suggest和Google Maps中的使用。對ASP.NET而言,Ajax不需要回傳就能進行伺服器端處理,從而使客戶機(瀏覽器)具有豐富的伺服器端能力。換句話說,它為非同步指派和處理請求與伺服器響應提供了一個架構。

Ajax利用了一些不是很新穎的已有技術,但是對這些技術(加到一起就是Ajax)的愛好最近突然升溫。

請嘗試Michael Schwarz的AJAX .NET封裝器,通過它ASP.NET開發人員可以快速方便的部署很容易利用AJAX功能的頁面。需要注意的是,這個封裝器處於初期開發階段,因此還沒有完全成熟。

然而,AJAX這樣的技術很可能破壞分層體繫結構(N-Tier)。我的看法是,AJAX增加了表示邏輯層(甚至更糟,業務層)滲透到展示層的可能性。像我這樣嚴肅的架構師對這種想法可能畏步不前。我感到AJAX的使用即便稍微越過了層次邊界,這種代價也是值得深思的。當然,這要視具體的項目和環境而定。

起步:它是如何工作的——概述

AJAX依靠代理(broker)指派和處理往返伺服器的請求。對此,.NET封裝器依靠用戶端XmlHttpRequest對象。多數瀏覽器都支援XmlHttpRequest對象,這就是選擇它的原因。因為封裝器的目的是隱藏XmlHttpRequest的實現,我們就不再詳細討論它了。

封裝器本身通過將.NET函數標記為AJAX方法來工作。標記之後,AJAX就建立對應的JavaScript函數,這些函數(和任何JavaScript函數一樣)作為代理可以在用戶端使用XmlHttpRequest調用。這些代理再映射回伺服器端函數。

複雜嗎?並不複雜。我們來看一個例子。假設有一個.NET函數:

public int Add(int firstNumber, int secondNumber)

{

return firstNumber + secondNumber;

}

Ajax .NET封裝器將自動建立名為“Add”、帶有兩個參數的JavaScript函數。使用JavaScript(在客戶機上)調用該函數時,請求將傳遞給伺服器並把結果返回給客戶機。

初始設定

我們首先介紹“安裝”項目中使用的.dll的步驟。如果您很清楚如何添加.dll檔案引用,可以跳過這一節。

首先,如果還沒有的話,請下載最新的AJAX版本。解壓下載的檔案並把Ajax.dll放到項目的引用檔案夾中。在Visual Studio.NET中有機Solution Explorer的“References(引用)”節點並選擇Add Reference(添加引用)。在開啟的對話方塊中,單擊Browse(瀏覽)並找到ref/Ajax.dll檔案。依次單擊Open(開啟)和Ok(確認)。這樣就可以用AJAX .NET封裝器編程了。

建立HttpHandler

為了保證正常工作,第一步是在web.config中設定封裝器的HttpHandler。不需要詳細解釋HttpHandlers是什麼及其如何工作,只要知道它們用於處理ASP.NET請求就足夠了。比如,所有*.aspx頁面請求都由System.Web.UI.PageHandlerFactory類處理。類似的,我們讓所有對Ajax/*.ashx的請求由Ajax.PageHandlerFactory處理:

<configuration>

<system.web>

<httpHandlers>

<add verb="POST,GET" path="Ajax/*.ashx"

type="Ajax.PageHandlerFactory, Ajax" />

</httpHandlers> 

...

<system.web>

</configuration>

簡言之,上面的代碼告訴ASP.NET,和指定路徑(Ajax/*.ashx)匹配的任何請求都由Ajax.PageHandlerFactory而不是預設處理常式工廠來處理。不需要建立Ajax子目錄,使用這個神秘的目錄只是為了讓其他HttpHandlers能夠在自己建立的子目錄中使用.ashx擴充。

建立頁面

現在我們可以開始編碼了。建立一個新頁面或者開啟已有的頁面,在file後的代碼中,為Page_Load事件添加以下代碼:

public class Index : System.Web.UI.Page{

private void Page_Load(object sender, EventArgs e){

Ajax.Utility.RegisterTypeForAjax(typeof(Index));     

//...   

}

//... 

}

調用RegisterTypeForAjax將在頁面上引發後面的JavaScript(或者在頁面中手工加入以下兩行代碼):

<script language="javascript" src="Ajax/common.ashx"></script>

<script language="javascript"

src="Ajax/Namespace.PageClass,AssemblyName.ashx"></script> 

其中最後一行的含義是:

Namespace.PageClass——當前頁面的名稱空間和類(通常是@Page指令中Inherits屬性的值)

AssemblyName——當前頁面所屬程式集的名稱(通常就是項目名)

下面是AjaxPlay項目中sample.aspx頁面的結果例子:

<%@ Page Inherits="AjaxPlay.Sample" Codebehind="sample.aspx.cs" ... %>

<html>

<head>

<script language="javascript" src="Ajax/common.ashx"></script>

<script language="javascript"

src="Ajax/AjaxPlay.Sample,AjaxPlay.ashx"></script>

</head>

<body>   

<form id="Form1" method="post" runat="server">

...

</form>   

</body>

</html>

可以在瀏覽器中手工導航到src路徑(查看原始碼,複製粘貼路徑)檢查是否一切正常。如果兩個路徑都輸出一些(似乎)毫無意義的文本,就萬事大吉了。如果什麼也沒輸出或者出現ASP.NET錯誤,則表明有些地方出現問題。

即便不知道HttpHandlers如何工作,上面的例子也很容易理解。通過web.config,我們已經保證所有對Ajax/*.ashx的請求都由自訂的處理常式處理。顯然,這裡的兩個指令碼標籤將由自訂的處理常式處理。

[1] [2] [3] [4] [5]  下一頁



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.