Request

Class: Request

一个XMLHttpRequest封装。

语法:

var myRequest = new Request([options]);

参数:

1. options - (object, optional)见下文。

选项:

• url - (string: defaults to null) 请求的URL(也可以是URI的一个实例)
• data - (mixed: defaults to '') 请求的数据,可以是元素,对象或字符串.(注:对象使用Object:toQueryString,转成字符串,元素使用Element:toQueryString转成字符串)
• format - (string: defaults to '') 此参数将被追加到data参数中,如'＆format=json'
• link - (string: defaults to 'ignore') 可以是"ignore"，"cancel"和"chain"。
  • 'ignore'-当请求正在进行时,新增请求将被乎略.
  • 'cancel'-当请求正在进行时,新增请求出现,当前正在进行的请求将立刻结束,新请求立即执行.
  • 'chain'-当请求正在进行时,新增请求将被追加到请求链,请求将按链表中的顺序依次执行.
• method - (string: defaults to 'post') 请求的方法，可以是'post'或'get' 。
• emulation - (boolean: defaults to true) 如果设置为true,'post'和'get'之外的方法将被追加到post请求体,并命名为:'_method'
• async - (boolean: defaults to true) 异步请求,如果设置成fasle,将执行同步请求,浏览器将被挂起,直到完成当前请求。
• timeout - (integer: defaults to 0) 与Timeout事件同时使用,连接超时时执行Timeout事件.
• headers - (object) 设置请求头。
• urlEncoded - (boolean: defaults to true) 如果设置为true，则Content-Type头被设置为www-form-urlencoded + encoding
• encoding - (string: defaults to 'utf-8') 在请求头设置编码。
• noCache - (boolean; defaults to false) 如果为true,url将追加一个唯一字符串,以防止请求缓存,服务器会乎略唯一字符串(IE浏览器有个不好行为,默认缓存,包括脚本,此属性在设置验证码时必不可少).
• isSuccess - (function) 覆盖内置的isSuccess函数。
• evalScripts - (boolean: defaults to false) 如果设置为true，响应里面的script标签内脚本将被执行。
• evalResponse - (boolean: defaults to false) 如果设置为true,整个响应都会被执行。
• user - (string: defaults to null) 在http头设置用户名
• password - (string: defaults to null) 设置http头设置密码

Events:

request

触发当请求被发送.

Signature:

onRequest()

loadstart

触发当请求加载时.(浏览器支持有限,当前Gecko和WebKit)。

Signature:

onLoadstart(event, xhr)

参数:

1. event - (Event) loadstart事件。
2. xhr - (XMLHttpRequest) XMLHttpRequest实例。

progress

触发当请求正在进行如正在上传或下载(浏览器支持有限,当前Gecko和WebKit)。

Signature:

onProgress(event, xhr)

参数:

1. event - (Event) 请求进展情况,包括当前下载的字节数和总字节数。
2. xhr - (XMLHttpRequest) XMLHttpRequest实例。

例如:

var myRequest = new Request({
    url: 'image.jpg',
    onProgress: function(event, xhr){
        var loaded = event.loaded, total = event.total;
 
        console.log(parseInt(loaded / total * 100, 10));
    }
});
 
myRequest.send();

complete

当请求完成时触发.

Signature:

onComplete()

cancel

当请求取消时触发.

Signature:

onCancel()

success

当请求成功时触发.

Signature:

onSuccess(responseText, responseXML)

参数:

1. responseText - (string) 从请求返回的文本。
2. responseXML - (mixed) 从请求返回的文本。

failure

当请求失败触发.

Signature:

onFailure(xhr)

参数:

1. xhr - (XMLHttpRequest) XMLHttpRequest实例。

exception

当请求头失败时触发.

Signature:

onException(headerName, value)

参数:

1. headerName - (string) 失败的请求头名。
2. value - (string) 失败的没表示头值。

属性:

• response - (object) 对象('text'和'XML'作链名)。可以访问此属性在'success'事件。

返回:

• (object) 一个新的Request实例。

例如:

var myRequest = new Request({method: 'get', url: 'requestHandler.php'});
myRequest.send('name=john&lastname=dorian');

timeout

超时时触发.

Signature:

onTimeout()

例如:

var myElement = document.id('myElement');
 
var myRequest = new Request({
    url: 'getMyText.php',
    method: 'get',
    onRequest: function(){
        myElement.set('text', 'loading...');
    },
    onSuccess: function(responseText){
        myElement.set('text', responseText);
    },
    onFailure: function(){
        myElement.set('text', 'Sorry, your request failed :(');
    }
});
 
document.id('myLink').addEvent('click', function(event){
    event.stop();
    myRequest.send('userid=' + this.get('data-userid'));
});

Request Method: setHeader

添加或修改请求头。它不会从options覆盖头。

语法:

myRequest.setHeader(name, value);

参数:

1. name - (string) 属性名。
2. value - (string) 属性值。

返回:

• (object) 当前Request实例。

例如:

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');

Request Method: getHeader

返回响应头,如果没有返回null.

语法:

myRequest.getHeader(name);

参数:

1. name - (string) 要取得的属性名。

返回:

• (string) 属性的值。
• (null) 如果没有找到。

例如:

var myRequest = new Request({url: 'getData.php', method: 'get', onSuccess: function(responseText, responseXML){
    alert(this.getHeader('Date')); // alerts the server date (for example, 'Thu, 26 Feb 2009 20:26:06 GMT')
}});

Request Method: send

打开请求连接，并发送请求的数据。

语法:

myRequest.send([options]);

参数:

1. options - (object, optional) 要发送的数据，出于兼容性考虑,也可以是一个查询字符串。

返回:

• (object)当前Request实例。

示例:

var myRequest = new Request({
    url: 'http://localhost/some_url'
}).send('save=username&name=John');

Request Methods: send aliases

Mootools提几个别名为Request:send为了更方便的使用一些方法.

这些别名有:

• post() and POST()
• get() and GET()
• put() and PUT()
• delete() and DELETE()

语法:

myRequest.post([data]);

参数:

1. data - (string, optional) 请求的数据。

返回:

• (object) 当前Request实例。

示例:

var myRequest = new Request({url: 'http://localhost/some_url'});
 
myRequest.post('save=username&name=John');
//...is equivalent to:
myRequest.send({
    method: 'post',
    data: 'save=username&name=John'
});
 
myRequest.get('save=username&name=John');
//...is equivalent to:
myRequest.send({
    method: 'get',
    data: 'save=username&name=John'
});

注意:

默认情况下，emulation选项设置为true ，所以put和delete发送方法是模拟的，实际发送的为post方法，而方法名被作为_method的值传递,如:_method =delete。

异步和超时选项是互斥的。如果异步设置为true ，那么就没有必要设置超时时间，因为服务器和浏览器将设置自己的超时返回执行脚本的其余部分。

Request Method: cancel

取消当前运行的请求。

语法:

myRequest.cancel();

返回:

• (object) 当前Request实例。

例如:

var myRequest = new Request({url: 'mypage.html', method: 'get'}).send('some=data');
myRequest.cancel();

Request Method: isRunning

如果请求正在运行，则返回true

语法:

myRequest.isRunning()

返回:

• (boolean) True如果请求正在执行.

例如:

var myRequest = new Request({url: 'mypage.html', method: 'get'}).send('some=data');
 
if (myRequest.isRunning()) // It runs!

Object: Element.Properties

Element Property: send

Setter

设置一个元素默认的Request实例。在处理form表单时很有用。

语法:

el.set('send'[, options]);

参数:

1. options - (object) 请求的选项。

返回:

• (element)当前元素。

例如:

myForm.set('send', {url: 'contact.php', method: 'get'});
myForm.send(); //Sends the form.

Getter

返回先前设置的Request实例(一个新的请求与默认选项)。

语法:

el.get('send');

参数:

1. 财产 - (string) Request属性参数。

返回:

• (object) 请求实例。

例如:

el.set('send', {method: 'get'});
el.send();
el.get('send'); // returns the Request instance.

Type: Element

自定义类型,它的所有的方法允许$函数生成的元素使用.

Element Method: send

发送一个form表单,或一个包含input标签的元素.

语法:

myElement.send(url);

参数:

1. url - (string, optional) 要请求的url,如果元素是form表单时,url可省略。

返回:

• (element) 当前元素。

例如:

HTML

<form id="myForm" action="submit.php">
    <p>
        <input name="email" value="bob@bob.com" />
        <input name="zipCode" value="90210" />
    </p>
</form>

Javascript

$('myForm').send();

注意:

当元素为form表单时,url从form表单的action中提取。