一周學會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寫了一個隨著滑鼠移動而背景圖也跟著移動的東西