bunnyjs/src/bunny.ajax.js

'use strict'

/**
 * Base object Ajax
 */
export var Ajax = {

    /**
     * Sends an async HTTP (AJAX) request or if last parameter is false - returns created instance
     * with ability to modify native XMLHttpRequest (.request property) and manually send request when needed.
     *
     * @param {string} method - HTTP method (GET, POST, HEAD, ...)
     * @param {string} url - URI for current domain or full URL for cross domain AJAX request
     *        Please note that in cross domain requests only GET, POST and HEAD methods allowed as well as
     *        only few headers available. For more info visit
     *        https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
     * @param {object} data - key: value pair of data to send. Data is automatically URL encoded
     * @param {callback(responseText)} on_success - callback on response with status code 200
     * @param {callback(responseText, responseStatusCode)} on_error = null - custom handler
     *        for response with status code different from 200
     * @param {object} headers = {} - key: value map of headers to send
     * @param {boolean} do_send = true - instantly makes requests
     *
     * @returns {Object}
     */
    create(method, url, data, on_success, on_error = null, headers = {}, do_send = true) {

        var t = Object.create(this);
        t.method = method;
        t.url = url;
        t.data = data;
        t.request = new XMLHttpRequest();
        t.onSuccess = on_success;
        t.onError = on_error;
        t.headers = headers;
        t.request.onreadystatechange = function() {
            if (t.request.readyState === XMLHttpRequest.DONE) {
                if (t.request.status === 200) {
                    t.onSuccess(t.request.responseText);
                } else {
                    if (t.onError !== null) {
                        t.onError(t.request.responseText, t.request.status);
                    } else {
                        console.error('Bunny AJAX error: unhandled error with response status ' + t.request.status + ' and body: ' + t.request.responseText);
                    }
                }
            }
        };

        if (do_send) {
            t.send();
        }

        return t;
    },

    /**
     * Should be called on instance created with factory Ajax.create() method
     * Opens request, applies headers, builds data URL encoded string and sends request
     */
    send() {

        this.request.open(this.method, this.url);

        for (var header in this.headers) {
            this.request.setRequestHeader(header, this.headers[header]);
        }

        var str_data = '';

        if (this.data instanceof FormData) {
            this.request.send(this.data);
        } else {
            for(var name in this.data) {
                str_data = str_data + name + '=' + encodeURIComponent(this.data[name]) + '&';
            }
            this.request.send(str_data);
        }

    },

    /**
     * Sends a form via ajax POST with header Content-Type: application/x-www-form-urlencoded
     * Data is automatically taken form all form input values
     *
     * @param {object} form_el - Form document element
     * @param {callback(responseText)} on_success - callback for status code 200
     * @param {callback(responseText, responseStatusCode)} on_error = null - custom handler for non 200 status codes
     * @param {object} headers = {'Content-Type': 'application/x-www-form-urlencoded'} - key: value map of headers
     */
    sendForm(form_el, on_success, on_error = null, headers = {'Content-Type': 'application/x-www-form-urlencoded'}) {
        var data = {};
        form_el.querySelectorAll('[name]').forEach(function(input){
            data[input.getAttribute('name')] = input.value;
        });
        this.create('POST', form_el.getAttribute('action'), data, on_success, on_error, headers, true);
    },

    /**
     * Sends a form via ajax POST with header Content-Type: multipart/form-data which is required for file uploading
     * Data is automatically taken form all form input values
     *
     * @param {object} form_el - Form document element
     * @param {callback(responseText)} on_success - callback for status code 200
     * @param {callback(responseText, responseStatusCode)} on_error = null - custom handler for non 200 status codes
     * @param {object} headers = {'Content-Type': 'multipart/form-data'} - key: value map of headers
     */
    sendFormWithFiles(form_el, on_success, on_error = null, headers = {'Content-Type': 'multipart/form-data'}) {
        this.sendForm(form_el, on_success, on_error, headers);
    },

    /**
     * Sends a simple GET request. By default adds header X-Requested-With: XMLHttpRequest
     * which allows back-end applications to detect if request is ajax.
     * However for making a cross domain requests this header might not be acceptable
     * and in this case pass an empty object {} as a last argument to send no headers
     *
     * @param {string} url - URI or full URL for cross domain requests
     * @param {callback(responseText)} on_success - callback for status code 200
     * @param {callback(responseText, responseStatusCode)} on_error = null - custom handler for non 200 status codes
     * @param headers = {'X-Requested-With': 'XMLHttpRequest'} key: value map of headers
     */
    get: function(url, on_success, on_error = null, headers = {'X-Requested-With': 'XMLHttpRequest'}) {
        this.create('GET', url, {}, on_success, on_error, headers, true);
    },

    post: function(url, data, on_success, on_error = null, headers = {'X-Requested-With': 'XMLHttpRequest'}) {
        this.create('POST', url, data, on_success, on_error, headers, true);
    }

};