关于html+ashx开发中几个问题的解决方法


Posted in Javascript onJuly 18, 2011

问题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() 


{ 



int id = int.Parse(req("id")); 



string title = req("title"); 



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:数据模板。

真是什么东西需要,什么都东西就应运而生!在写这个随笔之前正好在园里看到了个jquery.tmpl的文章!tmpl的产生也正是解决这个问题的!我很自知这个方法没tmpl强大,但tmpl有一个问题没有解决,其实模板有两个主要的问题,1是如果模板存储在js里不好编辑,2是要把模板存储在哪里才方便设计时的视图呢!tmpl把模板存储在<script type="text/x-jquery-tmpl"></script>标签中,应该说是解决了第一个问题,但我感觉第2个问题也是很重要的!想来想去,只能把模板直接存储在数据的容器标记里:

<ul id="ulList"> 
<li><a href="somepage.html?id={ID}">{Title}</a><br /> 
{Content}</li> 
</ul>

把模板直接写在目标容器里,就像一条数据一样,美工调样式不是问题,程序加方法不是问题,这方法我看行!但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); 
})

在填充数据的时候用了string.format这个方法,它在我js中的string.format 随笔里有记录,呵呵,这个我也没有想到,写format的时候让它支持json对象只是为了阅读方便,然而用到这如此合适!到这的时候我已兴奋不已了,测试结果如下:

关于html+ashx开发中几个问题的解决方法

但当我加了事件后,我发现还不够好。如果在模板li里加上onclick="show({ID},'{Title}')",IE里刚打开页面的时候就会有js错误,这是为什么呢?问题在这个ID参数上,因为{ID}被看作json对象了,而它却是一个格式不对的json! 提示js错误也正常,'{Title}'没有错误是原因这里看作字符串参数了。这个js错误虽然不影响程序,但没有人不喜欢自己写的代码是没有js错误的! 解决方法很简单,像Title参数一样加引号就可以了,如果show方法里真的要数字类型,只好在那里转换一下喽!不过你肯定会发现,很多时候是不用转换的,甚至你还希望它就是个字符串类型呢!

从没有这么认真的写过随笔,三个星期就休息了这一下午,没陪女朋友,没睡大觉,没找朋友喝酒,却老老实实地把它完成了!

Javascript 相关文章推荐
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 #Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 #Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 #Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 #Javascript
js下将字符串当函数执行的方法
Jul 13 #Javascript
JS高级笔记
Jul 13 #Javascript
JS继承 笔记
Jul 13 #Javascript
You might like
CI框架中zip类应用示例
2014/06/17 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
python实现爬取千万淘宝商品的方法
2015/06/30 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
CSS3 实现的加载动画
2020/12/07 HTML / CSS
浅谈html5 响应式布局
2014/12/24 HTML / CSS
高一自我鉴定
2013/12/17 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
租房协议书
2014/04/10 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年纪检工作总结
2014/11/12 职场文书
工作态度不好检讨书
2015/05/06 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL