Урок - jQuery.get()

Группа вКонтакте
Лицензия: Лицензия Creative Commons.

Метод jQuery.get() выполняет HTTP GET-запрос для получения данных с сервера.

Синтаксис метода jQuery.get()

jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

где

  • url - строка, содержит URL запроса, для отправки данных.
  • data - строка или Plain-объект (ассоциативный массив), данных для отправки на сервер.
  • success(data, textStatus, jqXHR) - функция обратного вызова, вызывается если запрос успешен.
  • dataType - строка, тип данных ожидаемые от сервера. По умолчанию, jQuery пытается определить автоматически (xml, json, script или html).

Пример ниже, эквивалент jQuery.get() в исполнении jQuery.ajax():

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

В функцию обратного вызова success передаются возвращаемые данные, которые могут быть корневым элементов XML, строкой text, JavaScript-файлом или JSON-объектом, в зависимости от MIME-типа ответа. Также передается текстовый статус ответа.

Начиная с версии jQuery 1.5 в функцию success передается jqXHR-объект. Однако в случае JSONP и кросс-доменных запросах параметры jqXHR и textStatus при передаче в success не определены.

В большинстве реализация обработчик success задается следующим образом:

jQuery.get('ajax/test.html', function(data) {
    $('.result').html(data);
    alert('Load was performed.');
});

В этом примере получаем указанную HTML-страницу и вставляем её на страницу.

jqXHR-объект.

С версии jQuery 1.5 все AJAX-методы возвращают расширенный объект XMLHttpRequest. Это XHR-объект jQuery или коротко jqXHR, возвращается jQuery.get() реализуя Promise-интерфейс, предоставляя ему все свойства, методы и поведение Promise (смотрите Отложенный объект, для получения дополнительной информации). jqXHR.done() (вместо success), jqXHR.fail() (вместо error) и jqXHR.always() (вместо complete) принимают аргумент функции, которая вызывается, когда запрос завершается. Для получения информации об аргументах этой функции обратитесь в раздел документации jQuery.ajax().

Promise-интерфейс также позволяет AJAX-методам в jQuery, в том числе и JQuery.get(), создать цепочку из jqXHR.done(), jqXHR.fail(), jqXHR.always(), т.е. из нескольких методов обратного вызова на один запрос, и даже назначить эти функции, после того как запрос был завершен. Если запрос уже завершен, назначенные вновь методы будут выполнены сразу же.

// Назначаем запросы сразу же после запроса
// и сохраняем jqXHR-объект этого запроса.
var jqxhr = $.get("example.php", function() {
    alert("success");
})
.done(function() { alert("second success"); })
.fail(function() { alert("error"); })
.always(function() { alert("finished"); });

// выполняем какой-то код здесь ...

// Добавляем новый обработчик завершения запроса, для уже завершенного запроса
jqxhr.always(function(){alert("second finished");});

Устаревшие обработчики.

Методы jqXHR.success(), jqXHR.error(), jqXHR.complete() являются устаревшими с версии jQuery 1.8. В будущем эти методы будут удалены. Используйте вместо них jqXHR.done(), jqXHR.fail(), jqXHR.always(), соответственно.

Дополнительное примечание.

  • Из-за ограничений безопасности браузеров, большинство AJAX-запросов ограничены той же политикой безопасности. AJAX-запросы не могут успешно извлекать информацию из других доменов, поддоменов или протоколов.
  • Если во время запроса jQuery.get() возникает ошибка, то это произойдет не заметно, пока не будет вызван глобальный метод jQuery.ajaxError(). Альтернативой обработки ошибок, начиная с версии jQuery 1.5, может быть jqXHR-объект, возвращаемый jQuery.get().
  • На тип данных Script и JSONP не распространяются те же ограничения безопасности.

Примеры:

Пример: Выполняется запрос на страницу test.php, но не выполняется обработка данных.

$.get("test.php");

Пример: Запрос на страницу test.php с отправкой некоторых данных (без обработки полученных данных).

$.get("test.php", { name: "John", time: "2pm" } );

Пример: Передается массив данных на сервер (без обработки полученных данных).

$.get("test.php", { 'choices[]': ["Jon", "Susan"]} );

Пример: Оповещаем об успешном получении данных со страницы test.php (HTML или XML, в зависимости от полученных данных).

$.get("test.php", function(data) {
    alert("Data Loaded: " + data);
});

Пример:Оповещаем об успешном получении данных со страницы test.cgi с дополнительной отправкой данных (HTML или XML, в зависимости от полученных данных).

$.get("test.cgi", { name: "John", time: "2pm" })
.done(function(data) {
    alert("Data Loaded: " + data);
});

Пример: Получить содержимое страницы test.php, возвращаемые в JSON-формате (<?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>), и вывести их на страницу.

$.get("test.php",
    function(data) {
        $('body').append( "Name: " + data.name ) // John
            .append( "Time: " + data.time ); // 2pm
    }, "json"
);