Описание метода ajax():
Метод .ajax() лежит в основе всех ajax запросов созданных в jQuery. Зачастую нет надобности использовать данный метод, поскольку есть более упрощенные его вариации, например $.get() или .load(), которые проще для использования. Данный метод рекомендуется использовать в случае, если Вас не удовлетворяют стандартные настройки упрощенных методов ajax.
Примечание: не забывайте про глобальные настройки, указанные в методе $.ajaxSetup(), с их попомщью Вы так же можете настраивать запрос как с методом $.ajax.
В примере указанном выше метод не содержит опций, однако, происходит загрузка текущей страницы, но с результатом ничего не происходит. Для того чтобы использовать результат нам необходимо применить функцию обратного вызова.
Использование нескольких обработчиков для единичного вызова ajax:
// пивязываем обработчики к моменту завершения ajax запроса,
// передавя при этом jqxhr объект, созданный из запроса
var jqxhr = $.ajax({ url: "example.php" })
.success(function() { alert("success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });
// ваш код
// устанавливаем дополнительню функцию обратного вызова
jqxhr.complete(function(){ alert("second complete"); });
Функции обратного вызова
Опции beforeSend, error, dataFilter, success и complete могут сдержать функции обратного вызова, которые выполняются в подходящее для их вызова время.
1. функция в опции beforeSend вызывается до того, как запрос отправлен к серверу, данная функция принимает аргумент, содержащий XMLHttpRequest объект как параметр.
2. функция в опции error вызывается, если запрос заканчивается ошибкой. Функция так же принимает объект XMLHttpRequest, а так же тип события ошибки, и исключение, возникающее при срабатывании данного события.
3. функция в опции dataFilter вызывается, если запрос завершился успешно. Функция принимает несколько параметров: данные от сервера, значение опции dataType, и должен вернуть данные (которые, вероятно, будут изменены в данной функции) для дальнейшей передаче в обработчик события success, указанный в опции success.
4. функция в опции success вызываемся, если запрос завершился успешно. Функция принимает в качестве параметров данные от сервера, так же строку, содержащую статус успешности.
5. функция в опции complete вызывается, если запрос завершился, но безразлично успешно или нет. В функциюпередаются XMLHttpRequest объект, а так же строка, содержащая статус успешности отправки запроса либо ошибки.
Для того чтобы использовать HTML данные, полученные от сервера, нам необходимо применить обработчик события success, то есть функцию обратного вызова, о которой мы только что упоминали выше. Ниже в перменной data будет содержаться ответ сервера.
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
alert('Загрузка выполнена.');
}
});
Однако, для данного запроса лучше бы было применить методы $.load() и $.get().
Типы данных.
Метод $.ajax() полагается на данные сервера при получении от него ответа. Если сервер вернул данные с отчетом о том, что их тип XML, jQuery определит тип, и Вы сможете используя методы для разбора XML документов или помощью jQuery селектора. Если будет определен другой тип данных, например HTML, то данные будут рассматриваться как текст.
Обработка разных типов данных может лучше производится указанием в опции dataType соответствующего типа. По-мимо xml, опция dataType может быть следующих типов: html, json, jsonp, script, или text.
Такие типы как text и xml возвращают данные без их предварительной обработки. Попросту говоря данные передаются дальше обработчику события success, через свойства responseText или responseHTML объекта XMLHttpRequest.
Примечание: вы должны быть уверены, что используете корректный MIME-тип данных, он должен соответствовать типу данных, установленных в опции dataType.
Так же будьте внимательны при указании типа данных как html, любой встроенный в возвращаемые данные код javascript будет выполнен до того как данные будут представлены как строка. Аналогично вышесказанному ведет себя тип данных script, скрипт будет выполнен до того как он будет возвращен одной из функций обратного вызова. Данные jsoon разбираются соответствующим образом как javascript объект и передаются во вновь созданный объект. Для разбора используется метод JSON.parse() если браузер поддерживает его, иначе для разбора применяется конструктор Function. Json данные представляют собой структурированные данные, удобные для разбора в javascript. Если удаленный файл с данными существует на запрашиваемом сервере, вместо jsoon может быть использован тип jsonp. При использовании данного типа, к URL будет добавлен параметр callback=?? после чего сервер должен присоединить данные именно с тем именем, которое было указано в параметре callback=? и тем самым сформировать правильный JSONP ответ. Если Вам необходимо указать определенное специфичное название данного метода, используйте опцию jsonp метода $.ajax().
Примечание: формат JSONP является расширением формата JSON. Поэтому, для того чтобы сервер смог правильно определить параметры, передаваемые в строке - запросе, используйте код на стороне сервера.
Когда данные получены от удаленного сервера (в данном случае рассматриваются такие типы данных как script или jsonp) все операции с ними выполняются с использованием тега <scritp>, а не объекта XMLHttpRequest. Поэтому, в данном случае, объект XMLHttpRequest не возвращается и, следовательно, не передаётся обработчикам, например обработчику beforeSend.
Отправка данных на сервер
По умолчанию Ajax использует GET запрос. Если необходим тип POST вы можете указать его в опции type метода $.ajax(). Тип запроса определяет каким способом будут отправлены данные на сервер, содержащиеся в опции data.
Опция data может содержать либо строку из полей формы, например key1=value1key2=value2, либо таблицу {key1: 'value1', key2: 'value2'}. В последнем случае данные конвертируются в строку, после чего отправляются на сервер. Данную конвертацию можно обойти с помощью опции processData, установив её значение как false. К примеру, конвертация может быть нежелательна при отправке объекта XML на сервер, боле того, в данном случае необходимо изменить опцию contentType и указать соответствующий тип MIME.
Усложненные опции:
Глобальные опции предотвращают выполнение обработчиков .ajaxSend(), .ajaxError() и подобных методов. Это может быть полезно, например, когда Вам необходимо скрыть индикатор загрузки, который изначально создаётся с помощью метода .ajaxSend(). Ниже будет указано более подробное описание.
В версии jQuery 1.4.2 появилась возможность использовать аутентификацию. Для этого специально предназначены опции username и password.
В тех случаях, когда Вам необходмио ограничить ajax запрос определеннным интервалом времени используйте опцию timeout.
Как правило, запросы передаются на сервер, однако некоторые брауеры кэшируют данные запросы, для предотвращения кэширования применяйте опцию cache: false. Для того чтобы отправить запрос, чтобы проверить отчет браузера о том изменились ли данные на сервере, используйте опцию ifModified, установленную как true.
Опция scriptCharset позволяет четко определить кодировку для таких типов данных как script и jsoonp. Используйте данную опцию, если кодировка скрипта и кодировка страницы на сервере отличаются.
Первая буква Ajax свидетельствует о том, что запрос является асинхронным, то есть порядок завершения в определенной последовательности не гарантируется. Опция async метода $.ajax() по умолчанию установлена как true, то есть последующий код может выполняться после того как запрос выоплнен. Установка данной опции как false позволяет делать запросы синхронно.
Метод $.ajax() возвращает объект XMLHttpRequest, который им же и создаётся. Обычно данный объект создаётся внутри метода jQuery. Однако, если вы желаете созвать его вручную, то можете использовать опцию xhr. Возвращаемый объект в большинстве случаев может быть опущен, в результате вы получите низкоуровневый интерфейс для обследования и манипуляции. В частности, вызов метода .abort() для объекта будет причиной отмены отправки запроса, до того как он будет завершен.
Пример:
Пример:
Пример:
Пример:
Пример:
Пример: