Разработчики библиотеки jQuery дали возможность использовать прелести ajax запросов без глубокого понимания процессов, которые происходят во время этого. Хорошо это или плохо, вопрос неоднозначный. Но, если такая возможность есть, давайте будем ей пользоваться и для начала ближе познакомимся с запросами ajax…

… вернее с тем, как их реализовать с помощью jQuery. Ниже я привожу перечень возможных запросов и постараюсь все пояснять на примерах.

load( url, [data], [callback] ) – загружает HTML из файла и вставляет его в объекную модель документа (DOM). По умолчанию (без [data]) выполняется как GET-запрос, однако, если будут переданы данные, выполнится как POST-запрос. Начиная с версии jQuery 1.2 в url можно определить селектор jQuery, например так:

$("#example").load("/ li.cat-item");

Результат выполнения Вы можете видеть ниже….

При выполнении этого запроса, были выбраны все элементы li с классом cat-item в запрашиваемом url и загружены в элемент #example, т.е. мы загрузили меню «Рубрики» этого сайта.
Здесь url – загружаемый url, data (опционально) – пары ключ/значение, которые могут быть переданы серверу, callback (опционально) – функция, которая может быть вызвана при окончании запроса (не требует обязательного успешного выполнения).
Еще пара примеров:

$("#feeds").load("feeds.html");

Загружает файл feeds.html в элемент с идентификатором feeds.

$("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("Последние 25 записей загружены");
});

То же самое, но дополнительно передается пара ключ/значение limit: 25 и задается функция, которая вызывается по окончании запроса.

jQuery.get( url, [data], [callback] ) – загружает страницу, используя GET-запрос. Это самый простой способ передачи GET-запроса серверу. Он допускает возможность использования одной функции, которая может быть вызвана при окончании запроса. Но в отличие от load, функция будет вызвана лишь при успешном выполнении запроса. Если необходимо определить функцию при ошибке запроса, лучше обратиться к $.ajax.

Несколько примеров:

$.get("test.php");

Запрашивает test.php page, но игнорирует возвращаемый результат.

$.get("test.php", { name: "Vasya", age: "27" } );

Запрашивает test.php и передает дополнительные параметры, но также игнорирует возвращаемый результат.

$.get("test.php", function(data){
  alert("Данные загружены: " + data);
});

Передает результат запроса (без передачи параметров) к файлу test.php в alert (это может быть HTML или XML, зависит от того, что возвращает test.php).

$.get("test.php", { name: "Vasya", age: "27" }, function(data){
  alert("Данные загружены: " + data);
});

Ну и полный набор: GET-запрос к файлу test.php с передачей каких-то параметров и возвращаемый результат передается в alert.

jQuery.post( url, [data], [callback], [type] ) – загружает страницу, используя POST-запрос. Все почти точно так же, как и в предыдущем случае, поэтому даже примеров приводить не буду. Обращу Ваше внимание разве что на еще один опциональный параметр – [type]. В нем можно определить тип передаваемых данных – JSON, XML и т.п.

jQuery.getJSON( url, [data], [callback] ) – загружает данные в формате JSON используя GET-запрос. Начиная с версии jQuery 1.2 Вы можете загружать данные в формате JSON, расположенные на другом домене. Пример загрузки фотографий с тэгом cat с Flickr JSONP API.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

jQuery.getScript( url, [callback] ) – загружает и выполняет JavaScript файлы, используя GET запрос. Начиная с версии jQuery 1.2 Вы можете загружать и выполнять JavaScript файлы с любого домена.

Вот пример:

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Мы загрузили и можем выполнить файл jquery.color.js – официальный jQuery Color Animation плагин.

jQuery.ajax( options ) – загружает страницу используя HTTP запрос. $.ajax() принимает один аргумент – объект, состоящий из пар ключ/значение, которые использует, чтобы инициализировать и обработать ajax-запрос. Ниже приведен список возможных значений.

Использование именно этой вспомогательной функции считается хорошим стилем, поскольку все остальные функции ($.get, $.post и т.п.) в конечном итоге используют именно $.ajax(options).

async – по умолчанию все запросы выполняются в асинхронном режиме (значение true). Если необходимо выполнить синхронный запрос, следует установить значение false для этой опции. Помните, что синхронный запрос может временно заблокировать браузер, запретив любые действия во время выполнения запроса.

beforeSend – может содержать функцию, которая должна быть вызвана до передачи запроса. beforeSend – это Ajax Event (события рассмотрены в другой статье).

cache – опция добавлена в jQuery 1.2. По умолчанию – true. Если установить в false, запрашиваемая страница не будет кэшироваться браузером.

complete – определяет функцию, которая будет вызвана по окончанию запроса (успешного и ошибочного выполнения). Принимает два аргумента: объект XMLHttpRequest и строку, описывающую «успешность» запроса. complete – это Ajax Event (события рассмотрены в другой статье).

contentType – при передаче данных серверу сообщает content-type. По умолчанию – application/x-www-form-urlencoded.

data – данные, передаваемые на сервер. Могут быть объектом или строкой. Конвертируются в строку запроса, если уже не представляют собой строку. Добавляются в URL GET-запроса. Если используется объект, он должен представлять собой пары ключ/значение. Если значения представлены в виде массива, jQuery сериализует значения с некоторым ключом. Например: {foo:["bar1", "bar2"]} будет представлено как «&foo=bar1&foo=bar2″.

dataType – строка, описывает тип данных, которые ожидаются в качестве ответа сервера. Если не определена, то jQuery сам попытается определить тип, основываясь на MIME-типе ответа сервера. Доступные типы:
- xml: вернет XML документ, который может быть обработан через jQuery.
- html: вернет HTML как plain text.
- script: расценивает ответ как JavaScript и возвращает его как plain text.
- json: расценивает ответ как данные в формате JSON и возвращает JavaScript объект.
- jsonp: загружает данные в формате JSON используя JSONP. Необходимо дополнительно добавить «?callback=?» в конец строки запроса в URL, чтобы определить вызов. (Добавлено в jQuery 1.2).
- text: строка plain text.

error – определяет функцию, которая будет вызвана в случае неуспешного выполнения запроса.

global – true или false. Вызывать или нет глобальные обработчики событий Ajax для этого запроса. Может быть использована для контроля различных Ajax событий. По умолчанию – true.

ifModified – запрос будет успешным только в случае, если данные ответа изменились со времени последнего запроса. По умолчанию – false.

processData – по умолчанию true. В опции data данные представлены в виде объекта, который преобразуется в строку запроса, подходящую для content-type по умолчанию – «application/x-www-form-urlencoded». Если необходимо иное, установите опцию processData в false.

success – указывается функция, которая будет вызвана в случае успешного завершения запроса. Функция принимает два аргумента: данные, возвращенные с сервера и отформатированные с учетом параметра dataType и строка, описывающая статус ответа.

timeout – устанавливает локальный тайм-аут для запроса в миллисекундах. Отменяет глобальный тайм-аут для этого запроса, если тот определен через $.ajaxSetup.

type – тип запроса, POST или GET. По умолчанию установлен GET. Типы запроса PUT или DELETE тоже могут быть использованы, но они поддерживаются не всеми браузерами.

url – просто url запроса.

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru