另一種選擇 AJAX與泛型處理常式(.ashx)

2011-01-07

28442
0
C#

前面哩哩匝匝講了這麼多, 大部分都是圍繞在PageMethod

( 發這麼多篇不入流的文章, 傷了大家的眼不好意思 orz)

會推薦jQuery的AJAX呼叫PageMethod的原因

其實最主要是透過.NET auto Parse JSON的機制

讓我們寫起程式就跟之前AutoPostBack在同一頁不同之程式叫來叫去一樣

一開始陣痛期過後

後面寫起來就是行雲流水

但是PageMethod有他的缺點在, 例如說要傳輸的資料量大於純ajax

會輸出許多自動產生的js程式碼之類的

而我們其實有另外一種選擇, 泛型處理常式(.ashx)

點右鍵選新增項目可以看到

相信寫程式一定時間的人一定知道泛型處理程式, 在這邊就不多介紹, 總之就是類似ASPX的一個獨立檔案

僅說用AJAX呼叫這頁的好處

傳輸的資料量較PageMethod來得小 (相對的時間就更快)

可以讓不同頁面呼叫 (其實PageMethod也可以讓不同頁面呼叫, 但是不建議)

讓程式碼分工更清楚

1. PageMethod : for該頁會用到的功能

2. ASHX : 讓不同頁可以呼叫同一支程式

我個人習慣這樣分, 讓程式邏輯跟模組更清楚, 並且確實的讓自己的程式DRY一點

直接切入主題, 要怎麼呼叫


$.ajax({
	url: {YourPath}/{YourFile}.ashx,
	data: { itemId : 3 }, //不需要經過$.toJSON
	type: 'GET',
	contentType: 'application/json; charset=utf-8',
	dataType: 'json',
	success: function (data) {
		if(data)
			alert(data.name);
	}
});

url : 指向該ashx的檔案

data : 可以直接放物件進去, 不需要經過toJSON或著組字串

type : GET ( 重要, 直接放data的話需要用GET, 或著只是我沒試出來 orz; 不過不是把data處理之後放進去是可以用POST之類的啦)

可以看到跟PageMethod比較不一樣的是這三個屬性

當然這只是ashx的一種呼叫方式, jQuery是很強大的, 還有其他呼叫模式

但是我習慣用這種, 也相對的直覺, 而且用json

而在ashx該頁面的程式碼則是


using System.Web.Services;
using System.Web.SessionState;
using System.Web.Script.Serialization;

    public class CategoryHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string szItemId = context.Request.QueryString["itemId"] ?? string.Empty; //傳入的參數
			if (string.IsNullOrEmpty(szItemId)) return;
			
            int nItemId = -999;
            if (!int.TryParse(szItemId, out nItemId) || nItemId <= 0) return;
			
			Student stu = new Student(nItemId);
			
			context.Response.ContentType = "application/json";
			context.Response.Charset = "utf-8";
			context.Response.Write(new JavaScriptSerializer().Serialize(stu));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

可以看到使用的方式很簡潔, 就是用queryString用傳入的data attr取得value (可以傳入多個key –> value,)

接著進行操作

而操作完之後, 因為這不是PageMethod, .net不會自動parse成JSON

於是我們手動引入using System.Web.Script.Serialization;

接著宣告說這些訊息是JSON, 再用工具把他Parse成JSON string

這樣就可以在success的地方接到該物件了

特別要注意的是


success: function (data) {
	if(data)
		alert(data.name);
}

可以看到這邊直接就可以操作data的屬性

不像PageMethod要取得name

必須要用data.d.name

這是特別要注意的地方

一般來說ashx我會習慣把類似的程式碼放在裡面

例如說我要取得某一個類別的商品

我可以把這段程式寫在ashx, 再不同頁面要取得不同類別的商品時

我就通通都叫這支ashx, 並且在處理就好, 不用在每一頁重複

至於怎麼寫jQuery UI 結合這支程式包裝成一個UI,

每一頁只需要套用UI不用管AJAX, 那又是另外一個故事了 = =

而ashx的應用還很多

之後在慢慢介紹, 若有任何寫錯的地方也麻煩前輩指正

本文可能有理解錯誤或不盡不實的地方

請路過的前輩不要客氣用力打醒

這會是我們成長的主要養分

回首頁