AJAX – группа технологий, которая используется в веб разработке для создания интерактивных приложений. AJAX позволяет передавать данные с сервера без перезагрузки страницы. Таким образом можно получать очень впечатляющие результаты. А библиотека jQuery существенно облегчает реализацию AJAX с помощью встроенных методов.
Для реализации технологии используется метод
$.ajax или
jQuery.ajax:
$.ajax(свойства) или
$.ajax(url [, свойства])
Второй параметр был добавлен в версии 1.5 jQuery.
url – адрес запрашиваемой страницы;
properties – свойства запроса.
Полный список параметров приведен в документации jQuery.
В уроке мы используем несколько наиболее часто используемых параметров.
success (функция) – данная функция вызывается после успешного завершения запроса. Функция получает от 1 до 3 параметров (в зависимости от используемой версии библиотеки). Но первый параметр всегда содержит возвращаемые с сервера данные.
data (объект/строка) – пользовательские данные, которые передаются на запрашиваемую страницу.
dataType (строка) – возможные значения: xml, json, script или html. Описание типа данных, которые ожидаются в ответе сервера.
type (строка) – тип запроса. Возможные значения: GET или POST. По умолчанию: GET.
url (строка) – адрес URL для запроса.
Пример 1
Простая передача текста.
$.ajax({
url: 'response.php?action=sample1',
success: function(data) {
$('.results').html(data);
}
});
Для ответа имеется элемент div
.result.
<div class="results">Ждем ответа</div>
Сервер просто возвращает строку:
echo 'Пример 1 - передача завершилась успешно';
Пример 2
Передаем пользовательские данные PHP скрипту.
$.ajax({
type: 'POST',
url: 'response.php?action=sample2',
data: 'name=Andrew&nickname=Aramis',
success: function(data){
$('.results').html(data);
}
});
Сервер возвращает строку со вставленными в нее переданными данными:
echo 'Пример 2 - передача завершилась успешно. Параметры: name = ' . $_POST['name'] . ', nickname= ' . $_POST['nickname'];
Пример 3
Передача и выполнение кода JavaScript
$.ajax({
dataType: 'script',
url: 'response.php?action=sample3',
})
Сервер выполняет код:
echo "$('.results').html('Пример 3 - Выполнение JavaScript');";
Пример 4
Используем XML. Пример можно использовать для работы с внешними XML, например, RSS фидом.
$.ajax({
dataType: 'xml',
url: 'response.php?action=sample4',
success: function(xmldata){
$('.results').html('');
$(xmldata).find('item').each(function(){
$('
<li></li>
').html( $(this).text() ).appendTo('.results');
});
}
});
Сервер должен возвращать XML код:
header ('Content-Type: application/xml; charset=UTF-8');
echo <<<XML
<?xml version='1.0' standalone='yes'?>
<items>
<item>Пункт 1</item>
<item>Пункт 2</item>
<item>Пункт 3</item>
<item>Пункт 4</item>
<item>Пункт 5</item>
</items>
XML;
Пример 5
Используем данные JSON. Входные параметры можно использовать в качестве атрибутов получаемого объекта.
$.ajax({
dataType: 'json',
url: 'response.php?action=sample5',
success: function(jsondata){
$('.results').html('Name = ' + jsondata.name + ', Nickname = ' + jsondata.nickname);
}
});
Сервер должен возвращать данные в формате JSON:
$aRes = array('name' => 'Andrew', 'nickname' => 'Aramis');
require_once('Services_JSON.php');
$oJson = new Services_JSON();
echo $oJson->encode($aRes);