在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
ajax相信大家都用过,随着现在web站的要求越来越高,ajax毫无疑问是bs开发中最常用的必备技能之一。 但很多人觉得ajax这东西理解起来很难,用起来不顺畅,容易出现“莫名其妙”的问题,难以掌控。更有甚者,觉得ajax是很牛逼的技术。同时,市面上也有很多ajax控件,比较有代表性的是两个,微软的updatepanel和ajaxpro。这里我不讲他们的用法,就试图从bs本质和http角度去解读一下它们。 首先,我得说明下,我对这两个控件,仅仅只是“用过”的层次,掌握的并不深,比如updatepanel,有很多很灵活的用法,我都见过,但没有去使用和深究。没有调查就没有发言权,我这篇文,也绝不是抨击这两个控件怎么怎么不好,虽然我确实是在使用过程中遇到过一些问题,最后是小组讨论,决定统一用jquery ajax。但我仍然认为它们是很好的东西,我这篇文,只是去解释下它们大致是个什么东西,是怎么运作的。这样大家以后用起来,可能会多一点思路。 然后,照例得声明下,接触asp.net的时间毕竟不长,文章还是写的比较浅显的,大神看了别笑,有错误还请指出,不胜感激。说这个声明,其实不是我谦虚,而是随着我现在了解的越多,真心的感觉自己还有太多的不足甚至是无知,比如mvc,看了一些资料,好像是回归了form和http的传统bs模式,更灵活的(业务)——(展示)的映射,更丰富和自由的交互,我现在对mvc的兴趣相当大,无奈项目使用的asp.net,可以预见的是,好长一段时间,都只能自己私下摸索而不能在实战中体验一把。而且也是项目关系,现在学习wf的优先级是最高的,还有orm(ef,automapper)wcf,ddd,xp等也都很感兴趣。 回到正题,我们先来说说updatepanel,具体用法不多谈了,网上一搜一大堆,比如下面这个简单的demo,updatepanel部分是我才百度出来的,我加了点修改和与jquery ajax的比较。 前端代码 <body> <form id="form1" runat="server"> <div> <asp:ScriptManager runat="server" ID="sm1"></asp:ScriptManager> <asp:Button runat="server" ID="btnNoRefresh" Text="事件回发NoRefresh" OnClick="PostChange" /> <asp:Button runat="server" ID="btnPost" Text="事件回发Post" OnClick="PostChange" /> <br /> <input type="button" id="btnClentPost" value="ajax提交" /> <input type="submit" id="btnSubmit" name="ClientSubmit" value="表单提交" /> <br /> <asp:UpdatePanel runat="server"> <ContentTemplate> <asp:Label runat="server" ID="lblReault" Width="700"></asp:Label> <asp:Label runat="server" ID="lblRequestCount"></asp:Label> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnNoRefresh" /> <asp:PostBackTrigger ControlID="btnPost" /> </Triggers> </asp:UpdatePanel> </div> </form> </body> <script type="text/javascript"> $(document).ready(function () { $("#btnClentPost").click(function () { $.ajax({ type: "POST", data: "act=updateResult&cmsg=append from ajax", success: function (msg) { $("#lblReault").html("this is from ajax server:" + msg); } }); }); }); </script> 后台: protected void Page_Load(object sender, EventArgs e) { string action = Request["act"]; if (!string.IsNullOrEmpty(action)) { switch (action.ToLower()) { case "updateresult": ShowAjaxChange(Request["cmsg"]); break; case "getsectionpoint": break; } } //注意,ajax的处理放在上面,如果上面发生了 Response.End(); 下面的代码是不会执行的 if (!IsPostBack) //页面第一次刷新(也不一定是哦) { lblReault.Text = "this is from Page_Load" + " Time : " + DateTime.Now.ToString("HH:mm:ss fff"); } if (!string.IsNullOrEmpty(Request["ClientSubmit"]))//说明提交者是name="ClientSubmit"的btn { var value = Request["ClientSubmit"]; lblReault.Text = "this is from ClientSubmit and value is " + value + " Time : " + DateTime.Now.ToString("HH:mm:ss fff"); } //睡眠2秒,同时全局page_load执行次数加1(虽然叫RequestCount 但可不一定就是请求次数) Thread.Sleep(2000); int requestCount = ParseInt(Application["RequestCount"]) ; Application["RequestCount"] = lblRequestCount.Text = (requestCount + 1).ToString(); } //接收ajax传递过来的数据,并通过Response 做出处理 private void ShowAjaxChange(string cMsg) { Response.Clear(); Response.Write("S receive : " +cMsg +" Time : "+ DateTime.Now.ToString("HH:mm:ss fff")); Response.End(); } protected void PostChange(object sender, EventArgs e) { lblReault.Text = "this is from PostChange" + " Time : " + DateTime.Now.ToString("HH:mm:ss fff"); } public static int ParseInt( object obj) { if (obj == null) { return 0; } else { return Convert.ToInt32(obj.ToString()); } } 在这个页面中,我使用了四种前后台交互的方法 依次是 使用UP无刷新,传统绑定按钮事件,ajax提交和表单提交 可以用f12开发者工具监视下http请求,看看各种方式回传时有什么异同。 我重点提几个现象, 1,普通事件回发,请求提交人是form,http返回的数据就是整个页面的html代码, 页面会刷新 会休眠2s RequestCount +1。 这无疑是最不优美的做法,不仅网络数据传输量大,还需要重新请求一次页面head中声明引用的文件,虽然大部分情况有缓存,但还是会有一定的性能损耗。 2事件回发 通过up的AsyncPostBackTrigger 提交 提交人是form,http返回被up包裹部分的html代码及一些参数信息(个人无责任猜测,是给ScriptManager准备的,然后ScriptManager通过js(运行在客户端)修改页面的html来完成信息无刷新显示), 页面不会刷新 会休眠2s RequestCount +1 3 jquery ajax提交 提交人就是它自己,不是表单(同时这个时候的ispostback是为false的,这也是我注释要说明的东西,ajax如果在后面处理,页面会认为是第一次加载,会执行if里面的逻辑了) 最后 就是本文的肉戏了,页面无刷新 不会休眠 RequestCount 不变。 查看http,返回的信息非常简单,就是response.write的信息, 同时大家可以做个试验,把休眠两秒的逻辑注释,然后狂点两种无刷新按钮,明显的,jquery方式的ajax流畅的多。 4,表单提交,如果在up里面和2一样 在外面和1一样。 嗯,相信以前没有意识到这种现象的小伙伴们,看到这里一定觉得很有意思, 有些小伙伴可能通过这种鲜明的对比,已经明白了他们的区别。 如果没明白了?不要紧, 那么接下来,我。。。 去睡觉了。 欲知后事如何,你懂得。 |
请发表评论