5 примеров использования jQuery для AJAX

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);