一周學會Mootools 1.4中文教程:(5)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)討論吧,注意:加群的時候要說明你從哪個網站來到.

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈