Ajax на чистом JavaScript

18:18 12.06.2017
На форуме есть инструкция, как выполнить Ajax запрос при помощи библиотеки jQuery (Динамическое обновление контента (без перезагрузки страницы AJAX jQuery)), в этой теме я покажу, как выполнить Ajax запрос на чистом JavaScript, то есть без подключения, каких то библиотек.

Я написал небольшую функцию, которую так и назвал - ajax. Вот, как она выглядит:
function ajax(value) {
    var inquiry = new XMLHttpRequest();
    inquiry.open(value.method, value.url, true);
    inquiry.send();
    inquiry.onreadystatechange = function() {
        if (this.readyState != 4) {
            return false;
        };

        if (this.status != 200) {
            return false;
        };
        
        document.getElementById(value.result).innerHTML = this.responseText;
    };
}; 

Как видите тут не много кода, но и работает функция только с GET методом, но это только пока, скоро мы её улучшим.

Как использовать данную функцию:
Надо заполнить все параметры функции и всё. Вот как это делается:
ajax({
    method: 'GET',             // Метод
    url: 'ajax.php?a=11&b=22', // Адрес, куда посылать запрос
    result: 'result'           // ID тега, куда выводить результат
});

На этом пока всё. Следите за темой, скоро продолжим.
18:42 12.06.2017
Немного допилил функцию, вот, что получилось:
function ajax(value) {
    var gear    = '';
    var method  = (value.method == 'POST' ? 'POST' : 'GET');
    var subject = (value.subject != '' ? value.subject : '');
    var inquiry = new XMLHttpRequest();
    inquiry.open(method, value.url, true);
    inquiry.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    if (method == 'POST') {
        for (var i = 0; subject.length > i; i++) {
            gear += (i != 0 ? '&' : '') + subject[i].split(':')[0] + '=' + encodeURIComponent(subject[i].split(':')[1]);
        };
    };

    inquiry.send(gear);
    inquiry.onreadystatechange = function() {
        if (this.readyState != 4) {
            return false;
        };

        if (this.status != 200) {
            return false;
        };
        
        document.getElementById(value.result).innerHTML = this.responseText;
    };
};

Основная доработка это добавил метод POST. Теперь можно отправлять, как GET запросы, так и POST. Если используете метод GET, то его можно не указывать, он установлен по умолчанию. Пример GET запроса:
ajax({
    url: 'ajax.php?a=11&b=22', // Адрес, куда посылать запрос (URL с параметрами)
    result: 'result'           // ID тега, куда выводить результат
});

С POST методом необходимо указать передаваемые параметры массивом:
ajax({
    method: 'POST',                   // Метод
    url: 'ajax.php',                  // Адрес, куда посылать запрос
    subject: ['name:Иван', 'age:21'], // Передаваемые параметры (в массиве) 
    result: 'result'                  // ID тега, куда выводить результат
});

Элементы массива передаваемых параметров, необходимо писать с двоеточием, оно разделяет название переменной от ее значения.
Синтаксис: имя_переменной:значение.
Элемент массива: name:Иван, примет переменная $_POST['name'] и ее значение будет Иван.

Еще, подумал о том, что полученный результат не всегда надо выводить на экран через какой то тег или делать это не так, иногда вообще выводить ни чего не надо, но полагаясь на результат надо делать какие то другие действия. Немного переписал код.
Строчку:
        document.getElementById(value.result).innerHTML = this.responseText; 

Меняем на:
        if (value.processing != '') {
            value.processing(this.responseText);
        };

В коде вызове функции, меняем:
    result: 'result'

На:
    processing: function(data) {
        // Тут код, что необходимо делать с полученным результатом
        // В данном примере полученный результат будет в переменной "data"
    }

Пример использования:
ajax({
    method: 'POST',
    url: 'ajax.php',
    subject: ['a:' + a, 'b:' + b],
    processing: function(data) {
        alert(data);
    }
});