An XMLHttpRequest Wrapper.
Implements:Chain, Class.Thenable, Events, Options
Syntax:var myRequest = new Request([options]);
Arguments:
onTimeout
event, it determines the amount of milliseconds before considering a connection timed out. (It's suggested to not use timeout with big files and only when knowing what's expected.)script
tags inside the response will be evaluated.user
option to set authentication credentials when necessary. Note that the password will be passed as plain text and is therefore readable by anyone through the source code. It is therefore encouraged to use this option carefullyRequest implements Class.Thenable
to make a Request instance "thenable", i.e. myRequest.send().then(function(response){ console.log(response.text); });
. See Class.Thenable for more information.
Fired when the Request is sent.
Signature:onRequest()
loadstart
Fired when the Request loaded, right before any progress starts. (This is limited to Browsers that support the event. At this time: Gecko and WebKit).
Signature:onLoadstart(event, xhr)
Arguments:
Fired when the Request is making progresses in the download or upload. (This is limited to Browsers that support the event. At this time: Gecko and WebKit).
Signature:onProgress(event, xhr)
Arguments:
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();
Cross-Origin Resource Sharing (CORS) note:
The Request class will (by default) add a custom header that, if used for a cross-origin request, will have to be reported as allowed in the preflight request, in addition to any other headers you may set yourself:
Access-Control-Allow-Headers: X-Requested-With
See Also:
complete
Fired when the Request is completed.
Signature:onComplete()
cancel
Fired when a request has been cancelled.
Signature:onCancel()
success
Fired when the Request is completed successfully.
Signature:onSuccess(responseText, responseXML)
Arguments:
Fired when the request failed (error status code).
Signature:onFailure(xhr)
Arguments:
xhr - (XMLHttpRequest) The transport instance.
exceptionFired when setting a request header fails.
Signature:onException(headerName, value)
Arguments:
var myRequest = new Request({method: 'get', url: 'requestHandler.php'});
myRequest.send('name=john&lastname=dorian');
See Also:
timeout
Fired when a request doesn't change state for options.timeout
milliseconds.
onTimeout()
Example:
This example fetches some text with Request. When the user clicks the link, the returned text by the server is used to update the element's text. It uses the onRequest
, onSuccess
and onFailure
events to inform the user about the current state of the request. The method
option is set to get
because we get some text instead of posting it to the server. It gets the data-userid attribute of the clicked link, which will be used for the querystring.
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'));
});
Add or modify a header for the request. It will not override headers from the options.
Syntax:myRequest.setHeader(name, value);
Arguments:
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');
Returns the given response header or null if not found.
Syntax:myRequest.getHeader(name);
Arguments:
null
if the header is not found.var myRequest = new Request({url: 'getData.php', method: 'get', onSuccess: function(responseText, responseXML){
alert(this.getHeader('Date'));
}});
Opens the Request connection and sends the provided data with the specified options.
Syntax:myRequest.send([options]);
Arguments:
var myRequest = new Request({
url: 'http://localhost/some_url'
}).send('save=username&name=John');
MooTools provides several aliases for Request:send to make it easier to use different methods.
These aliases are:
post()
and POST()
get()
and GET()
put()
and PUT()
delete()
and DELETE()
patch()
and PATCH()
head()
and HEAD()
myRequest.post([data]);
Arguments:
data
option of Request.var myRequest = new Request({url: 'http://localhost/some_url'});
myRequest.post('save=username&name=John');
myRequest.send({
method: 'post',
data: 'save=username&name=John'
});
myRequest.get('save=username&name=John');
myRequest.send({
method: 'get',
data: 'save=username&name=John'
});
Note:
By default the emulation option is set to true, so the put, delete and patch send methods are emulated and will actually send as post while the method name is sent as e.g. _method=delete
.
Async
and timeout
options are mutually exclusive. If you set async
to false
, then there's no need to set the timeout
since the server and browser will set their own timeouts to return executing the rest of your script.
Cancels the currently running request, if any.
Syntax:myRequest.cancel();
Returns:
var myRequest = new Request({url: 'mypage.html', method: 'get'}).send('some=data');
myRequest.cancel();
Returns true if the request is currently running
Syntax:myRequest.isRunning()
Returns:
var myRequest = new Request({url: 'mypage.html', method: 'get'}).send('some=data');
if (myRequest.isRunning())
Setter
Sets a default Request instance for an Element. This is useful when handling forms.
Syntax:el.set('send'[, options]);
Arguments:
myForm.set('send', {url: 'contact.php', method: 'get'});
myForm.send();
Getter
Returns the previously set Request instance (or a new one with default options).
Syntax:el.get('send');
Arguments:
el.set('send', {method: 'get'});
el.send();
el.get('send');
Custom Type to allow all of its methods to be used with any DOM element via the dollar function $.
Sends a form or a container of inputs with an HTML request.
Syntax:myElement.send(url);
Arguments:
<form id="myForm" action="submit.php">
<p>
<input name="email" value="bob@bob.com" />
<input name="zipCode" value="90210" />
</p>
</form>
JavaScript
$('myForm').send();
Note:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4