An XMLHttpRequest Wrapper.

Chain, Class.Thenable, Events, Options

var myRequest = new Request([options]);

1. options - (object, optional) See below.

• url - (string: defaults to null) The URL to request. (Note, this can also be an instance of URI)
• data - (mixed: defaults to '') The default data for Request:send, used when no data is given. Can be an Element, Object or String. If an Object is passed the Object:toQueryString method will be used to convert the object to a string. If an Element is passed the Element:toQueryString method will be used to convert the Element to a string.
• format - (string: defaults to '') If passed, an additional key 'format' will be appended to 'data' with the passed value. e.g. '&format=json'
• link - (string: defaults to 'ignore') Can be 'ignore', 'cancel' and 'chain'.
  • 'ignore' - Any calls made to start while the request is running will be ignored. (Synonymous with 'wait': true from 1.11)
  • 'cancel' - Any calls made to start while the request is running will take precedence over the currently running request. The new request will start immediately, canceling the one that is currently running. (Synonymous with 'wait': false from 1.11)
  • 'chain' - Any calls made to start while the request is running will be chained up, and will take place as soon as the current request has finished, one after another. Take care when using "chain" in combination with Request's thenable properties.
• method - (string: defaults to 'post') The HTTP method for the request, can be either 'post' or 'get'.
• emulation - (boolean: defaults to true) If set to true, other methods than 'post' or 'get' are appended as post-data named '_method' (as used in rails)
• async - (boolean: defaults to true) If set to false, the requests will be synchronous and freeze the browser during request.
• timeout - (integer: defaults to 0) In conjunction with 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.)
• headers - (object) An object to use in order to set the request headers.
• urlEncoded - (boolean: defaults to true) If set to true, the content-type header is set to www-form-urlencoded + encoding
• encoding - (string: defaults to 'utf-8') The encoding to be set in the request header.
• noCache - (boolean; defaults to false) If true, appends a unique noCache value to the request to prevent caching. (IE and iOS 6 have a bad habit of caching ajax request values. Including this script and setting the noCache value to true will prevent it from caching. The server should ignore the noCache value.)
• isSuccess - (function) Overrides the built-in isSuccess function.
• evalScripts - (boolean: defaults to false) If set to true, script tags inside the response will be evaluated.
• evalResponse - (boolean: defaults to false) If set to true, the entire response will be evaluated. Responses with javascript content-type will be evaluated automatically.
• user - (string: defaults to null) The username to use for http basic authentication.
• password - (string: defaults to null) You can use this option together with the 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 carefully
• withCredentials - (boolean: defaults to false) If set to true, xhr.withCredentials will be set to true allowing cookies/auth to be passed for cross origin requests

Request 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.

onRequest()

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).

onLoadstart(event, xhr)

1. event - (Event) The loadstart event.
2. xhr - (XMLHttpRequest) The transport instance.

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).

onProgress(event, xhr)

1. event - (Event) The progress event, containing currently downloaded bytes and total bytes.
2. xhr - (XMLHttpRequest) The transport instance.

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

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

• MDN: nsIDOMProgressEvent

Fired when the Request is completed.

onComplete()

Fired when a request has been cancelled.

onCancel()

Fired when the Request is completed successfully.

onSuccess(responseText, responseXML)

1. responseText - (string) The returned text from the request.
2. responseXML - (mixed) The response XML from the request.

Fired when the request failed (error status code).

onFailure(xhr)

xhr - (XMLHttpRequest) The transport instance.

Fired when setting a request header fails.

onException(headerName, value)

1. headerName - (string) The name of the failing header.
2. value - (string) The value of the failing header.

• response - (object) Object with text and XML as keys. You can access this property in the 'success' event.

• (object) A new Request instance.

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

• Wikipedia: XMLHttpRequest

Fired when a request doesn't change state for options.timeout milliseconds.

onTimeout()

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.

myRequest.setHeader(name, value);

1. name - (string) The name for the header.
2. value - (string) The value to be assigned.

• (object) This Request instance.

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.

myRequest.getHeader(name);

1. name - (string) The name of the header to retrieve the value of.

• (string) The value of the retrieved header.
• (null) null if the header is not found.

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

Opens the Request connection and sends the provided data with the specified options.

myRequest.send([options]);

1. options - (object, optional) The options for the sent Request. Will also accept data as a query string for compatibility reasons.

• (object) This Request instance.

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

1. data - (string, optional) Equivalent with the data option of Request.

• (object) This Request instance.

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

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.

myRequest.cancel();

• (object) This Request instance.

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

Returns true if the request is currently running

myRequest.isRunning()

• (boolean) True if the request is running

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

if (myRequest.isRunning()) // It runs!

see Element.Properties

Sets a default Request instance for an Element. This is useful when handling forms.

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

1. options - (object) The Request options.

• (element) The original element.

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

Returns the previously set Request instance (or a new one with default options).

el.get('send');

1. property - (string) the Request property argument.

• (object) The Request instance.

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

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.

myElement.send(url);

1. url - (string, optional) The url you want to send the form or the "container of inputs" to. If url is omitted, the action of the form will be used. url cannot be omitted for "container of inputs".

• (element) This Element.

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

$('myForm').send();

• The URL is taken from the action attribute of the form.