AJAX with native JavaScript

09.05.19

Consider a few examples of working with AJAX with native JavaScript. Functions are written with ECMAScript-2015 syntax

The function for the GET method:

let ajaxGet = (url, callback) => {
    let xhr = new XMLHttpRequest();
     
     xhr.onreadystatechange = () => {
        if (xhr.readyState == 4){
            if(xhr.status == 200){
                alert( xhr.responseText );
                callback();
            } else {
                // if error
                alert(xhr.statusText);
            }
        }
    };
    xhr.open('GET', url, true);
    xhr.send(null);
};

The function for the POST method. The data to be sent to the server accepts both the string and the object.

let ajaxPost = options => {
 
    /* an example
     * options = {
     *      data: 'a=1&b=word&c=name',
     *       url: 'test.php',
     *       cb: function(){
     *          alert('test');
     *       }
     *  }
     */
    let sendstr = '',
        xhr = new XMLHttpRequest();
 
    if (typeof options.data == 'object') {
        let lastEl = Object.keys(options.data).length - 1;
        let count = 0;
        for (var k in options.data) {
            if (options.data.hasOwnProperty(k)) {
                sendstr += k + '=' + options.data[k] + (count != lastEl ? '&' : '');
                count++;
            }
        }
    } else {
        sendstr = options.data;
    }
    xhr.open('POST', options.url, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(sendstr);
    xhr.onreadystatechange = () => {
        if (xhr.readyState == 4) {
            if(xhr.status == 200){
                alert(xhr.responseText);
                if (options.cb) {
                    options.cb();
                }
            }else {
                // else error
                alert(xhr.statusText);
            }
        }
    };
};

To support older versions of Internet Explorer, you had to write another helper function, something like

function getXmlHttpRequest(){
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        return new ActiveXObject('Microsoft.XMLHTTP');
    } else {
        return null;
    }
}
blog comments powered by Disqus