Отправить GET или POST-запрос (Ajax)

GET-запрос

GET или POST-запрос отправляется через объект XMLHttpRequest (также сокращённо называется XHR).

var ajax = new XMLHttpRequest();

// выполнить код, когда придёт ответ с GET-запроса
ajax.onreadystatechange = function() {
    if (ajax.readyState == 4) {

        if (ajax.status == 200 || ajax.status == 304) {
            // код при успешном запросе
            ajax.response; // ответ сервера
        } else {
            // код при ошибке
        }

    }
}

// Оправка GET-запроса
ajax.open('GET', '/handler.php');
ajax.setRequestHeader("X-Requested-With", "XMLHttpRequest");
ajax.send();

Стоит обратить внимание на метод setRequestHeader(). Данный метод говорит серверу, что был отправлен Ajax-запрос. Многие фреймворки, например jQuery, устанавливают данный заголовок по умолчанию. Если не установить данный заголовок, то сервер может не определить Ajax-запрос и вернуть ошибку.

Отправлять GET или POST-запрос  можно только на текущем домене сайта (из-за правила ограничения домена, также называемые «Same Origin Policy»).

Метод open() также может принимать третий параметр false, который делает запросы синхронными (т.е. код перестаёт выполняться, пока не придёт ответ от сервера). Данный способ считается нерекомендованным к использованию, т.к. может замедлять работу JavaScript. Браузер Chrome также выдаёт предупреждение в консоли, когда используется данным параметр.

POST-запрос

Сначала надо указать, какие данные надо отправить:

// Старые браузеры
var params = 'lang=JavaScript&framework=jQuery';

// Современные браузеры
var params = new FormData();
params.append("lang", "JavaScript");
params.append("framework", "jQuery");

Объект FormData() поддерживается современными браузерами (поддержка IE с версии IE 10).

В FormData() можно также передать элемент формы, чьи поля будут переданы в POST-запросе.

var params = new FormData(document.getElementById('form-name')); // 1-ый способ
var params = new FormData(document.forms['form-name']);          // 2-ой способ

Созданные параметры можно передать через метод send().

var ajax = new XMLHttpRequest();

// выполнить код, когда придёт ответ с POST-запроса
ajax.onreadystatechange = function() {
    if (ajax.readyState == 4) {

        if (ajax.status == 200 || ajax.status == 304) {
            // код при успешном запросе
            ajax.response; // ответ сервера
        } else {
            // код при ошибке
        }

    }
}

// Оправка POST-запроса
ajax.open('POST', '/ajax-handler.php');
ajax.setRequestHeader("X-Requested-With", "XMLHttpRequest");
ajax.send(params);