Ajax запрос JSON-данных

jQuery.getJSON()

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

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

url — url-адрес, по которому будет отправлен запрос.
data — данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: {fName1:value1, fName2:value2, ...}.
callback(data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.

data — данные, присланные с сервера.
textStatus — статус того, как был выполнен запрос.
jqXHRобъект jqXHR (в версиях до jquery-1.5, вместо него использовался XMLHttpRequest)

$.getJSON() является сокращенным вариантом функции $.ajax(), вызванной со следующими параметрами:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

Полученные в результате запроса данные, можно получить в обработчике удачного выполнения запроса. Они будут предварительно преобразованы в javascript-объект или массив с помощью $.parseJSON(). Допустим, запрошенный json-файл содержит данные в следующем формате:

{
  "one": "Матрица",
  "two": "Матрица. Перезагрузка",
  "three": "Матрица. Революция"
}

Сформируем из полученных данных html-список и вставим на страницу:

$.getJSON('ajax/test.json', function(data){
  var items = [];
 
  $.each(data, function(key, val){
    items.push('<li id="' + key + '">' + val + '</li>');
  });
 
  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

Начиная с jQuery-1.5, метод $.getJSON() возвращает объект jqXHR, который помимо прочего реализует интерфейс deferred, что позволяет задавать дополнительные обработчики выполнения. Помимо стандартных для объекта deferred методов .done(), .fail() и .then(), с помощью которых можно устанавливать обработчики, в jqXHR реализованы их копии: .success(), .error() и .complete(). Это сделано для соответствия привычным названиям методов, с помощью которых устанавливаются обработчики выполнения ajax-запросов.

  // Запустим ajax-запрос, установим обработчики его выполнения и
  // сохраним объект jqxhr данного запроса для дальнейшего использования.
  var jqxhr = $.getJSON("example.json")
  .success(function() { alert("Успешное выполнение"); })
  .error(function() { alert("Ошибка выполнения"); })
  .complete(function() { alert("Завершение выполнения"); });
 
  // какой-либо код...
 
  // установим еще один обработчик удачного выполнения запроса
  jqxhr.complete(function(){ alert("Успешное выполнения 2"); });

Кроссдоменные запросы

Большинство браузеров не позволяют проводить ajax-запросы на ресурсы, с доменами, поддоменами и протоколами, отличными от текущего. Запрос json-данных является одним из двух возможных способов обойти это ограничение (второй способ это запрос javascript-файла). Более подробно об этом можно прочесть на википедии.

Ссылки

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