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

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠