AJAX на нативном JavaScript

Рассмотрим несколько примеров работы с AJAX на нативном JavaScript. Что делать если нет под рукой jQuery или других библиотек? Фунукции написаны с учетом синтаксиса ECMAScript-2015

Функция для метода GET

 let ajaxGet = (url, callback) => {
    let xhr = new XMLHttpRequest();
    
     xhr.onreadystatechange = () => {
        if (xhr.readyState == 4){
            if(xhr.status == 200){
                alert( xhr.responseText ); //текст ответа
                callback();
            } else {
                //если ошибка
                alert(xhr.statusText);
            }
        }
    };
    xhr.open('GET', url, true);
    xhr.send(null);
};

Функция для метода POST. Данные для отправки на сервер принимает и строку и объект

let ajaxPost = (options) => {

    /* пример параметров
     * 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 {
                //если ошибка
                alert(xhr.statusText);
            }
        }
    };
};

Для поддержки старых версий Internet Explorer приходилось писать еще вспомогательную функцию, примерно такую

function getXmlHttpRequest(){
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        return new ActiveXObject('Microsoft.XMLHTTP');
    } else {
        return null;
    }
}
Share: