Ajax запрос методом GET

Материал из JQuery

Перейти к: навигация, поиск
jQuery.get()

Осуществляет запрос к серверу методом GET, без перезагрузки страницы. Функция имеет несколько необязательных параметров.

jQuery.get(url,[data],[callback],[dataType]):jqXHR1.0

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"); });

Ссылки

Поисковые ключи:
  • асинхронный запрос методом get
  • ajax-запрос методом get
  • запрос к серверу методом get
  • отправка данных без перезагрузки страницы
  • получение данных без перезагрузки страницы
  • jQuery.get()
  • $.get()
  • .get()
  • get()