Ajax запрос JSON-данных
Производит запрос json-данных у сервера, методом GET, без перезагрузки страницы. Функция имеет несколько необязательных параметров.
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-файла). Более подробно об этом можно прочесть на википедии.