• 一周学会Mootools 1.4中文教程:(5)Ajax


      ajax在我们前台的开发中是非常重要的,所以我们单独拿出一节课来讲述,首先我们看一下mootools的ajax构成

    语法:
    var myRequest=new Request([参数]);


    参数:
    url - (string:默认是null) 要请求的URL.
    data - (string:默认是空) 默认要请求或发送的数据.
    link - (string:默认是'ignore') 可为'ignore','cancel','chain'.
    'ignore' - 当请求正在执行之中时,新的请求将被忽略
    'cancel' - 当请求正在执行之中时,将立即取消当前执行中的请求,开始执行新的请求
    'chain' - 当请求正在执行之中时,将会把新的请求链接在当前请求之后,依次执行所有请求
    method - (string:默认是'post') HTTP请求类型,可为'post' 或 'get'.
    emulation - (boolean:默认是true) 仿真,通常不用理会
    async - (boolean:默认是true) 异步,如果设为false,那么在请求数据的时候将会同步冻结浏览器请求,通常不用理会.
    timeout - (integer:默认是0) 超时时间
    headers - (object) 设置content-type头.
    urlEncoded - (boolean:默认是true) url编码,如果设为true,则content-type头将被设为www-form-urlencoded+encoding
    encoding - (string:默认是'utf-8') 数据的编码.
    noCache - (boolean;默认是false) 如果设为true,则不缓存
    isSuccess - (function) 请求结束之后的事件.
    evalScripts - (boolean:默认是false) 如果设为true,结果内的script会被执行
    evalResponse - (boolean:默认是false) 如果设为true,请求内容将会被执行.
    user - (string:默认是null) 如果设置了此项,那么请求的时候将会尝试认证.
    password - (string:默认是null) 和user搭配使用,设置此项的时候要填写密码而不是星号


    上边已经列出了所有的ajax参数,那么mootools为我们提供了哪些事件呢?我们来看一下:

    onRequest
    当请求被发送的时候触发.

    onLoadstart
    当请求已载入的时候触发,在其他所有进程之前.

    onProgress
    当请求正在建立上传或下载的进程时触发.

    onComplete
    当请求结束时触发.

    onCancel
    当请求被取消时触发.

    onSuccess
    当请求成功完成后触发.

    onFailure
    当请求失败时触发.

    onException
    当设置一个请求头失败时触发.

    onTimeout
    当超出了options.timeout所设置的毫秒数,却没有发生状态值的改变时触发.

    我们再来看一下他还有哪些额外的方法:

    setHeader
    添加或修改一个请求的头信息. 并不会重写options.
    示例:
    var myRequest=new Request({url:'getData.php',method:'get',headers:{'X-Request':'JSON'}});
    myRequest.setHeader('Last-Modified','Sat,1 Jan 2005 05:00:00 GMT');

    getHeader
    返回响应头,如果没有发现则为null.
    示例:
    var myRequest=new Request({url:'getData.php',method:'get',onSuccess:function(responseText,responseXML){
    alert(this.getHeader('Date'));//显示服务的数据 (如,'Thu,26 Feb 2009 20:26:06 GMT')
    }});

    send
    打开请求链接并发送在options里预设的数据
    示例:
    var myRequest=new Request({
    url:'http://localhost/some_url'
    }).send('save=username&name=John');

    cancel
    取消当前正运行的请求.
    示例:
    var myRequest=new Request({url:'mypage.html',method:'get'}).send('some=data');
    myRequest.cancel();

    isRunning
    如果当前请求正在运行则返回true
    示例:
    var myRequest=new Request({url:'mypage.html',method:'get'}).send('some=data');
    if(myRequest.isRunning()) //It runs!

      上面说了那么多还没进入正题,连个完整的例子都没出来,Mootools的ajax够强大,我喜欢,嘿嘿,好了我们马上进入正题给大家展示一个完整的ajax请求的例子:

        var myRequest=new Request({//建立Request对象
    url:'image.php',//要请求的地址
    onProgress:function(event,xhr){//建立进度显示在控制台内
    var loaded=event.loaded,total=event.total;
    console.log(parseInt(loaded / total * 100,10));
    }
    }).send();//用他的send方法发送

    //再来一个例子
    var myElement=$('myElement');//选节点
    var myRequest=new Request({//建立Request对象
    url:'getMyText.php',//要请求的地址
    method:'get',//get请求
         onTimeout:function(){//超时
    myElement.set('text','超时了');
    },
         onFailure:function(){//请求失败
    myElement.set('text','请求失败了');
    },
    onProgress:function(event,xhr){//建立进度显示在控制台内
    var loaded=event.loaded,total=event.total;
    console.log(parseInt(loaded / total * 100,10));
    },
    onRequest:function(){//当请求被发送时设置内容
    myElement.set('text','loading...');
    },
    onSuccess:function(responseText){//结束后重设内容
    myElement.set('text',responseText);
    },
    onFailure:function(){//失败时提示
    myElement.set('text','Sorry,your request failed:(');
    }
    });

    //$('myLink')点击时,触发ajax的send方法
    $('myLink').addEvent('click',function(event){
    event.stop();//终止掉$('myLink')的默认事件(假如是<a ..>防止超链接跑到别的页面上)
    myRequest.send('userid='+this.get('data-userid'));
    });


    看完了上边这个完整的示例之后有没有感觉Mootools的ajax很彪悍?还是你觉得他太复杂,没关系我再来个简洁型的,不管你有什么癖好都让你满意.

       var myHTMLRequest=new Request.HTML().get('myPage.html');
    var myHTMLRequest=new Request.HTML({url:'myPage.html'}).post('user_id=25&save=true');

    <div id="content">Loading content...</div>
    $('content').load('page_1.html');

    //从这个网址载入"load/?user_id=25".
    var myHTMLRequest=new Request.HTML({url:'load/'}).get({'user_id':25});

    Data from Element via POST:
    <form action="save/" method="post" id="user-form">
    <p>
    Search:<input type="text" name="search" />
    Search in description:<input type="checkbox" name="search_description" value="yes" />
    <input type="submit" />
    </p>
    </form>

    //这里是一个submit事件
    var myHTMLRequest=new Request.HTML({url:'save/'}).post($('user-form'));


    好了,这一课讲完了,有问题就进群(16648471)讨论吧,注意:加群的时候要说明你从哪个网站来到.

  • 相关阅读:
    20190922 模拟
    poj3417 Network/闇の連鎖[树上差分]
    poj3280 Cheapest Palindrome[区间DP]
    poj3691 DNA repair[DP+AC自动机]
    BZOJ1030 [JSOI2007]文本生成器[DP+AC自动机]
    loj2424 「NOIP2015」子串[字符串DP]
    poj1038 Bugs Integrated, Inc.[状压DP]
    第05组 Beta冲刺 (2/5)(组长)
    第05组 Beta冲刺 (1/5)(组长)
    第05组 Alpha冲刺 总结(组长)
  • 原文地址:https://www.cnblogs.com/GaoAnLee/p/5368794.html
走看看 - 开发者的网上家园