Ajax запрос методом GET
Осуществляет запрос к серверу методом GET, без перезагрузки страницы. Функция имеет несколько необязательных параметров.
url — url-адрес, по которому будет отправлен запрос.
data — данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: {fName1:value1, fName2:value2, ...}.
callback(data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.
- data — данные, присланные с сервера.
- textStatus — статус того, как был выполнен запрос.
- jqXHR — объект jqXHR (в версиях до jquery-1.5, вместо него использовался XMLHttpRequest)
dataType — ожидаемый тип данных, которые пришлет сервер в ответ на запрос (подробности тут).
Содержание |
Простое использование
Простейший ajax-запрос: отправим пустой запрос к серверу и не будем обрабатывать ответ. Это может быть использовано, например для подсчета количества наведений курсора на баннер (при каждом наведении серверу будет отправляться сигнал).
$.get("/plusOne.php");
Рассмотрим более сложное взаимодействие с сервером. Отправим данные на сервер и обработаем их. Javascript будет выглядеть следующим образом:
// На сервер будет отправлен запрос страницы http://hostname/ajaxtest.php и указаны два параметра. // После получения ответа от сервера будет вызвана функция onAjaxSuccess, которая выведет // на экран сообщение с данными, присланными сервером. $.get( "/ajaxtest.php", { param1: "param1", param2: 2 }, onAjaxSuccess ); function onAjaxSuccess(data) { // Здесь мы получаем данные, отправленные сервером и выводим их на экран. alert(data); }
На сервере, обработка Ajax запроса ничем не отличается от обработки обычного запроса:
<?php // файл http://hostname/ajaxtest.php echo "Получены параметры с сервера: param1 = ".$_GET['param1']." и param2 = ".$_GET['param2']; ?>
В результате этого запроса, на странице появится табличка с текстом "Получены параметры с сервера: param1 = param1 and param2 = 2"
Продвинутое использование
$.get() является сокращенным вариантом функции $.ajax(), вызванной со следующими параметрами:
$.ajax({ url: url, data: data, success: success, dataType: dataType });
Подробности использования параметра dataType можно найти в описании $.ajax().
Замечание: большинство браузеров не позволяют проводить ajax-запросы на ресурсы с доменами, поддоменами и протоколами, отличными от текущего. Однако, это ограничение не распространяется на запросы типа jsonp и script.
Обработка выполнения запроса
Стандартным средством обработки успешного выполнения запроса, является указание собственной функции в параметре success. При вызове она получает данные переданные сервером, текстовый статус выполнения запроса, а так же Объект jqXHR.
Начиная с jQuery-1.5, метод $.get() возвращает объект jqXHR, который помимо прочего реализует интерфейс deferred, что позволяет задавать дополнительные обработчики выполнения. Помимо стандартных для объекта deferred методов .done(), .fail() и .then(), с помощью которых можно устанавливать обработчики, в jqXHR реализованы .success(), .error() и .complete(). Это сделано для соответствия привычным названиям методов, с помощью которых устанавливаются обработчики выполнения ajax-запросов. Однако начиная с jQuery-1.8 эти три метода станут нежелательными для использования.
// Запустим ajax-запрос, установим обработчики его выполнения и // сохраним объект jqxhr данного запроса для дальнейшего использования. var jqxhr = $.get("example.php") .success(function() { alert("Успешное выполнение"); }) .error(function() { alert("Ошибка выполнения"); }) .complete(function() { alert("Завершение выполнения"); }); // какой-либо код... // установим еще один обработчик удачного выполнения запроса jqxhr.complete(function(){ alert("Успешное выполнения 2"); });