Категория: jQuery.
Ajax с JQuery – несколько интерактивных примеров. Ajax – это группа технологий используемых в web разработке для создания интерактивных приложений. Ajex это технология клиент-сервер, который позволяет извлекать данные с сервера в асинхронном режиме без перезагрузки страницы. Всё это даёт отличный результат, удобство пользования вашим web сайтом и повышения скорости обработки запросов к серверу. Библиотека Jquery поможет нам в этом , потому как в ней есть все необходимые методы для работы с Ajax.
Во первых в Jquery для работы с Ajax есть два метода:
$ .ajax или jQuery.ajax
Используемые параметры могут быть разными:
$.ajax(Map properties) or $.ajax(String url [, Map properties])
URL – запрошенный адрес страницы.
Properties – Массив свойств для вашего запроса.
Массив свойств достаточно обширен, более подробнее о них можете ознакомиться здесь.
Я расскажу о наиболее полезных свойствах.
success (function) – эта функция вызывается, когда запрос выполнен успешно. Функция возвращает несколько параметров, но первый параметр всегда возвращает данные с сервера, который мы и будем использовать.
data (object/string) – пользовательские данные, которые будут переданы на запрашиваемую страницу.
dataType (string) – возможны значения: XML , JSON или HTML. Описывает, какой тип данных мы ожидаем от сервера.
type (string) – Тип запроса, возможны значения GET или POST. По умолчанию – GET.
url (string) – адрес для запроса. Теперь перейдём к примерам использования.
Пример 1 — Самый простой, извлечение текстовой информации.
$.ajax({
url: 'response.php?action=sample1',
success: function(data) {
$('.results').html(data);
}
});
Мы создаём блок DIV .results для принятия ответов.
awaiting for response
Что же сервер? Просто возвращает текстовое значение:
echo 'Sample 1 - success';
Пример 2 — мы будем посылать пользовательские данные в наш PHP скрипт.
$.ajax({
type: 'POST',
url: 'response.php?action=sample2',
data: 'name=Andrew&nickname=Aramis',
success: function(data){
$('.results').html(data);
}
});
Сервер просто возвращает текстовое значение переменных:
echo 'Sample 2 - success, name = ' . $_POST['name'] . ', nickname= ' . $_POST['nickname'];
Пример 3 – мы будем использовать dataType = script.
$.ajax({
dataType: 'script',
url: 'response.php?action=sample3',
})
Как вы видите, мы ничего не делали на успех здесь, в место этого мы будем в состоянии сделать это на стороне сервера:
echo "$('.results').html('Sample 3 - javascript evaluating');";
Пример 4 – мы будем использовать Datatype = XML. Это полезно для работы с внешними XML, в качестве примера RSS каналы.
$.ajax({
dataType: 'xml',
url: 'response.php?action=sample4',
success: function(xmldata){
$('.results').html('');
$(xmldata).find('item').each(function(){
$('
').html( $(this).text() ).appendTo('.results');
});
}
});
Наш провайдер XML просто должен возвращать XML к нам:
header ('Content-Type: application/xml; charset=UTF-8');
echo 'Andrew', 'nickname' => 'Aramis');
require_once('Services_JSON.php');
$oJson = new Services_JSON();
echo $oJson->encode($aRes);
Теперь вы знаете как использовать ajax методы с jQuery, для отправки и получения данных в необходимых режимах. Используйте этот материал в ваших проектах.