日期:2014-05-16  浏览次数:20973 次

CS Coder学习asp.net5个月的最大感悟:从http的角度重新认识asp.net(二)——我理解的ajax(一)

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&