JavaScript: gestire AJAX con l'oggetto XMLHttpRequest

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

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

    xhr.onload = () => {
        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);
        }
    };
    xhr.send(data);

}