Отправка POST и GET запросов через JavaScript

Существует несколько способов отправки запросов на сервер через JavaScript. Но обычно нужно не только отправить данные, но и обработать ответ сервера. Указать тип данных, который он вернет. А еще нужно запустить функцию после успешного выполнения. И не забыть про обработку ошибок, если запрос не прошел. В общем много чего еще можно перечислять. Но я это к тому, что для разных задач нужен свой подход и способ реализации. Вот именно о существующих способах и их настройке мы поговорим в этой статье.

В JavaScript есть объект XMLHttpRequest, который позволяет отправлять асинхронные HTTP-запросы серверу. Еще есть всем известная библиотека JQuery, которая тоже имеет функции для отправки запросов на сервер.

На мой взгляд работать с библиотекой удобней всего. Поскольку редко когда на сайте используют чистый JavaScript. А раз библиотека уже подключена, то проще воспользоваться уже готовой функцией, чем использовать громоздкие конструкции как альтернативу. Поэтому для отправки запросов на сервер будем использовать функции этой библиотеки.

Запрос методом GET

Самый простой способ передать запрос на сервер:

$.get('/action.php', {query: 'test'}, function(data) { 
    console.log(data); // ответ от сервера
})
.success(function() { console.log('Успешное выполнение'); })
.error(function(jqXHR) { console.log('Ошибка выполнения'); })
.complete(function() { console.log('Завершение выполнения'); });

Где action.php - адрес запроса, {query: 'test'} - данные запроса.

Этот вариант является сокрашением функции $.ajax(). Запрос через нее будет выглядеть так:

$.ajax({
    type: 'GET',
    url: '/action.php',
    data: {query: 'test'},
    dataType: 'text',
    success: function(data) { console.log(data); }, // обработка ответа от сервера
    error: function(jqXHR) { console.log('Ошибка выполнения'); },
    complete: function() { console.log('Завершение выполнения'); }
});

Параметр dataType задает тип данных, которые ожидаются от сервера. Может принимать значения: xml, json, script, text или html. Если не указан, то определяется автоматически.

Запрос методом POST

Идентичный методу GET, только вызов осуществляется функцией $.post():

$.post('/action.php', {query: 'test'}, function(data) { 
    console.log(data); // ответ от сервера
})
.success(function() { console.log('Успешное выполнение'); })
.error(function(jqXHR) { console.log('Ошибка выполнения'); })
.complete(function() { console.log('Завершение выполнения'); });

Или функцией $.ajax():

$.ajax({
    type: 'POST',
    url: '/action.php', // адрес запроса
    data: {query: 'test'}, // данные запроса
    dataType: 'json', // тип ожидаемых данных,
    success: function(data) { console.log(data); }, // обработка ответа от сервера
    error: function(jqXHR) { console.log('Ошибка выполнения'); },
    complete: function() { console.log('Завершение выполнения'); }
});

Примечание: если нужно отправить поля формы, то данные для запроса можно упорядочить функцией serialize() (например, $("form").serialize()).

Запрос методом PUT

Для PUT нет именной функции. Поэтому запросы строятся через $.ajax():

$.ajax({
    type: 'PUT',
    url: '/action.php', // адрес запроса
    data: {query: 'test'}, // данные запроса
    dataType: 'json', // тип ожидаемых данных,
    success: function(data) { console.log(data); }, // обработка ответа от сервера
    error: function(jqXHR) { console.log('Ошибка выполнения'); },
    complete: function() { console.log('Завершение выполнения'); }
});

Следует помнить, что метод поддерживается не всеми браузерами.

Запрос методом DELETE

Для DELETE тоже нет своей функции отправки на сервер. Выполняется через $.ajax():

$.ajax({
    type: 'DELETE',
    url: '/action.php', // адрес запроса
    data: {query: 'test'}, // данные запроса
    dataType: 'json', // тип ожидаемых данных,
    success: function(data) { console.log(data); }, // обработка ответа от сервера
    error: function(jqXHR) { console.log('Ошибка выполнения'); },
    complete: function() { console.log('Завершение выполнения'); }
});

И тоже, как и метод PUT, не всеми браузерами поддерживается.

Вот такими способами можно отправлять запросы на сервер с помощью библиотеки jQuery. Они идеально подходят для задач, где нужно отправить или получить данные от сервера не перезагружая страницы.