JavaScript: gestire AJAX senza jQuery

JavaScript ci permette di gestire AJAX senza librerie esterne.

JavaScript di Gabriele Romanato

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

}

Commenti