Ajax

Frontbx's Ajax Component allows you to easily handle Ajax calls in consistent and flexible manner.

• Access
• Methods
• Arguments
• Response
• Upload

Ajax can be accessed via Frontbx's container using the Ajax key.

let Ajax = frontbx.Ajax();

Methods

The post method posts an Ajax call with an object to a url.

Ajax.post(url, data, success, error, complete, abort, headers;

The get method calls a GET request to a given url.

Ajax.get(url, data, success, error, complete, abort, headers);

The head method calls a HEAD request to a given url.

Ajax.get(url, data, success, error, complete, abort, headers);

The put method calls a HEAD request to a given url.

Ajax.put(url, data, success, error, complete, abort, headers);

The delete method calls a DELETE request to a given url.

Ajax.delete(url, data, success, error, complete, abort, headers);

Arguments

All Ajax calls can be provided arguments with response handlers either as anonymous functions or named functions.

In the case of anonymous functions, arguments must be provided in the correct order:

Ajax.post(url, data, success, error, complete, abort, headers);

You can still omit handlers, for example if you don't need an abort handler:

Ajax.post(url, data, complete);

Ajax.post(url, data, success, error);

With named functions, as long as the function names are one of success, error, complete, abort, they can be provided in any order

Ajax.post(url, error, abort, success, complete, headers);

Additionally you can supply response handlers directly to an Ajax instance, this should be done before the XHR call is made:

// Before call
Ajax.success((response) =>
{
    // Do something here

}).post(url, data);

All response handlers are chainable making it easy to setup complex scenarios

Ajax.success((response) =>
{
    // Do something here

})
.error((response) =>
{
    // Do something here

})
.complete((response, successful) =>
{
    // Do something here

})
.post(url, data);

Additionally, you can use the headers function to supply headers specifically this way:

Ajax.success((response) =>
{
    // Do something here
})
.headers({foo: 'bar'})
.post(url, data);

If the abort method is called after an XHR call is made, the request will be immediately aborted. The abort and error handler with both be called:

Ajax.success((response) =>
{
    // Do something here
})
.error((response) =>
{
    // Do something here

})
.post(url, data)
.abort();

If the abort method is called before an XHR call is made, a supplied callback will be used as the abort handler

Ajax.success((response) =>
{
    // Do something here
})
.abort((response) =>
{
    // Do something here
})
.post(url, data)
.abort();

Response

Response handlers will receive the XHR.responseText as their primary parameter with this applied as the XHR Object.

In the case of complete a second boolean parameter is supplied indicating if the call was successful or not.

Ajax.post('http://example.com', { foo : 'bar' }, 
    function success(response)
    {
        // this === XHR
        console.log('success');
        console.log(response);
    },
    function error(response)
    {
        // this === XHR
        console.log('error');
        console.log(response);
    },
    function complete(response, successful)
    {
        // this === XHR
        console.log('Completed');
        console.log(`Was successful: ${successful}`);
        console.log(response);
    }
);

Upload

The upload method calls an upload to a url. Upload has the same response handlers as other Ajax calls with the addition of a progress handler which receives the browser progress event:

Ajax.upload(url, fileObj, success, error, complete, abort, progress, headers);

Below is an example

Ajax.success((response) =>
{
    console.log('The upload completed successfully.')
})
.error((response) =>
{
    console.log('There was an error uploading the file.')
})
.progress((e) =>
{
    console.log(`[${e.loaded}] uploaded of total [${e.total}]. [${e.total - e.loaded}] remaining....`);
})
.upload(url,fileObject);