zoukankan      html  css  js  c++  java
  • 无聊的AJAX嵌套(首页太神圣,还是蹂躏下新手区)

       标题不过是搞笑 呵呵

       最近时间稍微空一点,每天任务不是很重,在园子里翻来看去,学习学习:),也想看看jquery,之前一直用的prototype,prototype.js的开发文档也从来没看过,用得最多的就是$("id")这个东西和异步调用玩下,前天在园子里看到一个prototype.js1.4.0的开发手册,从头到尾看了一下,有些很方便的东西可以直接用,尤其有些常用方法,直接调用就好了,也不用再单独写了,下了一个prototype.js1.6.0的,之前一直用的是prototype.js1.4.0(被改写过,主要配合httprequest.js方便异步的调用)看了文档里提到的异步调用,和我以前用的方式也不太一样,最终原理当然是一样的了,下面主要说下文档里Ajax.Updater的调用。

    在web里实现异步效果,一般都加了一个中转页面,当前页面后台没有什么事件之类的

      var myAjax = new Ajax.Updater(
                'msg',//如果不需要标签,保留两个个单引号即可
                //{success: 'msg'}, //与onFailure配用
                url,
                {
                    method: 'post',
                    parameters: pars,
                    onLoading : loading,
                    onComplete : complete//不与onFailure并用
                    //onFailure : reportError
                   
                });

    prototype.js 1.4.0版本里实现局部刷新,上面那么调用就可以了(prototype.js 1.6.0同样适用),上面的msg是一个div标签,异步调用后Respose.Write()输出的结果就会显示在此div标签里,如果不想传入标签(可以传一个空串,即一对引号),想在异步调用完后再赋值也是可以的,下面这样

      function complete(request)
                    {
                        $('msg').innerHTML = request.responseText;
                        $('tip').innerHTML = "<img border=\"0\" src=\"images/ajaxico_confirm.gif\">统计完成......";
                    }

    很多时候用异步效果,都喜欢在加载(loading)时,能有个齿轮图片在转动,其实我也喜欢,呵呵,单一的一个中转页面的调用,可以提示正在加载数据。。。,加载完成两种状态,本身prototype.js里面页面请求的状态定了有好几种,具体可以看下源码,比较常用的一般是onLoading(加载时),onComplete(加载完成,执行成功),onFailure(加载失败,程序出现异常),就提示效果而言onComplete和onFailure在异步调用时不会同时提示,如果调用时程序发生异常,提示的还是onComplete里的消息,如下面

     var myAjax = new Ajax.Updater(
                'msg',//如果不需要标签,保留两个个单引号即可
                //{success: 'msg'}, //与onFailure配用
                url,
                {
                    method: 'post',
                    parameters: pars,
                    onLoading : loading,

                    onFailure : reportError,
                    onComplete : complete//不与onFailure并用
                    
                    
                });
     

    如果程序抛出异常,并不会执行reportError方法,仍然是执行complete方法,也就是说加了success属性后只与onFailure配用,现在说下所谓的嵌套调用,之所有想用“异步嵌套”,有时候是想多几部提示效果,点一个按钮,从数据库里抽取数据进行统计,统计完后还要生成报表文件下载(可能需要提示正在查询数据。。。,正在读写文件。。。,读写完成等提示最后弹出文件下载提示框),整个过程要想达到无刷新的效果,这么来个嵌套还是可以的,像下面调用

    建一个default.aspx页面

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        
    <title>无标题页</title>
        
    <script type="text/javascript" src="js/prototype.js"></script>
        
    <script type="text/javascript">
            function getHTML()
            {
                var url 
    = 'WebForm1.aspx';
                var pars 
    = 'name=peace';

                var myAjax 
    = new Ajax.Updater(
                
    'msg',//如果不需要标签,保留两个个单引号即可
                
    //{success: 'msg'}, //与onFailure配用
                url,
                {
                    method: 
    'post',
                    parameters: pars,
                    onLoading : loading,
                    onComplete : complete
                    
    //onFailure : reportError
                    
                });
                
                function loading(request)
                {
                    $(
    'msg').innerHTML = "";
                    $(
    'tip').innerHTML = "<img border=\"0\" src=\"images/ajaxloading.gif\">正在抽取";    
                }
                 function complete(request)
                {
                    
    //alert(request.responseText);也可以通过返回值进行判断加载出差或完成
                    $('msg').innerHTML = request.responseText;// 如果updater方法中不想传入标签时,这里也可以给标签赋值
                    
                    
    //$('tip').innerHTML = "抽取完成";
                    
    //setTimeOut("Delay()",2000); 
                         var url = 'WebForm2.aspx';
                         
    //var pars = 'name=peace';
                         var myinnerAjax = new Ajax.Updater(
                        
    '',
                        url,
                        {
                            method: 
    'post',
                            parameters: 
    null,//pars,如果没有参数,可以给一个空值
                            onLoading : loading2,
                            onComplete : complete2 
                    });
                    
                    
                     function loading2(request)
                    {
                        $(
    'tip').innerHTML = "<img border=\"0\" src=\"images/zoho-busy.gif\">正在统计";
                    }
                     function complete2(request)
                    {
                        $(
    'msg').innerHTML = request.responseText;
                        $(
    'tip').innerHTML = "<img border=\"0\" src=\"images/ajaxico_confirm.gif\">统计完成";
                    }
                 
                }
                function success(request)
                {
                    $(
    'msg').innerHTML = "成功执行";
                }
                function reportError(request)
                {
                    $(
    'tip').innerHTML = "<img border=\"0\" src=\"images/ajaxico_error.gif\">抽取数据发生错误";
                }
                

            }

    </script>

    </head>
    <body>
        
    <form id="form1" runat="server">
        
    <input type="button" value="测试" onclick="getHTML()" />
        
    <div id="msg">
        
        
    </div>
         
    <div id="tip">
        
        
    </div>
        
    </form>
    </body>
    </html>

     prototype.js1.4--1.6的都可以

    webForm1.aspx.cs 里是这样的

     public partial class WebForm1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                System.Threading.Thread.Sleep(2000);
                if (Request["name"] == "peace")
                {
                    Response.Write("peace");
                    Response.End();
                }
                else
                {
                    Response.Write("hello");
                    Response.End();
                }
            }
        }

    webForm2.aspx.cs里是这样的

     public partial class WebForm2 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                System.Threading.Thread.Sleep(2000);
                Response.Write("peaceli");
                Response.End();
            }
        }

    上面的两个页面相当于加了一个延时时间,当然实际的应用中可以不用,时间执行多长时间就是多长时间,点击测试按钮的效果如下

     

    上面就是整个无刷新的提示过程,但是还是有一点不尽如人意,上面贴出的有两句被注释掉了,就是在第一次异步调用完成后的complete方法里

    $('tip').innerHTML = "抽取完成......";
    setTimeOut("Delay()",2000);

    原本想有四个提示的,写了个空的Delay()方法 主要是想在此停顿2秒,再提示下面两个,可惜不行,主要是因为异步调用相当与线程调用一样,并不会像想象的那样去顺序执行顺序提示,不过我之前的有写过一篇随笔,那里面是可以有四个提示的,那里面我调用的方法不一样,并不只用了prototype.js一个文件,想看的可去看下,那里有下载的demo,地址是 文章链接,完了,放到新手区忽悠下,上面只是个人看法。

    该小demo下载地址 

  • 相关阅读:
    CodeForces Gym 100935G Board Game DFS
    CodeForces 493D Vasya and Chess 简单博弈
    CodeForces Gym 100935D Enormous Carpet 快速幂取模
    CodeForces Gym 100935E Pairs
    CodeForces Gym 100935C OCR (水
    CodeForces Gym 100935B Weird Cryptography
    HDU-敌兵布阵
    HDU-Minimum Inversion Number(最小逆序数)
    七月馒头
    非常可乐
  • 原文地址:https://www.cnblogs.com/peaceli/p/1351247.html
Copyright © 2011-2022 走看看