JavaScript: gestire AJAX senza jQuery

JavaScript: gestire AJAX senza jQuery

JavaScript ci permette di gestire AJAX senza librerie esterne.

Possiamo implementare la seguente funzione di utility:


'use strict';

const ajax = options => {
    options = options || {};
    options.method = options.method || 'GET';
    options.url = options.url || location.href;
    options.type = options.type || 'text';
    options.data = options.data || {};
    options.success = options.success || function() {};
    options.error = options.error || function() {};


    let query = [];
    for(let p in options.data) {
       let s = p + '=' + encodeURIComponent(options.data[p]);
       query.push(s);
    }
    let data = (query.length > 1 ) ? query.join('&') : query.join('');

    let xhr = new XMLHttpRequest();
    xhr.open(options.method, options.url);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    xhr.onload = function() {
        if (xhr.status === 200) {
            let response;
            switch(options.type) {
                case 'html':
                case 'text':
                    response = xhr.responseText;
                    break;
                case 'json':
                    response = JSON.parse(xhr.responseText);
                    break;
                case 'xml':
                    response = xhr.responseXML;
                    break;
                default:
                    response = xhr.responseText;
                    break;
            }
            options.success(response);

        } else {
            options.error(xhr.status);
        }
    };
    xhr.send(data);

}

Torna su