關(guān)于html+ashx開發(fā)中幾個(gè)問題的解決方法
更新時(shí)間：2011年07月18日 00:49:49 作者：
在跟html+ashx打交道的園友們肯定會(huì)發(fā)現(xiàn)，這種模式雖然優(yōu)美，但在開發(fā)中會(huì)遇到一些難處理的地方。我也不例外，下面是自己在實(shí)際開發(fā)中總結(jié)出來的幾條經(jīng)驗(yàn)，希望跟大家分享，更希望得到大家的建議和更好的解決方法！
問題1：用委托字典代替switch...case。
這個(gè)問題是在處理請(qǐng)求時(shí)發(fā)現(xiàn)的，大家肯定也不愿意在自己的項(xiàng)目中建許多的handler來處理那么多的請(qǐng)求，于是就想到在一個(gè)handler里處理多個(gè)請(qǐng)求，ajax請(qǐng)求中都加一個(gè)action的參數(shù)，在handler里根據(jù)這個(gè)action做相應(yīng)的處理或返回相應(yīng)的數(shù)據(jù)，這里肯定沒有人用if...else來判斷action，大多數(shù)人都會(huì)想到用switch...case，一開始我也是用的switch，但漸漸地發(fā)現(xiàn)，每個(gè)case不像一個(gè)代碼塊，不能為其中的變量提供一個(gè)獨(dú)立的作用域！用龍珠中孫悟空的話“真是傷腦筋”。
在網(wǎng)上搜了一下，也有不少人遇到這個(gè)問題。有個(gè)解決方法是把每個(gè)處理單獨(dú)成handler里一個(gè)方法，這樣清楚明了，但在ProcessRequest方法中要用反射調(diào)用對(duì)應(yīng)的方法！自己對(duì)這個(gè)解決辦法不太滿意，于是想到了委托，想到了字典，把反射調(diào)用方法變成在字典里索引委托。
首先在handler里聲明一個(gè)私有的靜態(tài)委托字典：
static Dictionary<string, Func<string>> hs;
然后用handler(一般處理程序的類)里靜態(tài)構(gòu)造函數(shù)初始化hs，更重要的是要在靜態(tài)構(gòu)造函數(shù)里添加處理方法：
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()
{
int id = int.Parse(req("id"));
string title = req("title");
return "update";
});
}
最后就是在ProcessRequest方法里調(diào)用了：
context.Response.ContentType = "text/plain";
HttpRequest req = context.Request;
string action = req["action"].ToLower();
string result = hs[action]();
context.Response.Write(result);
這樣便避免了switch...case的變量作用域問題和反射的效率問題。關(guān)于上面用到的req()方法，我的想法是把公共的東西用靜態(tài)方法提供，如：
static string req(string key)
{
return HttpContext.Current.Request[key];
}
static string jss(object obj)
{
JavaScriptSerializer JSS = new JavaScriptSerializer();
return JSS.Serialize(obj);
}
問題2：權(quán)限問題。
你肯定不愿自己的數(shù)據(jù)在用戶沒有登陸或登陸過期后還可以繼續(xù)訪問。這里假設(shè)登陸的用戶用Session["user"]來存儲(chǔ)，當(dāng)然在handler里判斷一下Session["user"]是很簡單的事情，但問題是你如何讓Session["user"]為null時(shí)的用戶跳轉(zhuǎn)到指定頁(這里假設(shè)是登陸頁login.html)。哈哈，這時(shí)你會(huì)不會(huì)想到用context.Response.Redirect ("login.html")這樣一句話來解決呢！我的第一反映是這樣的，但分析一下，ajax是請(qǐng)求數(shù)據(jù)的，這樣做是讓ajax去請(qǐng)求login.html這個(gè)頁面，得到的結(jié)果應(yīng)該是login.html的源代碼才對(duì)，分析是這樣分析的，可還是不死心，還是測(cè)試了一下，結(jié)果正如分析的那樣，login.html的源代碼做為ajax請(qǐng)求結(jié)果返回了！
其實(shí)，大家心理明白，有一個(gè)很簡單的方法，就是在Session["user"]為null時(shí)返回一個(gè)特定值，這里假設(shè)"unlogin"，然后在每次ajax請(qǐng)求完成后判斷返回值是不是"unlogin"。
這方法很簡單，也很可靠，但很笨，很麻煩，可行性不高。于是我又想到了jquery.ajaxSuccess()，想用它來做統(tǒng)一處理，在我想到它的時(shí)候我就有點(diǎn)兒擔(dān)心，jquery會(huì)不會(huì)是先調(diào)用具體請(qǐng)求的回調(diào)函數(shù)然后再調(diào)用這全局的回調(diào)函數(shù)呢？我?guī)е@個(gè)疑問做了測(cè)試，結(jié)果也如預(yù)料那樣先執(zhí)行具體請(qǐng)求的回調(diào)再執(zhí)行全局回調(diào)！沒法辦，只好查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 );
}
}
執(zhí)行順序是改好了，可跳轉(zhuǎn)的代碼寫哪呢?每個(gè)頁面寫一次？不不，這不是我們寫程序的風(fēng)格，思來想去，寫到j(luò)query文件里(最下面)是一個(gè)可行的方法：
$(document).ajaxSuccess(function(event,xhr,settings){
if(xhr.responseText=="unlogin"){
window.top.location.href="/login.html";
}
})
很顯示，不是每個(gè)頁面的ajax請(qǐng)求都要求用戶登陸，比如login.html頁，所以判斷時(shí)要排除不用登陸的頁面：
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：數(shù)據(jù)模板。
真是什么東西需要，什么都東西就應(yīng)運(yùn)而生！在寫這個(gè)隨筆之前正好在園里看到了個(gè)jquery.tmpl的文章！tmpl的產(chǎn)生也正是解決這個(gè)問題的！我很自知這個(gè)方法沒tmpl強(qiáng)大，但tmpl有一個(gè)問題沒有解決，其實(shí)模板有兩個(gè)主要的問題，1是如果模板存儲(chǔ)在js里不好編輯，2是要把模板存儲(chǔ)在哪里才方便設(shè)計(jì)時(shí)的視圖呢！tmpl把模板存儲(chǔ)在<script type="text/x-jquery-tmpl"></script>標(biāo)簽中，應(yīng)該說是解決了第一個(gè)問題，但我感覺第2個(gè)問題也是很重要的！想來想去，只能把模板直接存儲(chǔ)在數(shù)據(jù)的容器標(biāo)記里：
<ul id="ulList">
<li><a href="somepage.html?id={ID}">{Title}</a><br />
{Content}</li>
</ul>
把模板直接寫在目標(biāo)容器里，就像一條數(shù)據(jù)一樣，美工調(diào)樣式不是問題，程序加方法不是問題，這方法我看行！但js肯定不會(huì)直接操作這個(gè)模板吧，現(xiàn)在要做的就是把這個(gè)模板變成真的模板：
$(function() {
var ulList = $("#ulList");
ulList.data("tpl",ulList.html()).empty();
}
把模板存儲(chǔ)到容器的data里應(yīng)該是再適當(dāng)不過了，而且這個(gè)操作在頁面加載完馬上就做！然后把容器清空，讓位給后來加載過來的真實(shí)數(shù)據(jù)。后臺(tái)提供json數(shù)據(jù)，這個(gè)很簡單：
public class News
{
public int ID { get; set; }
public string Title { get; set; }
public string Content { get; set; }
}
//handler里用了上面第一個(gè)問題的解決方法
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);
});
前臺(tái)取數(shù)據(jù)沒什么好說的，這個(gè)很基本：
$.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);
})
在填充數(shù)據(jù)的時(shí)候用了string.format這個(gè)方法，它在我js中的string.format 隨筆里有記錄，呵呵，這個(gè)我也沒有想到，寫format的時(shí)候讓它支持json對(duì)象只是為了閱讀方便，然而用到這如此合適！到這的時(shí)候我已興奮不已了，測(cè)試結(jié)果如下：
從沒有這么認(rèn)真的寫過隨筆，三個(gè)星期就休息了這一下午，沒陪女朋友，沒睡大覺，沒找朋友喝酒，卻老老實(shí)實(shí)地把它完成了!
這個(gè)問題是在處理請(qǐng)求時(shí)發(fā)現(xiàn)的，大家肯定也不愿意在自己的項(xiàng)目中建許多的handler來處理那么多的請(qǐng)求，于是就想到在一個(gè)handler里處理多個(gè)請(qǐng)求，ajax請(qǐng)求中都加一個(gè)action的參數(shù)，在handler里根據(jù)這個(gè)action做相應(yīng)的處理或返回相應(yīng)的數(shù)據(jù)，這里肯定沒有人用if...else來判斷action，大多數(shù)人都會(huì)想到用switch...case，一開始我也是用的switch，但漸漸地發(fā)現(xiàn)，每個(gè)case不像一個(gè)代碼塊，不能為其中的變量提供一個(gè)獨(dú)立的作用域！用龍珠中孫悟空的話“真是傷腦筋”。
在網(wǎng)上搜了一下，也有不少人遇到這個(gè)問題。有個(gè)解決方法是把每個(gè)處理單獨(dú)成handler里一個(gè)方法，這樣清楚明了，但在ProcessRequest方法中要用反射調(diào)用對(duì)應(yīng)的方法！自己對(duì)這個(gè)解決辦法不太滿意，于是想到了委托，想到了字典，把反射調(diào)用方法變成在字典里索引委托。
首先在handler里聲明一個(gè)私有的靜態(tài)委托字典：
static Dictionary<string, Func<string>> hs;
然后用handler(一般處理程序的類)里靜態(tài)構(gòu)造函數(shù)初始化hs，更重要的是要在靜態(tài)構(gòu)造函數(shù)里添加處理方法：
復(fù)制代碼 代碼如下:
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()
{
int id = int.Parse(req("id"));
string title = req("title");
return "update";
});
}
最后就是在ProcessRequest方法里調(diào)用了：
復(fù)制代碼 代碼如下:
context.Response.ContentType = "text/plain";
HttpRequest req = context.Request;
string action = req["action"].ToLower();
string result = hs[action]();
context.Response.Write(result);
這樣便避免了switch...case的變量作用域問題和反射的效率問題。關(guān)于上面用到的req()方法，我的想法是把公共的東西用靜態(tài)方法提供，如：
復(fù)制代碼 代碼如下:
static string req(string key)
{
return HttpContext.Current.Request[key];
}
static string jss(object obj)
{
JavaScriptSerializer JSS = new JavaScriptSerializer();
return JSS.Serialize(obj);
}
問題2：權(quán)限問題。
你肯定不愿自己的數(shù)據(jù)在用戶沒有登陸或登陸過期后還可以繼續(xù)訪問。這里假設(shè)登陸的用戶用Session["user"]來存儲(chǔ)，當(dāng)然在handler里判斷一下Session["user"]是很簡單的事情，但問題是你如何讓Session["user"]為null時(shí)的用戶跳轉(zhuǎn)到指定頁(這里假設(shè)是登陸頁login.html)。哈哈，這時(shí)你會(huì)不會(huì)想到用context.Response.Redirect ("login.html")這樣一句話來解決呢！我的第一反映是這樣的，但分析一下，ajax是請(qǐng)求數(shù)據(jù)的，這樣做是讓ajax去請(qǐng)求login.html這個(gè)頁面，得到的結(jié)果應(yīng)該是login.html的源代碼才對(duì)，分析是這樣分析的，可還是不死心，還是測(cè)試了一下，結(jié)果正如分析的那樣，login.html的源代碼做為ajax請(qǐng)求結(jié)果返回了！
其實(shí)，大家心理明白，有一個(gè)很簡單的方法，就是在Session["user"]為null時(shí)返回一個(gè)特定值，這里假設(shè)"unlogin"，然后在每次ajax請(qǐng)求完成后判斷返回值是不是"unlogin"。
這方法很簡單，也很可靠，但很笨，很麻煩，可行性不高。于是我又想到了jquery.ajaxSuccess()，想用它來做統(tǒng)一處理，在我想到它的時(shí)候我就有點(diǎn)兒擔(dān)心，jquery會(huì)不會(huì)是先調(diào)用具體請(qǐng)求的回調(diào)函數(shù)然后再調(diào)用這全局的回調(diào)函數(shù)呢？我?guī)е@個(gè)疑問做了測(cè)試，結(jié)果也如預(yù)料那樣先執(zhí)行具體請(qǐng)求的回調(diào)再執(zhí)行全局回調(diào)！沒法辦，只好查jquery的源碼了~。在沒壓縮的jquery-1.4.2.js里找到了success()這方法，果然如此，改順序后如下：
復(fù)制代碼 代碼如下:
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 );
}
}
執(zhí)行順序是改好了，可跳轉(zhuǎn)的代碼寫哪呢?每個(gè)頁面寫一次？不不，這不是我們寫程序的風(fēng)格，思來想去，寫到j(luò)query文件里(最下面)是一個(gè)可行的方法：
復(fù)制代碼 代碼如下:
$(document).ajaxSuccess(function(event,xhr,settings){
if(xhr.responseText=="unlogin"){
window.top.location.href="/login.html";
}
})
很顯示，不是每個(gè)頁面的ajax請(qǐng)求都要求用戶登陸，比如login.html頁，所以判斷時(shí)要排除不用登陸的頁面：
復(fù)制代碼 代碼如下:
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：數(shù)據(jù)模板。
真是什么東西需要，什么都東西就應(yīng)運(yùn)而生！在寫這個(gè)隨筆之前正好在園里看到了個(gè)jquery.tmpl的文章！tmpl的產(chǎn)生也正是解決這個(gè)問題的！我很自知這個(gè)方法沒tmpl強(qiáng)大，但tmpl有一個(gè)問題沒有解決，其實(shí)模板有兩個(gè)主要的問題，1是如果模板存儲(chǔ)在js里不好編輯，2是要把模板存儲(chǔ)在哪里才方便設(shè)計(jì)時(shí)的視圖呢！tmpl把模板存儲(chǔ)在<script type="text/x-jquery-tmpl"></script>標(biāo)簽中，應(yīng)該說是解決了第一個(gè)問題，但我感覺第2個(gè)問題也是很重要的！想來想去，只能把模板直接存儲(chǔ)在數(shù)據(jù)的容器標(biāo)記里：
復(fù)制代碼 代碼如下:
<ul id="ulList">
<li><a href="somepage.html?id={ID}">{Title}</a><br />
{Content}</li>
</ul>
把模板直接寫在目標(biāo)容器里，就像一條數(shù)據(jù)一樣，美工調(diào)樣式不是問題，程序加方法不是問題，這方法我看行！但js肯定不會(huì)直接操作這個(gè)模板吧，現(xiàn)在要做的就是把這個(gè)模板變成真的模板：
復(fù)制代碼 代碼如下:
$(function() {
var ulList = $("#ulList");
ulList.data("tpl",ulList.html()).empty();
}
把模板存儲(chǔ)到容器的data里應(yīng)該是再適當(dāng)不過了，而且這個(gè)操作在頁面加載完馬上就做！然后把容器清空，讓位給后來加載過來的真實(shí)數(shù)據(jù)。后臺(tái)提供json數(shù)據(jù)，這個(gè)很簡單：
復(fù)制代碼 代碼如下:
public class News
{
public int ID { get; set; }
public string Title { get; set; }
public string Content { get; set; }
}
//handler里用了上面第一個(gè)問題的解決方法
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);
});
前臺(tái)取數(shù)據(jù)沒什么好說的，這個(gè)很基本：
復(fù)制代碼 代碼如下:
$.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);
})
在填充數(shù)據(jù)的時(shí)候用了string.format這個(gè)方法，它在我js中的string.format 隨筆里有記錄，呵呵，這個(gè)我也沒有想到，寫format的時(shí)候讓它支持json對(duì)象只是為了閱讀方便，然而用到這如此合適！到這的時(shí)候我已興奮不已了，測(cè)試結(jié)果如下：
從沒有這么認(rèn)真的寫過隨筆，三個(gè)星期就休息了這一下午，沒陪女朋友，沒睡大覺，沒找朋友喝酒，卻老老實(shí)實(shí)地把它完成了!
相關(guān)文章
jQuery基于ajax方式實(shí)現(xiàn)用戶名存在性檢查功能示例
這篇文章主要介紹了jQuery基于ajax方式實(shí)現(xiàn)用戶名存在性檢查功能,結(jié)合實(shí)例形式分析了jQuery前臺(tái)ajax交互及后臺(tái)C#驗(yàn)證操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-02-02
jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果，大家無需輸入完全部郵箱信息，感興趣的小伙伴們可以參考一下2015-11-11
jquery提示效果有很多，本文也提供一個(gè)超漂亮的仿騰訊彈出層效果，熱愛特效的你可千萬不要錯(cuò)過了啊，希望本文提供的案例對(duì)你學(xué)習(xí)jquery特效有所幫助2013-02-02
這篇文章主要介紹了jQuery入門之層次選擇器用法,以簡單實(shí)例形式分析了jQuery層次選擇器中ancestor descendant與parent>child的區(qū)別,需要的朋友可以參考下2015-12-12
如果你還在猶豫是否要學(xué)習(xí)一個(gè)JavaScript框架，并困惑于選擇哪一個(gè)框架，那么我推薦你選擇jQuery。這并非說其它框架不好，只是jQuery可能是最穩(wěn)妥和最具回報(bào)性的選擇。2011-04-04
jQuery結(jié)合Json提交數(shù)據(jù)到Webservice，并接收從Webservice返回的Json數(shù)據(jù)
簡單的Json數(shù)據(jù)提交,后臺(tái)結(jié)合asp.net，需要的朋友可以參考下。2011-02-02
jQuery實(shí)現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果,涉及jQuery針對(duì)table元素遍歷、運(yùn)算、樣式及鼠標(biāo)事件動(dòng)態(tài)響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
使用jquery組件qrcode生成二維碼及應(yīng)用指南
這篇文章主要介紹了使用jquery組件qrcode生成二維碼及應(yīng)用指南,非常全面實(shí)用，需要的朋友可以參考下2015-02-02
用jQuery簡化Ajax開發(fā)實(shí)現(xiàn)方法
使用 jQuery 將使 Ajax 變得及其簡單。jQuery 提供有一些函數(shù)，可以使簡單的工作變得更加簡單，復(fù)雜的工作變得不再復(fù)雜。2010-04-04
jQuery UI結(jié)合Ajax創(chuàng)建可定制的Web界面
這篇文章主要為大家詳細(xì)介紹了jQuery UI結(jié)合Ajax創(chuàng)建可定制的Web界面，如何利用Ajax和jQuery UI創(chuàng)建具有各種定制功能的高度可定制的UI，感興趣的小伙伴們可以參考一下2016-06-06