Отправить 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);
Авторизуйтесь, чтобы добавлять комментарии