在跟html+ashx打交道的園友們肯定會發現,這種模式雖然優美,但在開發中會遇到一些難處理的地方。我也不例外,下面是自己在實際開發中總結出來的幾條經驗,希望跟大家分享,更希望得到大家的建議和更好的解決方法!
問題1:用委托字典代替switch...case。
這個問題是在處理請求時發現的,大家肯定也不願意在自己的項目中建許多的handler來處理那麼多的請求,于是就想到在一個handler裡處理多個請求,ajax請求中都加一個action的參數,在handler裡根據這個action做相應的處理或傳回相應的資料,這裡肯定沒有人用if...else來判斷action,大多數人都會想到用switch...case,一開始我也是用的switch,但漸漸地發現,每個case不像一個代碼塊,不能為其中的變量提供一個獨立的作用域!用龍珠中孫悟空的話“真是傷腦筋”。
在網上搜了一下,也有不少人遇到這個問題。有個解決方法是把每個處理單獨成handler裡一個方法,這樣清楚明了,但在ProcessRequest方法中要用反射調用對應的方法!自己對這個解決辦法不太滿意,于是想到了委托,想到了字典,把反射調用方法變成在字典裡索引委托。
首先在handler裡聲明一個私有的靜态委托字典:
static Dictionary<string, Func<string>> hs;
然後用handler(一般處理程式的類)裡靜态構造函數初始化hs,更重要的是要在靜态構造函數裡添加處理方法:
static Handler()
{
hs = new Dictionary<string, Func<string>>();
hs.Add("add", delegate()
{
int id = int.Parse(req("id"));
string title = req("title");
return "add";
});
hs.Add("update", delegate()
return "update";
}
最後就是在ProcessRequest方法裡調用了:
context.Response.ContentType = "text/plain";
HttpRequest req = context.Request;
string action = req["action"].ToLower();
string result = hs[action]();
context.Response.Write(result);
這樣便避免了switch...case的變量作用域問題和反射的效率問題。關于上面用到的req()方法,我的想法是把公共的東西用靜态方法提供,如:
static string req(string key)
return HttpContext.Current.Request[key];
static string jss(object obj)
JavaScriptSerializer JSS = new JavaScriptSerializer();
return JSS.Serialize(obj);
問題2:權限問題。
你肯定不願自己的資料在使用者沒有登陸或登陸過期後還可以繼續通路。這裡假設登陸的使用者用Session["user"]來存儲,當然在handler裡判斷一下Session["user"]是很簡單的事情,但問題是你如何讓Session["user"]為null時的使用者跳轉到指定頁(這裡假設是登陸頁login.html)。哈哈,這時你會不會想到用context.Response.Redirect ("login.html")這樣一句話來解決呢!我的第一反映是這樣的,但分析一下,ajax是請求資料的,這樣做是讓ajax去請求login.html這個頁面,得到的結果應該是login.html的源代碼才對,分析是這樣分析的,可還是不死心,還是測試了一下,結果正如分析的那樣,login.html的源代碼做為ajax請求結果傳回了!
其實,大家心理明白,有一個很簡單的方法,就是在Session["user"]為null時傳回一個特定值,這裡假設"unlogin",然後在每次ajax請求完成後判斷傳回值是不是"unlogin"。
這方法很簡單,也很可靠,但很笨,很麻煩,可行性不高。于是我又想到了jquery.ajaxSuccess(),想用它來做統一處理,在我想到它的時候我就有點兒擔心,jquery會不會是先調用具體請求的回調函數然後再調用這全局的回調函數呢?我帶着這個疑問做了測試,結果也如預料那樣先執行具體請求的回調再執行全局回調!沒法辦,隻好查jquery的源碼了~。在沒壓縮的jquery-1.4.2.js裡找到了success()這方法,果然如此,改順序後如下:
function success() {
if ( s.global ) {
trigger( "ajaxSuccess", [xhr, s] );
}
// If a local callback was specified, fire it and pass it the data
if ( s.success && xhr.responseText!="unlogin" ) {
s.success.call( callbackContext, data, status, xhr );
}
執行順序是改好了,可跳轉的代碼寫哪呢?每個頁面寫一次?不不,這不是我們寫程式的風格,思來想去,寫到jquery檔案裡(最下面)是一個可行的方法:
$(document).ajaxSuccess(function(event,xhr,settings){
if(xhr.responseText=="unlogin"){
window.top.location.href="/login.html";
}
})
很顯示,不是每個頁面的ajax請求都要求使用者登陸,比如login.html頁,是以判斷時要排除不用登陸的頁面:
if (HttpContext.Current.Request.UrlReferrer.ToString().ToLower().IndexOf("login.html") < 0)
if (HttpContext.Current.Session["user"] == null)
HttpContext.Current.Response.Write("unlogin");
HttpContext.Current.Response.End();
問題3:資料模闆。
<ul id="ulList">
<li><a href="somepage.html?id={ID}">{Title}</a><br />
{Content}</li>
</ul>
<code></code> 把模闆直接寫在目标容器裡,就像一條資料一樣,美工調樣式不是問題,程式加方法不是問題,這方法我看行!但js肯定不會直接操作這個模闆吧,現在要做的就是把這個模闆變成真的模闆:
$(function() {
var ulList = $("#ulList");
ulList.data("tpl",ulList.html()).empty();
把模闆存儲到容器的data裡應該是再适當不過了,而且這個操作在頁面加載完馬上就做!然後把容器清空,讓位給後來加載過來的真實資料。背景提供json資料,這個很簡單:
public class News
{
public int ID { get; set; }
public string Title { get; set; }
public string Content { get; set; }
//handler裡用了上面第一個問題的解決方法
hs.Add("getNews", delegate()
List<News> list = new List<News>()
{
new News(){ ID=1,Title="title1",Content="Content1"},
new News(){ ID=2,Title="title2",Content="Content2"},
new News(){ ID=3,Title="title3",Content="Content3"},
};
return jss(list);
});
前台取資料沒什麼好說的,這個很基本:
$.get("Handler.ashx?n=" + Math.random(), { action: "getNews" }, function(data) {
var list = $.parseJSON(data);
var ul = $("#ulList");
var html = "";
for (var i = 0; i < list.length; i++) {
html += ul.data("tpl").format(list[i]);
}
ul.html(html);
})
但當我加了事件後,我發現還不夠好。如果在模闆li裡加上onclick="show({ID},'{Title}')",IE裡剛打開頁面的時候就會有js錯誤,這是為什麼呢?問題在這個ID參數上,因為{ID}被看作json對象了,而它卻是一個格式不對的json! 提示js錯誤也正常,'{Title}'沒有錯誤是原因這裡看作字元串參數了。這個js錯誤雖然不影響程式,但沒有人不喜歡自己寫的代碼是沒有js錯誤的! 解決方法很簡單,像Title參數一樣加引号就可以了,如果show方法裡真的要數字類型,隻好在那裡轉換一下喽!不過你肯定會發現,很多時候是不用轉換的,甚至你還希望它就是個字元串類型呢!
從沒有這麼認真的寫過随筆,三個星期就休息了這一下午,沒陪女朋友,沒睡大覺,沒找朋友喝酒,卻老老實實地把它完成了!
另加:取資料模闆可寫成函數
function initTemplate(){
$(".tplContainer").each(function() { //取出模闆
$(this).data("tpl", unescape($(this).html())).empty().removeClass("tplContainer");
}
在容器裡加.tplContainer{display:none},這樣也不會加載時顯示出模闆了!