一周学会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)讨论吧,注意:加群的时候要说明你从哪个网站来到.

相关课程:
一周学会Mootools 1.4中文教程:序论
一周学会Mootools 1.4中文教程:(1)Dom选择器
一周学会Mootools 1.4中文教程:(2)函数
一周学会Mootools 1.4中文教程:(3)事件
一周学会Mootools 1.4中文教程:(4)类型
一周学会Mootools 1.4中文教程:(5)Ajax
一周学会Mootools 1.4中文教程:(6)动画
一周学会Mootools 1.4中文教程:(7)汇总收尾

其他关于Mootools 1.4的文章:
我写的Lightbox效果插件，基于MooTools 1.4
我写的万年历插件(含天干地支,农历,阳历,节气,各种节假日等)，基于MooTools 1.4
我写的类似本站首页左上角的菜单的效果插件，基于MooTools 1.4
Mootools中delay这个延迟函数的高级用法
Mootools中使用bind给函数绑定对象
Mootools中使用extend和implement给你的函数扩展功能或方法
自己写个扩展把Mootools的语法改的和Jquery的语法一模一样
Mootools1.4中自定义事件
用Mootools1.4写了一个随着鼠标移动而背景图也跟着移动的东西